程序员开发实例大全宝库

网站首页 > 编程文章 正文

JQuery操作元素属性详解!什么是属性呢?

zazugpt 2024-09-10 23:36:35 编程文章 21 ℃ 0 评论


一. 属性和属性节点的区别

1.什么是属性?

对象身上保存的变量就是属性


2.如何操作属性?

设置属性的值:

方式一: 对象.属性名称 = 值;

方式二: 对象["属性名称"] = 值;

获取属性的值:

方式一: 对象.属性名称;

方式二: 对象["属性名称"]

代码如下所示:

// 属性
function Student() {
}var s= new Student();
// 设置属性
s.name = "xyr";
s["age"] = 18;
// 获取属性
console.log(s.name);
console.log(s["age"]);


3.什么是属性节点?

<span class= "sp"></span>

在编写HTML代码时,在HTML标签中添加的属性就是属性节点

在浏览器中找到span这个DOM元素之后, 展开看到的都是属性

在attributes属性中保存的所有内容都是属性节点,如下图所示:

4.如何操作属性节点?

DOM元素.setAttribute("属性名称", "值");

DOM元素.getAttribute("属性名称");


5.属性和属性节点有什么区别?

任何对象都有属性, 但是只有DOM对象才有属性节点


二. JQuery操作属性节点

1.attr(name|pro|key,val|fn)

作用: 获取或者设置属性节点的值,不能够操作属性

可以传递一个参数, 也可以传递两个参数

如果传递一个参数, 代表获取属性节点的值

如果传递两个参数, 代表设置属性节点的值,如果传递的是2个以上的属性,可以使用json格式的数据,代表修改或者新增多个属性节点的值


注意点:

获取:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值

增加:如果设置的属性节点不存在,那么系统会自动新增

修改:如果设置的属性节点存在,找到多少个元素就会修改多少个元素


2.removeAttr(name)

删除属性节点

注意点:

会删除所有找到元素指定的属性节点

删除多个属性节点的时候,每个属性名称使用空格隔开

代码示例如下所示:

<!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="../js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
             // 如果传递一个参数, 代表获取属性节点的值 [注意: 这里不能够获取属性的值]
             console.log($("span").attr("name"));
             // console.log($("span").prop("innerHTML"));
             // 如果传递两个参数, 代表设置属性节点的值
             $(".span1").attr("class","box1");
             // 如果传递的是
2个以上的属性,可以使用json格式的数据,代表修改或者新增多个属性节点的值
             $(".span2").attr({ "class": "box2", "name": "zs", "age": 18 });
             // removeAttr(name)
             $("span").removeAttr("name age");
        });
    </script>
</head>
<body>
    <span class="span1" name="xyr">老肖</span> 
   <span class="span2" name="hk">老何</span>
  </body>
</html>

1.prop(n|p|k,v|f)

作用: 获取或者设置属性的值,但是它也能够操作属性节点

特点和attr方法一致

注意: 虽然prop方法能够操作属性节点,但是只能够操作系统属性节点,不能够操作自定义属性节点

2.removeProp(name)

删除属性

注意: 删除系统属性节点只能够将值改为undefined

官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，

如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

总结: 实际开发中如果操作属性使用prop,操作属性节点使用attr,如果属性节点包含true 和 false 两个属性的属性节点使用prop.

代码示例如下所示:

<!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="../js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 获取属性
            console.log($(".span1").prop("innerHTML"));
            // 设置属性
            $(".span1").prop("demo", 111);
            // 获取属性节点  
          console.log($(".span1").prop("class"));
            // 设置属性节点
            // $(".span1").prop("class", "box1");
            // 移除属性
            $(".span1").removeProp("demo");
            console.log($("input").prop("checked")); // true / false
            console.log($("input").attr("checked")); // checked / undefined
        });  
  </script>
</head>
<body>
    <span class="span1" name="xyr">老肖</span> 
   <span class="span2" name="hk">老何</span>
    <input type="checkbox" checked>
   <p></p>
</body>
</html>

3. 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="../js/jquery-1.12.4.js"></script>
    <script>
        function changeImage() {
            // 获取用户输入的图片地址
            var imgAddress = $(":text").val();
            // 设置img图片标签的src属性的值为用户输入的值
            $("img").attr("src","https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1767036438,651853094&fm=26&gp=0.jpg");
        }
    </script>
</head>
<body>   
 请输入图片地址: <input type="text"> <button onclick="changeImage();">切换图片</button> <br>
   <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2014670149,2543710475&fm=26&gp=0.jpg">
</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表