11月16日学习内容整理：jquery样式操作补充，文本操作，属性操作，循环，绑定事件...-优快云博客

本文详细介绍了JQuery中样式、位置、尺寸等操作方法，并深入探讨了文本、属性及事件绑定等功能，同时还提供了循环操作的具体用法。

一、样式操作补充

1、CSS：在选择器外部当方法使用

》》》.css("属性名"，"属性值") 添加属性

比如.css("color", "red")

》》》.css("属性名") 获取属性值

》》》.css(｛"属性1":"属性值1","属性2":"属性值2"｝) 添加多个属性用字典的形式写

2、位置：也是当作方法来用

》》》.offset（）获取匹配元素在当前视口的相对偏移，就是把当前窗口作为参照物，元素所处的位置距离窗口的上和左的偏移量
.offset（{"left":"100px","top":"100px"}）也可以设置偏移量

》》》.position（）获取匹配元素相对父元素的偏移量，也就是把父元素作为参照物，元素所处位置距离父元素位置的偏移量

》》》scrollTop() // 获取匹配元素相对滚动条顶部的偏移

》》》scrollLeft() // 获取匹配元素相对滚动条左侧的偏移

3、尺寸

》》》height() 元素本身的宽和高

》》》width()

》》》innerHeight() 元素加上padding的宽和高

》》》innerWidth()

》》》outerHeight() 元素加上padding加上border的宽和高

》》》outerWidth()

二、文本操作

1、html代码：

》》》html() // 取得第一个匹配元素的html内容，就是匹配了多个元素但也只返回第一个元素的里面包含的html标签内容
》》》html(val) // 设置所有匹配元素的html内容，仍然是先清空再赋值
 
2、文本值
》》》text() // 取得所有匹配元素的内容，一定要注意这里仍然是返回第一个匹配元素，而且只是元素里面所包含的所有文本信息，子节点的文本也会显示，但是不会显示子节点标签
》》》text(val) // 设置所有匹配元素的内容，只是文本内容，不识别标签，仍然是先清空再赋值
 
3、值
这个val方法我们通常都用在input和select标签中
》》》val() // 取得第一个匹配元素的当前值，也就是用户输入或者选中的标签的value值，不是用户输入的内容或选中的内容，我们通常用这个方法来取到用户输入的是什么
 
》》》val(val) // 设置所有匹配元素的值，就是给匹配元素设置它的value属性值
 
》》》val([val1, val2]) // 设置checkbox、select的值，意思就是设置选中的值，在生产中，我们不可能自己去设置选中的值而是由用户来选择，所以这个方法我们一般是不用的，知道了解有这么个用法就可以
 

<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>
 
 
三、属性操作
1、用于自定义属性或者其它属性
》》》attr("属性名") // 返回第一个匹配元素的属性值，注意不管匹配了多少个元素，也只返回第一个元素的属性值
》》》attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
 
》》》attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值，用字典的形式
》》》removeAttr() // 从每一个匹配的元素中删除一个属性 
 
 
2、我们通常用于checkbox和radio，复选框和单选框
》》》prop()
用法一：可以来判断标签是否被选中，prop（"checked"），返回true或false
 
用法二：也可以设置标签的选中状态：prop（"checked",true）代表选中，false不选中，比如可以应用在一些全选反选取消操作上就要我们去设置标签的选中状态，显然这种操作也是由用户触发的，所以我们不能去强制设置选中状态
 
》》》removeProp()
 
 
四、事件
 》》》》事件绑定
$(选择器).on（"事件名"，function（）｛
　　事件触发时的执行语句
｝）
 
 
 
 
 
五、循环
 
.each（）
》》》方式一：   $(选择器).each（[11,22,33]，function（i,v）｛
　　　　执行语句
｝）
这里的i就是数组的索引，v就是数组的对应元素，其实就是将数组的索引和元素当作参数循环的传到函数中去执行
 
》》》方式二：$(选择器).each（function（）｛
　　执行语句
｝）
注意这里的执行语句中要用到this的话，这个this就是匹配出来的每一个元素，就是DOM对象，因为jquery把元素都找出来之后each循环每一个元素就等于加了索引所以就变成了DOM对象
 
》》》终止循环：return false
 
 
 
@@@@老师博客：：：：
JQUERY.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
输出：
.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；
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

转载于:https://www.cnblogs.com/wanghl1011/articles/7845060.html