jQuery属性操作

内容选择器

empty: 找到既没有文本内容也没有子元素的指定元素
parent: 找到有文本内容或有子元素的指定元素
contains: 找到包含指定文本内容的指定元素

has: 找到包含指定子元素的指定元素

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>内容选择器</title><script src=\"../jquery-3.5.1.js\"></script><style>div{width: 150px;height: 150px;border: 2px solid black;margin-top: 10px;}</style><script>$(function(){// emptyvar $divEmpty = $(\"div:empty\");console.log(\'$divEmpty>>>\', $divEmpty);// parentvar $divParent = $(\'div:parent\');console.log(\'$divParent>>>\', $divParent);// containsvar $divContains = $(\'div:contains(\"第二个div\")\');console.log(\'$divContains>>>\', $divContains);// hasvar $divHas = $(\'div:has(\"p\")\');console.log(\'$divHas>>>\', $divHas);})</script></head><body><div></div><div>第一个div</div><div>第二个div</div><div><span>spanspanspan</span></div><div><p></p></div></body></html>

属性和属性节点

属性：对象里的变量就是属性
```
function Dog(){}var dog = new Dog()dog.name = \'哈士奇\';   // 这里的name就是属性console.log(\'name:\', dog.name);
```
操作属性的方法:
1. 调用属性: 对象.属性名;

dog.name = \'哈士奇\';console.log(\'name:\', dog.name);

通过[]
- 调用属性: 对象[‘属性名’];

