开发者社区> 极客江南> 正文

从零玩转jQuery-属性相关

简介: 属性和属性节点 什么是属性? 属性就是对象身上的变量 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象) // 1.
+关注继续查看

属性和属性节点

  • 什么是属性?
    • 属性就是对象身上的变量
    • 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
<script>
            // 1.自定义一个对象
            var obj = {};
            console.log(obj);
            // 2.动态给自定义对象添加属性
            obj.name = "lnj"; // name就是对象obj的一个属性
            obj.age = 33; // age就是对象obj的一个属性
            console.log(obj);
</script>
img_4c1fa4e9255ef5845892eab9f3b78c5d.png
image.png
  • 什么是属性节点?
    • 在html中编写的所有标签,里面的属性都是属性节点
      • <span class = 'box' nj = '666'></span> // 这里的class和nj就是属性节点
img_f8dbcb47b7fc56db63a1b7c6a5a93501.png
image.png
  • 如果操作属性?
    • 添加或修改属性(没有就会添加,有就会修改)
      • 对象.属性名称 = 值;
      • 对象["属性名称"] = 值;
    • 获取属性
      • 对象.属性名称
      • 对象["属性名称"]
  • 如何操作属性节点?
    • 获取属性节点
      • DOM对象.getAttribute("属性节点名称")
    • 设置属性节点
      • DOM对象.setAttribute("属性节点名称", "值");

jQuery中的attr和prop方法

<script>
        $(function () {
            // 1.获取指定属性节点值
            var $res = $(".span1").attr("nj");
            console.log($res);
            // 2.设置属性节点
            $(".span1").attr("nj", "666");
            $(".span2").attr("id", "box1 box2");

            // 3.注意点:
            // 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
            $res = $("span").attr("class");
            console.log($res);
             $("span").attr("class", "lnj");
        });
</script>
<script>
        $(function () {
            // 1.设置属性节点时,会给所有找到元素设置属性节点
            $("span").attr("test", "jonathan");
            // 2.删除属性节点时,会删除所有找到元素的属性节点
            $("span").removeAttr("test");
        });
</script>
<script>
        $(function () {
            // 1.设置属性
            // 1.1.设置属性时,会设置所有找到元素的属性
            $("span").prop("demo", "lnj");
            // 2.获取属性
            // 2.1.获取属性时,只会获取找到第一个元素的属性
            console.log($("span").prop("demo"));
        });
</script>
<script>
        $(function () {
            // 删除所有找到元素的demo属性
            $("span").removeProp("demo");
        });
</script>
  • attr方法和prop方法区别
    • 既然所有的DOM对象,都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
    • 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
    • 因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
<script>
        $(function () {
            // 1.可以通过prop获取属性节点
            console.log($("input").prop("class"));
            // 2.可以通过prop设置属性节点
            $("input").prop("class", "tag");

            // 3.如果没有默认值,那么attr获取返回undefined
//            console.log($("input[type=checkbox]").attr("checked"));
            // 4.如果没有默认值,那么prop获取返回false
            console.log($("input[type=checkbox]").prop("checked"));
            // 5.通过attr设置选中
//            $("input[type=checkbox]").attr("checked", true);
            
            // 6.通过prop设置选中
            $("input[type=checkbox]").prop("checked", true)

        });
</script>

jQuery增删Class

  • jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值
  • addClass(class|fn)
    • 给元素添加一个或多个类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-jQueryCSS类</title>
    <style>
        .class1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .class2{
            border: 5px solid #000;
        }
    </style>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           $("button").eq(0).click(function () {
               // 1.添加一个类
//               $("div").addClass("class1");
               // 2.再添加一个类
//               $("div").addClass("class2");
               // 3.一次性添加多个类(用空格隔开)
               $("div").addClass("class1 class2");
           });
        });
    </script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<button>切换</button>
<div></div>
</body>
</html>
<script>
        $(function () {
            $("button").eq(1).click(function () {
                // 4.删除一个类
//                $("div").removeClass("class2");
                // 5.再删除一个类
//                $("div").removeClass("class1");
                // 6.一次性删除多个类(用空格隔开)
                $("div").removeClass("class1 class2");

            });
        });
</script>
<script>
        $(function () {
            $("button").eq(2).click(function () {
                // 7.切换一个类
//                $("div").toggleClass("class2");
                // 8.切换多个类
                $("div").toggleClass("class1 class2");
            });
        });
    </script>

jQuery代码/文本/值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-jQuery代码文本值</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var $btns = $("button");
            var $div = $("div");
            $btns.eq(0).click(function () {
                // 1.添加html, 相当于innerHTML
//                $div.html("<p>我是p标签</p>");
//                $div.html("<p><span>我是span标签</span></p>");
                $div.html("我是文本");
            });
            $btns.eq(1).click(function () {
                // 2.获取html
                console.log($div.html());
            });
        });
    </script>
</head>
<body>
<button>添加html</button>
<button>获取html</button>
<button>添加文本</button>
<button>获取文本</button>
<div></div>
</body>
</html>
  • text([val|fn])
    • 添加或获取元素中的文本
    • text方法能做的html方法都能做,所以一般使用html方法即可
<script>
        $(function () {
            $btns.eq(2).click(function () {
                // 3.添加文本, 相当于innerText
                // 如下内容不会被转换为标签
//                $div.text('<p>我是段落</p>');
               $div.text('我是文本');
            });
            $btns.eq(3).click(function () {
                // 4.获取文本
                console.log($div.text());
            });
</script>
<script>
        $(function () {
            $btns.eq(4).click(function () {
                // 4.添加value值
                $("input").val("我是一个输入框");
            });
            $btns.eq(5).click(function () {
                // 4.获取value值
                console.log($("input").val());
            });
        });
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue入门 基本使用 与 事务管理【1】
Vue入门 基本使用 与 事务管理【1】
11 0
推荐收藏|10个炫酷的数据可视化作品含源码
推荐收藏|10个炫酷的数据可视化作品含源码
3 0
【云+社区年度征文】基于云开发完成小程序用户注册登录
【云+社区年度征文】基于云开发完成小程序用户注册登录
5 0
微软新工具准确率达 80% ,程序员:我谢谢您嘞~
微软宣布推出一种可以提高大型语言模型性能的新工具 Jigsaw。“大型的预训练语言模型(如 GPT-3、Codex 等),可以被调整为从程序员意图的自然语言规范中生成代码。这种自动化模型有可能提高世界上每个程序员的生产力;但是,由于这些模型可能难以理解程序语义,因此所生成的代码的质量不能得到保证。” 根据介绍,Jigsaw 部署了理解程序语法和语义的后处理技术,然后利用用户反馈来提高未来的性能;该工具旨在使用多模式输入为 Python Pandas API 合成代码。
4 0
IDEA maven web项目无法加载css,js,image等一系列路径问题
我们大二班级 刚刚学习maven 控制台输出 和mybatis的时候我提前进入学习的路程自己摸索 maven web开发 遇到了各种配置环境还有运行报错一大堆的问题, 前面的问题都属于环境配置看我之前的博客吧 这里主要讲解路径问题 步入:很多新手按照之前的步骤 部署网站的时候 发现css,js,image,还有各种有关路径的引入都无法显示,因为这些静态资源很有可能被spring拦截 方案:必须在web.xml文件中设置其为可加载资源
4 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
4 0
Vue入门 基本使用 与 事务管理【1】
Vue入门 基本使用 与 事务管理【1】
3 0
SLS日志服务
SLS日志服务
3 0
+关注
极客江南
指趣学院创始人, 曾先后担任多家世界500强科技公司技术顾问、上市教育公司全国教学总监
32
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载