Jquery对属性、样式类class、CSS样式的操作

小鱼儿 2021-06-30 09:56 811阅读 0赞

## 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