11月16日学习内容整理:jquery样式操作补充,文本操作,属性操作,循环,绑定事件
一、样式操作补充
1、CSS:在选择器外部当方法使用
》》》.css("属性名","属性值") 添加属性
比如.css("color", "red")
》》》.css("属性名") 获取属性值
》》》.css({"属性1":"属性值1","属性2":"属性值2"}) 添加多个属性用字典的形式写
2、位置:也是当作方法来用
》》》.offset() 获取匹配元素在当前视口的相对偏移,就是把当前窗口作为参照物,元素所处的位置距离窗口的上和左的偏移量
.offset({"left":"100px","top":"100px"})也可以设置偏移量
》》》.position() 获取匹配元素相对父元素的偏移量,也就是把父元素作为参照物,元素所处位置距离父元素位置的偏移量
》》》scrollTop() // 获取匹配元素相对滚动条顶部的偏移
3、尺寸
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116171854859-1483250737.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116171924156-1404833455.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116171951077-1992239872.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172025702-144192678.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172306734-1790548841.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172238749-933039953.png)
<select id="single"> <option>Single</option> <option>Single2</option> </select> <hr> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> <hr> <input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 <script src="jquery-3.2.1.min.js"></script> <script> $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check1", "check2", "radio1"]); $("input").val(["radio1"]); $("input").val(["radio1", "radio2"]); </script>
三、属性操作
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172355046-663728512.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172419640-2077317957.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172331921-251532751.png)
用法一:可以来判断标签是否被选中,prop("checked"),返回true或false
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172439390-1663827892.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172453546-468360052.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172627937-880847337.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172547781-1500458090.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116172603156-2081985572.png)
![](https://images2017.cnblogs.com/blog/1220791/201711/1220791-20171116163108781-105107771.png)
输出:
.each(function(index, Element)):
描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。
.each()
方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this
总是指向这个元素。
jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的.each()
方法:
也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:
$("li").addClass("foo");
注意:::
在遍历过程中可以使用return false
提前结束each循环。
终止each循环:return false;