jQuery操作
一、类名
addClass() 添加类名
removeClass() 删除类名
hasClass() 判断是否有指定类名，返回布尔值
toggleClass() 切换类名，如果有就删除，没有就添加
二、CSS
对应JS里的ele.style.color="red"
.css("color") 获取具体的css值
.css("color","red") 修改单个样式
.css({"color":"red","font-size":"50px"}) 修改多个样式 {}
三、位置
offset() // 获取匹配元素在当前视口的相对偏移,一个元素相对于文档（document）的当前位置。
position() // 获取匹配元素相对父元素的偏移
scrollTop() //获取匹配元素相对滚动条顶部的偏移，填入值时可以设置位移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移，填入值时可以设置位移
可以通过offset 设置偏移 .offset({"top":200,"left":50})
不能通过position设置
示例：
返回顶部： <style> .c1 { height: 50px; } .b1 { position: fixed; right: 10px; bottom: 10px; } .hide { display: none; } </style> <body> <div class="c1">001</div> <div class="c1">002</div> <div class="c1">003</div> 。。。。 <button class="b1 hide" onclick="up();" >返回顶部</button> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js";></script>; <script> $(window).scroll(function () { //滚动事件，每次滚动都触发 if ($(window).scrollTop()>100){ //如果与顶部距离大于100，解除隐藏 $(".b1").removeClass("hide"); }else { $(".b1").addClass("hide"); } }); function up(){ $(window).scrollTop(0); //移动到最上面 } </script> </body>
四、盒子 尺寸
height() //height
width() //width
innerHeight() //height +2padding
innerWidth() //width +2padding
outerHeight() //height +2padding + 2border
outerWidth() //width +2padding+2border
都可以通过输入值来修改，但最终其实都是修改的height和width，padding和border不变
五、文本操作
对于赋值，都会先清空之前的所有内容，再赋值
1、HTML代码
.html() //获取第一个匹配的元素的html内容
.html(xxx) //设置所有匹配到的元素的html内容
2、文本
text() //获取所有匹配元素的文本内容（包括后代的）（只获取文本部分）
text(xx) //设置所有匹配到的元素内容（）
3、值
val() 取得第一个匹配元素的当前值
#1、对于 input框 val() 取的是输入的内容
#2、对于单选的select框 val() 取的是选中的option里的value
#3、对于多选的select框 val() 取的是value值的数组 （multiple="multiple"）
#4、对于复选框checkbox $(":checkbox:checked").val() 取的是选中的第一个的值（如果不限定是checked的，取的是第一个框的值）
#5、对于单选框radio $("radio:checked").val() 取的是选中的值（如果不限定checked，则取的是第一个选项的值）
val(xx) //设置所有匹配元素的值
#1、对于单选的select val(xx) 设置选中内容，如果设置的内容不存在，则变为什么也不选，如果xx是一个数组，则取其中第一个有效的值
#2、对于多选的select val(["值1","值2"]) 设置选中
#3、对于复选框checkbox val(["值1","值2"]) 设置选中，括号内只能是数组，如果放字符串"值1"，是对html代码的修改，不是修改选中的情况
#4、对于单选框radio val(["值1"]) 括号内只能是数组
六、属性操作
.attr("属性名") //返回第一个匹配元素的属性值
.attr("属性名","值") //为所有匹配元素设置一个属性值，如果原来没有则会添加
.attr({"属性名1":"值1","属性名2":"值2"}) // 为所有匹配元素设置多个属性值
.removeAttr("属性名") // 从每一个匹配的元素中删除一个属性
对于checkbox
.prop("checked") 返回bool值 判断第一个匹配的元素是否被选中
.prop("checked",true) 设置所有匹配的元素被选中
对于radio
.prop("checked") 返回bool值 判断第一个匹配的元素是否被选中
.prop("checked",true) 相当于每个匹配的元素都被选中1下，由于单选，结果是只有最后一个元素被选中
.removeProp("prop添加的属性名")，用来删除由prop添加的属性
例如：.prop("prop_a",111)
.remove("prop_a")
这种增加和删除，无法在html代码里看到，可以从浏览器控制台 找到对应标签，点开▶查看
七、each循环
1、$.each([11,22,33],function(i,v) {
console.log(i,v)
})
输出 0 11
1 22
2 33
2、$("div").each(function(i){...i..})
i 为索引
3、.length 长度
八、文档处理
1、添加到指定元素内部的后面（子级）
$(A).append(B) 把B追加到A （B可以是字符串格式的标签）
$(A).appendTo(B) 把A追加到B
2、添加到指定元素内部的前面（子级）
$(A).prepend(B) 把B添加到A前面
$(A).prependTo(B) 把A添加到B前面
3、添加到指定元素外部的后面（平级）
$(A).after(B) 把B添加到A的后面
$(A).insertAfter(B) 把A添加到B后面
4、添加到指定元素外部的前面（平级）
$(A).before(B) 把B添加到A的前面
$(A).insertBefore(B) 把A添加到B前面
5、移除和清空元素
.remove() 从DOM中删除所有匹配的元素
.empty() 清空匹配元素中所有内容
6、替换
$(A).replaceWith(B) 用B替换A
$(A).replaceAll(B) 用A替换B
7、克隆
.clone() 默认只复制标签和内容
.clone(true) 也会复制绑定的事件
浙公网安备 33010602011771号