jQuery基础之操作属性或文本及其样式位置尺寸的方法（重点，常用）

港控/mmm° 2024-04-17 19:50 47阅读 0赞

### 相关知识点导航 ###

1 ，$.holdReady(true); 作用: 暂停ready执行；  
2，jQuery内容选择器  
        $(“div:empty”);  
        $(“div:parent”);  
        $(“div:contains(‘我是div’)”);  
        $(“div:has(‘span’)”);  
3，属性和属性节点  
       3.1通过js进行操作  
       3.2通过jQuery进行操作  
                     attr(name|pro|key,val|fn)  
                     removeAttr(name)  
                     prop(),removeProp()以及和attr的区别

4，切换类的方法即调用class（js className）  
       添加一个类.addClass(class|fn)  
       删除一个类.removeClass(\[class|fn\])  
       切换类.toggleClass(class|fn\[,sw\])

5，文本取值  
        1.html(\[val|fn\])  
                和原生JS中的innerHTML一模一样  
        2.text(\[val|fn\])  
                和原生JS中的innerText一模一样  
        3.val(\[val|fn|arr\])

6,操作css样式的方法  
        $(“div”).css(“width”, “100px”);  
        在js中可通过cssTest进行设置，element.style.cssText = ‘height: 100px；’

7，jQuery位置和尺寸的操作方法  
        offset(\[coordinates\])；获取元素距离窗口的偏移位  
        position()；获取元素距离定位元素的偏移位，只能获取不能设置

8，jQuery中scrollTop方法及其兼容方法

### 1 , $.holdReady(true); ###

作用: 暂停ready执行；可用于想当一个元素执行过后再渲染页面；实例如下：

### 2，jQuery内容选择器 ###

$(“div:empty”);  
$(“div:parent”);  
$(“div:contains(‘我是div’)”);  
$(“div:has(‘span’)”);

实例代码如下：

<div></div>
    	<div>我是div</div>
    	<div>他们我是div123</div>
    	<div><span></span></div>
    	<div><p></p></div>

$(function () { 
                // 编写jQuery相关代码
                // :empty 作用:找到既没有文本内容也没有子元素的指定元素
                // var $div = $("div:empty");
                // console.log($div);
    
                // :parent 作用: 找到有文本内容或有子元素的指定元素
                // var $div = $("div:parent");
                // console.log($div);
    
                // :contains(text) 作用: 找到包含指定文本内容的指定元素
                // var $div = $("div:contains('我是div')");
                // console.log($div);
    
                // :has(selector) 作用: 找到包含指定子元素的指定元素
                var $div = $("div:has('span')");
                console.log($div);
            });

### 3，属性和属性节点 ###

1.什么是属性?  
          对象身上保存的变量就是属性  
2.如何操作属性?  
          对象.属性名称 = 值;  
          对象.属性名称;  
          对象\[“属性名称”\] = 值;  
          对象\[“属性名称”\];

3.什么是属性节点?  
          <span name = “it666”></span>  
          在编写HTML代码时,在HTML标签中添加的属性就是属性节点  
          在浏览器中找到span这个DOM元素之后, 展开看到的都是属性  
          在attributes属性中保存的所有内容都是属性节点

4.如何操作属性节点?  
          DOM元素.setAttribute(“属性名称”, “值”);  
          DOM元素.getAttribute(“属性名称”);

5.属性和属性节点有什么区别?  
          任何对象都有属性, 但是只有DOM对象才有属性节点

##### 3.1通过js进行操作属性 #####

$(function () { 
    			//通过js进行操作
                function Person() { 
                }
                var p = new Person();
                // p.name = "lnj";
                p["name"] = "zs";
                // console.log(p.name);
                console.log(p["name"]);
    
                var span = document.getElementsByTagName("span")[0];
                span.setAttribute("name", "lnj");
                console.log(span.getAttribute("name"));
            });

##### 3.2通过jQuery进行操作属性 #####

###### 通过attr(),removeAttr() ######

$(function () { 
               /* 1.attr(name|pro|key,val|fn) 作用: 获取或者设置属性节点的值 可以传递一个参数, 也可以传递两个参数 如果传递一个参数, 代表获取属性节点的值 如果传递两个参数, 代表设置属性节点的值 注意点: 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值 如果是设置:找到多少个元素就会设置多少个元素 如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增 2.removeAttr(name) 删除属性节点 注意点: 会删除所有找到元素指定的属性节点，删除多个用空格隔开 */
                // console.log($("span").attr("class"));
                $("span").attr("class", "box");
                // $("span").attr("abc", "123");
    
                // $("span").removeAttr("class name");
            });

###### 通过prop(),removeProp() ######

$(function () { 
                /* 1.prop方法 特点和attr方法一致 2.removeProp方法 特点和removeAttr方法一致 */           
                $("span").eq(0).prop("demo", "it666");
                $("span").eq(1).prop("demo", "lnj");
                console.log($("span").prop("demo"));
    
                $("span").removeProp("demo");
                /* 注意点: prop方法不仅能够操作属性, 他还能操作属性节点 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()， 其他的使用 attr() */
                // console.log($("span").prop("class"));
                // $("span").prop("class", "box");
    
                console.log($("input").prop("checked")); // true / false
                console.log($("input").attr("checked")); // checked / undefined
    
            });

##### 4，jQuery切换类的方法（js className） #####

添加一个类.addClass(class|fn)

删除一个类.removeClass(\[class|fn\])

