【前端系列教程之jQuery】05_jQuery属性操作

淩亂°似流年 2024-04-28 13:12 105阅读 0赞

## 一、属性操作 ##

### 属性 ###

#### attr(name|properties|key,value|fn) ####

获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

在jQuery 1.6中,当属性没有被设置时候，.attr()方法将返回undefined。若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。

**name** String 属性名称

**properties** Map 作为属性的“名/值对”对象

**key,value**String,Object 属性名称，属性值

**key,function(index, attr)**String,Function

属性名称。

返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

#### removeAttr(name) ####

从每一个匹配的元素中删除一个属性

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);1.7版本在IE6下已支持删除disabled。

**name** String 要删除的属性名

#### prop(name|properties|key,value|fn) ####

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数和attr类似，略；

#### removeProp(name) ####

用来删除由.prop()方法设置的属性集

**propertyName** String 要删除的属性名

### CSS 类 ###

#### addClass(class|fn) ####

为每个匹配的元素添加指定的类名。

**class** String 一个或多个要添加到元素中的CSS类名，请用空格分开

**function(index, class)** Function 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

#### removeClass(\[class|fn\]) ####

从所有匹配的元素中删除全部或者指定的类。

**class** String 一个或多个要删除的CSS类名，请用空格分开

**function(index, class)**Function 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

#### toggleClass(class|fn\[,sw\]) ####

如果存在（不存在）就删除（添加）一个类。

**class** String CSS类名

**class,switch** String,Boolean

1:要切换的CSS类名.

2:用于决定元素是否包含class的布尔值。

**switch** Boolean 用于决定元素是否包含class的布尔值。

**function(index, class,switch)\[, switch\]** Function,Boolean

1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

2: 一个用来判断样式类添加还是移除的 boolean 值。

### HTML代码/文本/值 ###

#### html(\[val|fn\]) ####

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

**val** String 用于设定HTML内容的值

**function(index, html)** Function 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

#### text(\[val|fn\]) ####

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

**val** String 用于设置元素内容的文本

**function(index, text)** Function 此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

#### val(\[val|fn|arr\]) ####

获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

**val** String 要设置的值。

**function(index, value)** Function 此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

**array** Array<String> 用于 check/select 的值

### 配套代码 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
    </head>
    
    <body>
        <div id="divId" class="divClass1 divClass2" name="divName" xx="divXXXXX">
            <p>我是div的内容</p>
        </div>
    
        <input type="text" name="userName" id="userName">
    
        <button id="btn1">点击试试</button>
        <button id="btn2">获取输入框的值</button>
        <script>
            /* 
                JS的属性操作:
                    元素节点.属性名     获取或设置元素的固有属性
                    元素节点.getAttribute("属性名")     获取元素指定属性的值
                    元素节点.setAttribute("属性名","属性值")    给元素的指定属性设置值
                    元素节点.removeAttribute("属性名")      移除指定属性
                JS内容操作:
                    innerHTML       获取或设置元素的内容
                    innerText       获取或设置元素的文本内容
            */
    
            /* 
                当个我们通过jQuery对象获取值的时候,只会拿到第一个;但是设置值,所有都可以设置
                属性
                    attr(name|pro|key,val|fn)   获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
                    removeAttr(name) 
            */
            // 获取属性值
            console.log($("#divId").attr("id"), $("#divId").attr("class"), $("#divId").attr("name"), $("#divId").attr(
            "xx"));
    
            // 给指定属性设置值
            /* $("#divId").attr("class","newClass");
            $("#divId").attr("name","newName");
            $("#divId").attr("xx","newXXX"); */
    
            // 一次性设置多个值
            /* $("#divId").attr({
                "class":"classTest",
                "name":"nameTest",
                "xx":"xxTest"
            }) */
            // $("#divId").removeAttr("xx");
            // $("#divId").removeAttr("class");
    
            /* 
                我们如果想要覆盖class属性的值,那么就用attr(),如果我们想要新增一个,不是覆盖,那么就用addClass
                addClass(class|fn)      为每个匹配的元素添加指定的类名。
                removeClass([class|fn])     从所有匹配的元素中删除全部或者指定的类。
                toggleClass(class|fn[,sw])  从所有匹配的元素中删除全部或者指定的类。
            */
            // $("#divId").addClass("newClass123");
            // $("#divId").removeClass("divClass1");
    
            /* $("#btn1").click(function(){
                $("#divId").toggleClass("helloClass");
            }) */
    
    
            /* 
                html([val|fn])  取得第一个匹配元素的html内容 或设置所有的匹配元素的内容。 innerHTML
                text([val|fn])  取得第一个匹配元素的文本内容 或设置所有的匹配元素的文本内容 innerText
                val([val|fn|arr])   获取表单控件的value值
            */
            /* console.log($("#divId").html())
            $("#divId").html("<b>HelloWorld</b>") */
    
            /* console.log($("#divId").text())
            $("#divId").text("<b>HelloWorld</b>") */
    
    
            $("#btn2").click(function () {
                // 在jquery中,获取value属性的值,最好都通过val()
                // console.log($("#userName").attr("value"))  // undefined
                // console.log($("#userName").val())    //获取到输入框的内容
                $("#userName").val("设置进来的value值")
            })
        </script>
    </body>
    
    </html>