## Jquery对属性的操作 ##
### 1.读取属性值 ###
方法:
(1)`$(selector).attr("name");`
(2)`$(selector).prop("name"); //不能读取自定义属性,在读取复选框check=checked"时,返回值是true`
实例:
$(selector).attr("name");
![在这里插入图片描述][20190626130554451.png]
![在这里插入图片描述][20190626130602390.png]
### 2.设置属性值 ###
语法:
**设置单一属性和值**
(1)`$(selector).attr("name","value");`
(2)`$(selector).prop("name","value");`
**使用函数设置属性和值**
(1)`$(selector).attr("name",function(index,currentvalue));`
(2)`$(selector).prop("name",function(index,currentvalue));`
**设置多个属性和值**
(1)`$(selector).attr({"name1":"value1","name2":"value2"});`
(2)`$(selector).prop({"name1":"value1","name2":"value2"});`
**//注意:`attribute`的"`class`",对应`property`的“`className`”,**
若设置的属性不是`DOM`对象固有的,则不会出现在属性节点中,不能用`.attr()`读取。
* `index` \- 接受集合中元素的 `index` 位置。
* `currentvalue` \- 接受被选元素的当前属性值。
### 3.删除属性值 ###
方法:`removeAttr()` 方法从被选元素移除一个或多个属性。
![在这里插入图片描述][20190626220243588.png]
### 4.attr()和prop的区别 ###
我们常把他们弄混淆是因为,有些例如`id,class,title`常用的`Attribute`已经被作为`Property`附加在`DOM`对象上,也可以取值和赋值。但是自定义的`Attribute`就不能了。
![在这里插入图片描述][20190626220450214.png]
## Jquery对样式类class的操作 ##
### 1.添加一个或多个class类 ###
![在这里插入图片描述][20190626222303847.png]
### 2.读取class类 ###
![在这里插入图片描述][20190626223008979.png]
在这里`element.classList;`不能用,要想使用要使用`document.querySelector("#box");`
**注意:采用不同方式获取节点的异同之处**
![在这里插入图片描述][20190626224102451.png]![在这里插入图片描述][20190626224504610.png]
var element=document.getElementById("box");
var element=document.querySelector("#box");
//返回值相同,且类型一样
### 3.删除class类 ###
方法:`removeClass("name");`
### 4.切换class类 ###
方法:`toggleClass("name");`
有则删除,无则添加,多类名之间用空格分隔;
## Jquery对CSS样式的操作 ##
### 1.读取指定元素的CSS样式属性 ###
方法:`$(selector).css("name");`
实例:
![在这里插入图片描述][20190626224942284.png] `width`和`height`属性比较特殊,可以用方法式取得
console.log(element.css("width"));返回100px
console.log(element.width()); //返回100
### 2.设置CSS样式属性 ###
(1)添加一个或多个`CSS`属性值,以放在放在`style`中的内联形式,覆盖点外部的CSS样式。
(2)特殊的`width`和`height`属性,可以用方法的形式添加,不带单位
方法:
$(selector).css("name","value");
$(selector).css({ "name1":"value1","name2":"value2"});
![在这里插入图片描述][20190626225414355.png]
var element=$("#box");
element.css("font-size","20px");
element.css({
"font-weight":"400",
"border-radius":"10px"
});
element.width(200);
element.height(200);
[20190626130554451.png]: /images/20210626/138bbec27715485da2b6877ecb29c498.png
[20190626130602390.png]: /images/20210626/014d92269c3a4f70ab1adc8b450eab68.png
[20190626220243588.png]: /images/20210626/183106e1e7b14a4cbdf53e568750e589.png
[20190626220450214.png]: /images/20210626/3fab1e0f72384ac6acd74eac4cf41164.png
[20190626222303847.png]: /images/20210626/d24088cd723c41cc9e4f174257941ed6.png
[20190626223008979.png]: /images/20210626/b76fd4e6e5e249e88509d5d891f5d393.png
[20190626224102451.png]: https://img-blog.csdnimg.cn/20190626224102451.png
[20190626224504610.png]: /images/20210626/b775b4d1675b4f9e935f1ca53a17ff79.png
[20190626224942284.png]: /images/20210626/337b3399c60e406b9dbfe2095b0040c1.png
[20190626225414355.png]: /images/20210626/ae9083e645cc4a20b449d77758c161a7.png