jQuery学习笔记（三）--- 属性操作和元素操作

一、属性操作

jQuery 中对属性进行操作的方法有：prop()、attr()、data()、html()、text()、val()。他们分别用来修改不同类别的元素属性。

1、prop() 操作元素的固有属性

元素的固有属性是指元素本身自带的属性，比如 img 标签里面的 src、a 标签的 href 属性等。我们实际应用中最常用到的是通过该方法来操作表单属性：disable、checked等。

语法：

<a href="123"></a>

// 1、获取属性
// 元素.prop("属性名")
a.prop("href")

// 2、设置属性值
// 元素.prop("属性名","属性值")
a.prop("href","www.baidu.com")

2、attr() 操作元素的自定义属性

元素的自定义属性是指用户自己给元素添加的属性，比如给 div 添加 index = “1” 属性。该属性除了可以操作自定义属性，同时也可以操作元素的固有属性以及HTML5 的自定义属性。

语法：

<div index="1">我是div</div>

// 1、获取属性 类似于 原生 js 的 getAttribute
// 元素.attr("属性名")
div.attr("index")

// 2、设置属性值 类似于 原生 js 的 setAttribute
// 元素.attr("属性名","属性值")
div.attr("index","0")

3、data() 元素数据缓存

data() 方法可以在指定的元素上存取数据，并不会影响元素的DOM结构，一旦页面刷新，存放的数据将被移除。除此之外还可以获取HTML5 data- 开头的自定义属性，获取这些自定义属性时，不需要加 data- ，只需要属性名即可，得到的结果是数字型的。

语法：

<div index="1" data-index="2">我是div</div>

// 1、存储数据
// 元素.data("name","value")
div.data("uname","tom")

// 2、获取数据
// 元素.data("name")
div.data("uname")

4、综合案例1

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

5、html()

该方法与原生 js 中的 innerHTML 功能类似，用来获取或设置元素的内容。获取元素内容时，如果有子标签，会将子标签及其内容一并获取。当设置元素的内容时，如果包含标签，那标签会被浏览器解析，展示效果。不适用于表单元素。

语法：

<div>这是一个div</div>

// 1、获取元素内容
// 元素.html()
div.html()

// 2、设置元素内容
// 元素.html("内容")
div.html("这真的是一个div")

6、text()

该方法与原生 js 的 innerText 功能类似，用来获取或设置元素的文本内容。获取元素内容时，如果有子标签，会将子标签的内容一并获取，但不会获取子标签本身。当设置元素的内容时，如果包含标签，那标签不会被浏览器解析，会被直接展示出来。不适用于表单元素。

语法：

<div>这是一个div</div>

// 1、获取元素内容
// 元素.text()
div.text()

// 2、设置元素内容
// 元素.text("内容")
div.text("这真的是一个div")

7、val()

该方法是专门获取和设置表单元素的值，相当于原生 js 表单的 value 属性。

语法：

<input type="text" value="input"/>

// 1、获取表单内容
// 元素.val()
input.val()

// 2、设置元素内容
// 元素.val("内容")
input.val("11111111")

8、综合案例2

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("<b>123</b>");
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
       // $("div").text("<b>123</b>");
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

二、元素操作

jQuery 中操作元素的方法有很多，所以在此我们只列举经常使用到的部分方法。

1、遍历元素

jQuery 虽然有隐式迭代的操作，但是隐式迭代是对同一类元素做相同的操作，如果想要给同一类元素做不同的操作，就需要用到遍历。有两种使用方法：

语法1：

在这里插入图片描述

语法2：

在这里插入图片描述

案例代码：

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i); // 遍历数组时 输出的是索引
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 遍历对象时 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

2、创建元素

动态创建一个页面元素，但此时创建的元素没有显示，因为只有该元素被插入到页面中之后才会显示。

语法：

// $("元素标签")
$("<li></li>")

3、添加元素

添加元素是指将创建的元素插入到页面中，常用的方法有两种：

语法1：内部添加

// 1、将元素放到被插入元素的内部的最后面 ，类似于原生 js 的 appendChild
// 元素.append("元素")
ul.append("<li></li>")

// 2、将元素放到被插入元素的内部的最前面
// 元素.prepend("元素")
ul.prepend("<li></li>")

语法2：外部添加

// 1、将元素放到目标元素的后面
// 元素.after("元素")
div.after("<div></div>")

// 2、将元素放到目标元素的前面
// 元素.before("元素")
div.before("<div></div>")

***注意：**使用内部添加元素之后，目标元素与插入元素是父子关系。而使用外部添加元素之后，目标元素与插入元素是兄弟关系。

4、删除元素

删除元素常用的方法有三种，都具有删除元素的功能，但是又分别具有不同的功能：

语法：

// 1、删除元素本身
// 元素.remove()
div.remove()

// 2、删除元素的内容和所有子节点及内容，但保留元素本身
// 元素.empty()
div.empty()

// 3、删除元素的内容和所有子节点及内容，但保留元素本身
// 元素.html("")
div.html("")

*注意：empty() 与 html("") 作用相同，只不过html 还可以设置元素的内容。

5、综合案例

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
      
            // 2. 添加元素
            // 	2.1 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            //  2.2 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子，但保留元素本身
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子，但保留元素本身
        })
    </script>
</body>