jQuery第三天~

强风拂过
113 阅读1分钟

「这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战」

jQuery内容选择器

:empty

作用：找到既没有文本内容也没有子元素的指定元素。

html代码：

        <body>
            <div></div>
            <div>中国人</div>
            <div>我是中国人</div>
            <div><span></span></div>
            <div><p></p></div>
        </body>

示例代码：

        var $div=$("div:empty");
        console.log($div);

结果：

image.png

:parent

作用：找到有文本内容或有子元素的指定元素(包含并非相等)。

示例代码：

        var $div=$("div:parent");
        console.log($div);

结果：

image.png

:contains(text)

作用：找到包含（并非相等）指定文本内容的指定元素

示例代码：

        var $div=$("div:contains('中国人')");
        console.log($div);

结果：

image.png

:has(selector)

作用：找到包含指定子元素的指定元素

示例代码：

        var $div=$("div:has('span')");
        console.log($div);

结果：

image.png

jQuery属性和属性节点

  1. 什么是属性？
  • 对象身上保存的变量就是属性 eg：人的年龄就是人的一个属性
  1. 如何操作属性？

方式一： 获取对象属性：对象.属性名称; 对象属性赋值：对象.属性名称 = 值；

示例代码：

            //创建一个对象
            function Person(){};
            var a = new Person();

            a.name="zxy123";
            console.log(a.name);

方式二： 获取对象属性：对象["属性名称"]; 对象属性赋值：对象["属性名称"] = 值；

示例代码：

            //创建一个对象
            function Person(){};
            var a = new Person();
            
            a["name"]="lmr123";
            console.log(a["name"]);

结果：

image.png

  1. 什么是属性节点？

<span name="zxy"></span>

  • HTML标签中的属性就是属性节点，在浏览器中找到span这个DOM元素之后，展开看到的都是属性。
  • 在attributes属性中保存的所有内容都是属性节点
  1. 如何操作属性节点？

获取属性节点：DOM元素.getAttribute("属性节点名称");

            var b = document.getElementsByTagName("span")[0];
            console.log(b.getAttribute("name"));

属性节点赋值：DOM元素.setAttribute("属性节点名称","值");

            var b = document.getElementsByTagName("span")[0];
            b.setAttribute("name","mr");
  1. 属性和属性节点有什么区别？
  • 任何对象都有属性，但是只有DOM元素才有属性节点
avatar
文章
阅读
粉丝