前端技术（JQuery）学习笔记（三）JQuery获取元素的尺寸、each方法遍历json及元素、JQuery遍历DOM树，JQuery获取选中的复选框和列表框

今天药忘吃喽~ 2022-05-25 05:25 54阅读 0赞

一、小结  
1、JQuery对html元素的值的操作  
①、html() : 包括有元素的值以及子元素  
②、text() : 获取到元素的值，不包括子元素  
③、val() : 获取输入框等表单元素的值

2、JQuery对html元素的属性进行操作  
①、通过attr()方法对html元素的属性进行操作，设置元素的属性值  
jqObj.attr(“属性名称”,”属性值”);`$("a").attr("href","http://www.163.com");`  
②、获取元素属性的值  
`var attrValue=jqObj.attr("属性名称");`  
`var hrefValue=$("a").attr("href");`  
③、可以利用json数据对html元素的多个属性进行设置。  
`jqObj.attr(json);`  
`$("a").attr({"title":"提示信息","href":"http://www.163.com"});`

3、JQuery对单一属性的操作  
var checkValue=jqObj.prop(“checked”); //特别注意：默认情况下，在jq中checked属性的返回值true|false；  
`jqObj.prop("checked",true);`  
`jqObj.prop("checked",function(index,val));`  
//完成复选框反选功能的实现

$(""input[type='checked']"").prop(""checked"",function(index,val){ 
        return !val;
    });

//完成复选框全选功能的实现

$(""input[type='checked']"").prop(""checked"",function(index,val){ 
        return true;
    });"

4、通过Jquery获取下拉列表框中被选中那项的值

<!DOCTYPE html> 
    <html lang="en">    
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>    
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>   
        <script type="text/javascript"> $(function () { $("#d1").prop("checked",true); /* jq绑定html元素事件 ①、on方法注册html元素的事件 ②、在jq对象的事件方法注册 */ $("button").on("click",function () { // 获取被选中的下拉选项的值 // console.log($("select option:selected").text()); // console.log($("select option:selected").val()); console.log($("select option:selected").html()); }); }); </script>   
    </head> 
    <body>  
        <button>哪项被选中了呢？</button>   
        <input type="checkbox" id="d1">体育   
        <select>    
            <option value="1">1111</option> 
            <option value="2">2222</option> 
            <option value="3">3333</option> 
            <option value="4">4444</option> 
        </select>   
    </body> 
    </html>

5、JQuery对html元素的类属性操作  
①、addClass() - 向被选元素添加一个或多个类  
②、removeClass() - 从被选元素删除一个或多个类  
③、toggleClass() - 对被选元素进行添加/删除类的切换操作

6、JQuery设置html元素的css样式 通过css()方法设置css样式  
①、获取html元素的相关样式  
var style=jqObj.css(“样式名称”); 返回值即是对应样式属性的值  
②、设置html元素的相关样式  
jqObj.css(“样式名称”,”样式值”); 设置样式  
③、通过函数给html元素添加样式  
jqObj.css(“样式名称”,function()\{\}); 将函数的返回值设置为css的样式值  
好处，可以在函数中对css样式值进行编辑。以达到对样式的更加精准的设置

7、JQuery对html元素的追加  
通过JQuery很容易地最加新元素即内容。JQuery提供了四种追加元素|内容的方法  
append() - 在被选元素的结尾插入内容  
prepend() - 在被选元素的开头插入内容  
after() - 在被选元素之后插入内容  
before() - 在被选元素之前插入内容

<!DOCTYPE html> 
    <html lang="en">    
    <head>  
        <meta charset="UTF-8">  
        <title>Title</title>    
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>   
        <script type="text/javascript"> $(function () { $("#d1").prop("checked",true); /* jq绑定html元素事件 ①、on方法注册html元素的事件 ②、在jq对象的事件方法注册 */ $("button").on("click",function () { // 获取被选中的下拉选项的值 // console.log($("select option:selected").text()); // console.log($("select option:selected").val()); console.log($("select option:selected").html()); }); $("a").click(function () { $("div").append("<p>我是新来的p元素</p>"); // 注意：可以通过html方法向被选元素内部插入一个子元素 $("span").html("<b>我是加粗的文字</b>") }); }); </script>   
    </head> 
    <body>  
        <button>哪项被选中了呢？</button>   
        <input type="checkbox" id="d1">体育   
        <select>    
            <option value="1">1111</option> 
            <option value="2">2222</option> 
            <option value="3">3333</option> 
            <option value="4">4444</option> 
        </select>   
        <hr>    
        <a href="#">单击我</a> 
        <div>我是div元素的值</div>    
        <span>我是span元素的值</span> 
    </body> 
    </html>

二、本节内容  
1、JQuery对html元素的尺寸的获取  
width() ： 获取匹配元素的宽度  
height() ： 获取匹配元素的高度  
innerWidth() ：获取匹配元素的内边距的宽度  
innerHeight() ：获取匹配元素的内边距的高度  
outerWidth() ：获取匹配元素的外边距的宽度  
outerHeight() ：获取匹配元素的外边距的高度  
![这里写图片描述][Image 1]

2、通过each方法对集合的遍历

![这里写图片描述][Image 1]

3、JQuery 对json数据的遍历 each();  
自己实验：编写一个form表单，通过each方法设置表单中的所有input元素的背景色变成红色；  
![这里写图片描述][Image 1]

4、通过jquery对html元素的遍历方法  
![这里写图片描述][Image 1]

①、向上遍历（遍历辈分比较高的元素） 即向父元素，爷爷元素…  
jqObj.parent()：返回匹配元素的直接父元素  
jqObj.parents():返回匹配元素的所有父元素（父元素、爷爷元素、太爷元素…)  
jqObj.parentsUntil(“selector”):选中匹配元素与selector这个父元素之间的所有父元素

②、向下遍历（遍历辈分比较低的元素）即获取相关子元素、孙子元素…  
jqObj.children()：返回匹配元素的儿子元素  
jqObj.find(“selector”):选中所有的匹配元素中的所有selector对应的子元素（辈分不限）

③、水平遍历（遍历同辈分的元素）  
jqObj.next() ：返回匹配元素的同辈分的下一个元素  
jqObj.next(“selector”) ：返回匹配元素的同辈分的下一个元素中，是seelctor的那些元素  
jqObj.siblings():返回匹配元素所有同辈份元素  
jqObj.siblings(“selector”):返回与匹配元素同辈分的，selector的同辈分元素

④、遍历过滤 缩小搜索元素的范围  
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素  
jqObj.first():返回匹配元素中的第一个元素  
jqObj.last()：返回陪陪元素中的最后一个元素

![这里写图片描述][Image 1]

5、jquery获取被选择的复选框  
![这里写图片描述][Image 1]

[Image 1]: