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

1 , $.holdReady(true);

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

 <script>     $.holdReady(true);$(document).ready(function () {alert("ready");});var btn = document.getElementsByTagName("button")[0];btn.onclick = function () {$.holdReady(false);}
</script>

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 / falseconsole.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方法只能获取不能设置

 <div class="father"><div class="son"></div></div><button>获取</button><button>设置</button>

 <style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;border: 50px solid #000;margin-left: 50px;position: relative;}.son{width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px;}</style>

  $(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>