dog[\'age\'] = 5;console.log(\'age:\', dog[\'age\']);

属性节点: 在HTML标签中添加的属性就是属性节点

如<span name=\"hello\"></span>里的name

所有的属性节点都保存在DOM的attributes属性中

操作属性节点：

设置属性节点:

DOM元素.setAttribute(\'属性名\', \'值\');

获取属性节点:
```
DOM元素.getAttribute(\'属性名\');
```

var span = document.getElementsByTagName(\'span\')[0];span.setAttribute(\'name\', \'nonono\');console.log(\'span>>>\',span.getAttribute(\'name\'));

属性和属性节点的区别：任何对象都有属性，只有DOM对象才有属性节点

一. jQuery的attr方法和removeAttr方法

```
attr()
```
: 获取或设置属性节点的值

如果传一个参数代表获取属性节点的值，如果传两个参数代表设置属性节点的值
获取时: 无论找到多少元素，都只会返回第一个元素的属性节点的值
设置时: 找到多少元素就设置多少元素，如果要设置的属性节点不存在，系统会自动新增

<body><span class=\"span1\" name = \'rpg\'></span><span class=\"span2\" name = \'stg\'></span></body><script>// 获取console.log(\'attr>>>\', $(\'span\').attr(\'class\'));// 设置$(\'span\').attr(\'class\', \'sun\');$(\'span\').attr(\'age\', 66);</script>

removeAttr()

: 删除指定的属性节点

会删除所有找到的属性节点

如果想删除多个属性节点可用空格隔开

<body><span class=\"span1\" name = \'rpg\' age=\"6\"></span><span class=\"span2\" name = \'stg\' age=\"6\"></span></body><script>// 删除$(\'span\').removeAttr(\'age\');// 删除多个$(\'span\').removeAttr(\'class name\');</script>

二. jQuery的prop方法

prop方法: 操作属性,特点和attr一样prop方法不仅能操纵属性，还能操作属性节点

removeProp: 删除属性特点和reomveAttr一样

<html lang=\"en\"><head><meta charset=\"UTF-8\"><title>jQuery的prop方法</title><script src=\"../jquery-3.5.1.js\"></script><script>$(function(){// prop方法: 操作属性特点和attr一样$(\'span\').eq(0).prop(\'demo\',\'233\')$(\'span\').eq(1).prop(\'ash\', \'666\')$(\'span\').eq(2).prop(\'demo\', \'666\')console.log($(\'span\').prop(\'demo\'))// removeProp: 删除属性特点和reomveAttr一样$(\'span\').removeProp(\'demo\')// 操作属性节点console.log($(\'span\').prop(\'class\'))})</script></head><body><span class=\"span1\" name=\'rpg\'></span><span class=\"span2\" name=\'stg\'></span><span class=\"span3\" name=\'stg\'></span></body></html>

关于prop()和attr()分别什么时候用：

官方推荐在操作属性节点时，具有true 和false 两个属性的属性节点如schecked, selected 或者disabled 使用prop()
其他的使用attr ()

三. jQuery操作类相关的方法

```
addClass()
```
: 添加一个类, 添加多个时中间用空格隔开
```
removeClass()
```
: 删除一个类,删除多个用空格隔开

toggleClass()

: 切换类. 有就删除，没有就添加

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>jQuery操作类相关的方法</title><script src=\"../jquery-3.5.1.js\"></script><style>.class1{width: 100px;height: 100px;background: aqua;}.class2{width: 50px;height: 50px;border: 10px solid greenyellow;}</style><script>$(function(){var btns = document.getElementsByTagName(\'button\')// addClass() : 添加一个类    添加多个时中间用空格隔开btns[0].onclick = function(){$(\'div\').addClass(\'class1 class2\');}// removeClass() : 删除一个类     删除多个用空格隔开btns[1].onclick = function () {$(\'div\').removeClass(\'class2\');}// toggleClass() : 切换类    有就删除，没有就添加btns[2].onclick = function () {$(\'div\').toggleClass(\'class1 class2\');}})</script></head><body><button>添加</button><button>删除</button><button>切换</button><div></div></body></html>

四. jQuery文本值相关的方法

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>jQuery文本值相关的方法</title><script src=\"../jquery-3.5.1.js\"></script><style>*{margin: 0;padding: 0;}div{margin-top: 10px;width: 100px;height: 100px;border: 2px solid black;}</style><script>$(function(){var btns = document.getElementsByTagName(\'button\');// html: 和原生js里的innerHTML一样btns[0].onclick = function(){$(\"div\").html(\'<p>这是段落<span>内有span</span></p>\');  // 设置html}btns[1].onclick = function () {console.log($(\"div\").html());   // 获取html}// text: 和原生js里的innerText一样btns[2].onclick = function () {$(\"div\").text(\'<p>这里有一段字符串</p>\');   // 设置文本}btns[3].onclick = function () {console.log($(\"div\").text());   // 获取文本}// val: 可以返回任意元素的值,包括select。如果多选，将返回一个数组，其包含所选的值。btns[4].onclick = function () {$(\"input\").val(\'请输入文字....\');   // 设置值}btns[5].onclick = function () {console.log($(\"input\").val());  // 获取值}})</script></head><body><button>设置html</button><button>获取html</button><button>设置text</button><button>获取text</button><button>设置value</button><button>获取value</button><div></div><input type=\"text\"></body></html>

五. jQuery操作css样式的方法

css方法设置有三种方式：

逐个设置

$(\'div\').css(\'width\', \'100px\');$(\'div\').css(\'height\', \'100px\');$(\'div\').css(\'background\', \'aqua\');

链式设置

$(\'div\').css(\'background\', \'aqua\').css(\'width\', \'50px\').css(\'height\', \'50px\');

如果设置大于3个，建议分开否则可读性会变差

批量设置

$(\'div\').css({width : \'200px\',height : \'200px\',background : \'black\'})

更简单，看上去更直观。推荐使用这种

获取css样式值

console.log($(\'div\').css(\'width\'));

六. jQuery位置和尺寸的操作方法

offset(): 获取或设置元素距离窗口的偏移位

获取:
```
console.log($(\'.box1\').offset().left);
```
设置：
```
$(\'.box2\').offset({left : 50})
```

position(): 获取元素距离定位元素的偏移位，只能获取不能设置

console.log($(\'.box2\').position().left);

完整代码：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>jQuery位置和尺寸的操作方法</title><script src=\"../jquery-3.5.1.js\"></script><style>*{margin: 0;padding: 0;}.box1{width: 150px;height: 150px;background: aquamarine;border: 50px solid rgb(92, 134, 28);margin-left: 100px;position: relative;}.box2{width: 50px;height: 50px;background: gray;position: absolute;left: 50px;top: 50px;}button{margin-top: 10px;}</style><script>$(function(){var btns = document.getElementsByTagName(\'button\');btns[0].onclick = function(){// 获取元素宽度console.log(\'width: \', $(\'.box1\').width())// offset(): 获取或设置元素距离窗口的偏移位$(\'input\').val($(\'.box1\').offset().left); // 获取元素距离窗口的偏移位// position(): 获取元素距离定位元素的偏移位，只能获取不能设置console.log(\'box2PositionLeft: \', $(\'.box2\').position().left);}btns[1].onclick = function () {// 设置元素距离窗口的偏移位$(\'.box2\').offset({left : $(\'input\').val()})}})</script></head><body><div class=\"box1\"><div class=\"box2\"></div></div><button>获取</button><button>设置</button><input type=\"text\"></body></html>

七. jQuery的scrollTop方法

获取和设置滚动的偏移位

// 获取滚动的偏移位console.log($(\'.text\').scrollTop())// 设置滚动的偏移位$(\'.text\').scrollTop(300)

获取和设置网页滚动偏移位

// 为了游览器的兼容，要按以下方式写// 获取console.log($(\'html\').scrollTop() + $(\'body\').scrollTop());// 设置$(\'html\').scrollTop(300) + $(\'body\').scrollTop(300);

【jQuery】属性操作