切换类.toggleClass(class|fn\[,sw\])

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>19-jQuery操作类相关的方法</title>
        <style>
            *{ 
                margin: 0;
                padding: 0;
            }
            .class1{ 
                width: 100px;
                height: 100px;
                background: red;
            }
            .class2{ 
                border: 10px solid #000;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () { 
                /* 1.addClass(class|fn) 作用: 添加一个类 如果要添加多个, 多个类名之间用空格隔开即可 2.removeClass([class|fn]) 作用: 删除一个类 如果想删除多个, 多个类名之间用空格隔开即可 3.toggleClass(class|fn[,sw]) 作用: 切换类 有就删除, 没有就添加 */
                var btns = document.getElementsByTagName("button");
                btns[0].onclick = function () { 
                    // $("div").addClass("class1");
                    $("div").addClass("class1 class2");
                }
                btns[1].onclick = function () { 
                    // $("div").removeClass("class2");
                    $("div").removeClass("class2 class1");
                }
                btns[2].onclick = function () { 
                    $("div").toggleClass("class2 class1");
                }
            });
        </script>
    </head>
    <body>
    	<button>添加类</button>
    	<button>删除类</button>
    	<button>切换类</button>
    <div></div>
    </body>
    </html>

##### 5，jQuery文本取值 #####

1.html(\[val|fn\])  
        和原生JS中的innerHTML一模一样  
2.text(\[val|fn\])  
        和原生JS中的innerText一模一样  
3.val(\[val|fn|arr\])

<button>设置html</button>
    	<button>获取html</button>
    	<button>设置text</button>
    	<button>获取text</button>
    	<button>设置value</button>
    	<button>获取value</button>
    	<div></div>
    	<input type="text">

$(function () { 
                var btns = document.getElementsByTagName("button");
                btns[0].onclick = function () { 
                    $("div").html("<p>我是段落<span>我是span</span></p>");
                }
                btns[1].onclick = function () { 
                    console.log($("div").html());
                }
                btns[2].onclick = function () { 
                    $("div").text("<p>我是段落<span>我是span</span></p>");
                }
                btns[3].onclick = function () { 
                    console.log($("div").text());
                }
                btns[4].onclick = function () { 
                    $("input").val("请输入内容");
                }
                btns[5].onclick = function () { 
                    console.log($("input").val());;
                }
            });

##### 6,jQuery操作css样式的方法 #####

$(“div”).css(“width”, “100px”);  
在js中可通过cssTest进行设置，element.style.cssText = ‘height: 100px；’

$(function () { 
                // 编写jQuery相关代码
                // 1.逐个设置
                $("div").css("width", "100px");
                $("div").css("height", "100px");
                $("div").css("background", "red");
    
                // 2.链式设置
                // 注意点: 链式操作如果大于3步, 建议分开
                $("div").css("width", "100px").css("height", "100px").css("background", "blue");
    
                // 3.批量设置
                $("div").css({ 
                    width: "100px",
                    height: "100px",
                    background: "red"
                });
    
                // 4.获取CSS样式值
                console.log($("div").css("background"));;
            });

在这里插入代码片

##### 7，jQuery位置和尺寸的操作方法 #####

offset(\[coordinates\])  
作用: 获取元素距离窗口的偏移位  
position()  
作用: 获取元素距离定位元素的偏移位  
position方法只能获取不能设置

$(function () { 
                // 编写jQuery相关代码
                var btns = document.getElementsByTagName("button");
                // 监听获取
                btns[0].onclick = function () { 
                    // 获取元素的宽度
                    // console.log($(".father").width());
                    // offset([coordinates])
                    // 作用: 获取元素距离窗口的偏移位
                    // console.log($(".son").offset().left);
                    // position()
                    // 作用: 获取元素距离定位元素的偏移位
                    console.log($(".son").position().left);
                }
                // 监听设置
                btns[1].onclick = function () { 
                    // 设置元素的宽度
                    // $(".father").width("500px")
    
                    // $(".son").offset({ 
                    // left: 10
                    // });
    
                    // 注意点: position方法只能获取不能设置
                    // $(".son").position({ 
                    // left: 10
                    // });
    
                    $(".son").css({ 
                        left: "10px"
                    });
                }
            });
        </script>

##### 8，jQuery中scrollTop方法 #####

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>23-jQuery的scrollTop方法</title>
    		<style>
    			* { 
    				margin: 0;
    				padding: 0;
    			}
    
    			.scroll { 
    				width: 100px;
    				height: 200px;
    				border: 1px solid #000;
    				overflow: auto;
    			}
    		</style>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script>
    			$(function() { 
    				// 编写jQuery相关代码
    				var btns = document.getElementsByTagName("button");
    				// 监听获取
    				btns[0].onclick = function() { 
    					// 获取滚动的偏移位
    					console.log($(".scroll").scrollTop());
    					// 获取网页滚动的偏移位
    					// 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
    					console.log($("body").scrollTop() + $("html").scrollTop());
    				}
    				btns[1].onclick = function() { 
    					// 设置滚动的偏移位
    					$(".scroll").scrollTop(300);
    					// 设置网页滚动偏移位
    					// 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
    					$("html,body").scrollTop(300);
    				}
    			});
    		</script>
    	</head>
    	<body>
    		<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    		我是div我是div我是div我是div</div>
    		<button>获取</button>
    		<button>设置</button>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    	</body>
    </html>