当前位置：首页 > news >正文

开发工程师必备————【Day22】前端开发之jQuery更多操作

news 来源：原创 2024/5/4 5:45:43

今日内容概要

jQuery更多操作(属性、样式、数据值)
jQuery绑定事件
jQuery简易动画效果
Bootstrap页面框架

筛选器方法

链式操作的底层原理
对象调用方法之后还会返回一个对象从而实现链式操作的效果

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

操作标签

jQuery操作 JS操作
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()
.css(‘样式名’,‘样式值’) style.样式名 = ‘样式值’
text() innerText()
html() innerHTML()
val() value
[0].files files
attr() 静态属性 ;prop() 动态变换(checked) setAttribute() getAttribute()
append() append()
prepend()
after()
before()
remove() 移除标签
empty() 清空标签

jQuery操作	JS操作
addClass()	classList.add()
removeClass()	classList.remove()
hasClass()	classList.contains()
toggleClass()	classList.toggle()
.css(‘样式名’,‘样式值’)	style.样式名 = ‘样式值’
text()	innerText()
html()	innerHTML()
val()	value
[0].files	files
attr() 静态属性 ;prop() 动态变换(checked)	setAttribute() getAttribute()
append()	append()
prepend()
after()
before()
remove() 移除标签
empty() 清空标签

jQuery绑定事件

1.JS绑定事件

	标签对象.on事件名 = function(){事件代码}
  		btnEle.onclick = function(){alert(123)}

2.jQuery绑定事件

	方式1
       jQuery对象.事件名(function(){事件代码})
           $btnEle.click(function(){alter(123)})
	方式2
   	  jQuery对象.on('事件名',function(){事件代码})
       	  $btnEle.on('click',function(){alter(123)})

注意：有时候使用jQuery的方式1绑定事件如果无法触发可以切换为方式2

阻止后续事件

1.能够触发form表单提交数据动作的标签有两个
	 <input type="submit">
 	 <button></button>
给已经有事件的标签绑定事件会先执行绑定的再去执行默认的
我们也可以让标签之前的事件不执行
return false

$(‘:submit’).click(function (e){
alert(‘一定要细心千万不要慌!!!’)
// return false 方式1
e.preventDefault()方式2
})

事件冒泡

涉及到标签嵌套并且有相同事件的时候那么会逐级往上反馈并执行

$("span").click(function (e) {
       alert("span");
   	  return false;  		方式1
       e.stopPropagation(); 	方式2
   });

事件委托

1.创建标签的两种方式
	JS
		document.createElement()
	jQuery
		$('<标签名>')
事件绑定默认情况下是不会对动态创建的标签生效的如果想生效需要事件委托
$('div').on('click','button',function () {
           alert('你犯困的样子萌萌哒')
       })
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)