jQuery学习笔记5 2021-09-24

jQuery的属性操作
html() //与dom对象的innerHTML一样
text() //与dom对象的innerText一样
val() //与dom对象的value一样

attr() //可以设置和获取属性值
prop() //可以设置和获取属性值
//这两个方法对于某些属性值的返回值有所不同
//有时 prop()更优秀
//返回值举例

	设置checked	未设置checked
attr()	checked	undefined
prop()	true	false

//attr() 不推荐操作checked() readOnly() selected() disabled()等等
//prop() 只推荐操作checked() readOnly() selected() disabled()等等
ps.arrt()可以设置一些自定义的属性
//$(":checkbox:first").attr(“my_attribute”,“attribute_value”);
//获取一些自定义的属性
// $(":checkbox:first").attr(“my_attribute”);

全选 全不选 反选
//全选举例

$(":checkbox[name='items']").prop("checked",true);
$("#quanXuanBtn").prop("checked",$(":checkbox[name='items']").length==$(":checkbox[name='items']:checked").length);

dom对象的增删改
内部插入
a.appendTo(b) //把a插入到b子元素的末尾 成为最后一个子元素
a.prependTo(b) //把a插入到b子元素的前面 成为第一个一个子元素
//将标签插入到div的前面

$("<h1>标题</h1>").prepTo($("div"));

外部插入
insertAfter();
insertBefore()

$("<h1>标题</h1>").insertBefore($("div"));

替换
replaceWith()
replaceAll()

删除
remove()
empty()

//方法加括号时 要执行的方法体在后面的大括号里 返回一个返回值
//不加括号是方法地址 即成为方法本身

CSS样式操作
addClass() //添加样式
removeClass() //删除样式
toggleClass() //有就删除 没有就添加样式
offset() //获取和设置元素的坐标

offset({
top:100px,
left:50px
})
//按照坐标移动

jQuery动画
基本动画
show()
hide()
toggle()

淡入淡出动画
fadeIn()
fadeOut()
fadeTo()
fadeToggle()

jQuery事件操作
$(function(){});
与
window.οnlοad=function(){};
有什么区别?
触发顺序
1.jQuery页面加载先执行 dom页面加载后执行
//jQuery是在浏览器解析完 标签创建好dom对象之后马上执行
//原生js页面加载完成之后 除了等dom创建完成 还要等标签显示
2.原生js的页面加载 只会执行最后一次赋值的方法
但是jQuery会执行每一次的操作

jQuery常用事件处理方法
click() //绑定或触发
mouseOver() //鼠标移入事件
mouseOut() //鼠标移出事件
bind() //可以给元素一次绑定一个或多个事件

$("h5").bind("click mouseOver mouseOut",function(){
	console.log("这是bind绑定的click、mouseOver和mouseOut事件");
});

one() //使用上与bind一样 但是one()绑定的事件只会响应一次
live() //也是用来绑定事件的 他可以用来绑定选择器匹配的所有事件 哪怕元素是后来动态创建出来的也有效
unblind() //与bind()相反的操作 解除事件的绑定

事件的冒泡
父子元素同时监听同一个事件
子元素触发 父元素会自动触发

如何阻止
在子元素事件函数体里使用return false就可以阻止了

jQuery事件对象
获取 function()参数列表里加上event
//可以获取当前触发方法的是什么事件