jQuery知识点总结（三）

最新推荐文章于 2022-03-25 20:03:35 发布

嘤嘤鸭

最新推荐文章于 2022-03-25 20:03:35 发布

阅读量174

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_43427995/article/details/105470446

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery知识点总结（三）

jQuery内容选择器

jQuery的内容选择器总共有四个，分别为empty，parent，contains(text)，has(selector)。

empty选择器
匹配所有不包含子元素或者文本的空元素
parent选择器
匹配含有子元素或者文本的元素
contains(text)选择器
匹配包含给定文本的元素
has(selector)选择器
匹配含有选择器所匹配的元素的元素

<script>
    //empty                 内容为空
    //parent                有内容和标签
    //contains(text)        包含xx内容
    //has(selector)         包含xx标签

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

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

        //contains(text) 
        var $div3=$("div:contains('我是div')");
        console.log("contains(text)");
        console.log($div3);

        //has(selector)
        var $div4=$("div:has(span)");
        console.log("has(selector)");
        console.log($div4);

    })
</script>
<style>
    div{
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: red;
    }
</style>
<body>
    <div>我是div</div>
    <div></div>
    <div>你好我是div</div>
    <div>你好</div>
    <div><span></span></div>
    <div><p></p></div>
</body>
</html>

js中的属性和属性节点（回顾）

什么是属性:对象上的变量就是属性
操作属性

function Creat()
    {
        this.age="17";
    }
    var c=new Creat();
    console.log(c.age);
    c[name]="张三";
    console.log(c[name]);

什么是属性节点：在HTML标签中添加的属性就是属性节点（只有DOM元素有属性节点）
操作属性节点

<script>
 window.onload=function()
    {
    //4.操作属性节点
        var oTxt=document.getElementsByTagName("input")[0];
        //这里将name为text1的文本框变成了，name为btn1的按钮
        oTxt.setAttribute("type","button");        //setAttribute("属性节点","要设置的值")
        oTxt.setAttribute("name","btn1");

        //获取DOM元素的属性节点
        console.log(oTxt.getAttribute("name"));

    }
</script>
<body>
    <input type="text" name="text1" value="我是text">

操作属性节点attr( )

attr( )用来获取（一个参数），设置属性节点（两个参数）

获取属性节点

对象.attr(“属性节点”)
注意！！！获取属性节点只能获取匹配的第一个属性节点！

设置属性节点
对象.attr(“属性节点”,“值”)

新增属性节点
对象.attr(“属性节点”,“值”)
如果设置的属性节点不存在，系统会新增一个属性节点

删除属性节点
对象.removeAttr(“属性节点”)
删除多个用空格隔开

操作属性prop( )

属性

prop操作属性和attr相似，都有增加，删除，获取等操作。

prop也可以操作属性节点，prop和attr操作属性节点的区别

prop返回true或者false
attr返回字符串或者undefined

操作类class

添加类addClass( )
添加多个类用逗号隔开

删除类removeClass( )

切换类toggleClass( )
有则添加，没有则删除

<script>
    $(function()
    {
        var oBtn1=document.getElementsByTagName("input")[0];
        var oBtn2=document.getElementsByTagName("input")[1];
        var oBtn3=document.getElementsByTagName("input")[2];

        oBtn1.onclick=function()
        {
            //添加类，添加多个类用逗号隔开
            $("div").addClass("class1 class2");
        };
        oBtn2.onclick=function()
        {
            //删除类
            $("div").removeClass("class1 class2");
            
        };
        oBtn3.onclick=function()
        {
            //切换类，有则添加，没有则删除
            $("div").toggleClass("class2");

        };
    }
    )
</script>
<body>
    <input type="button" value="添加类">
    <input type="button" value="删除类">
    <input type="button" value="切换类">
    <div></div>
</body>

嘤嘤鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery知识点总结（三）

jQuery知识点总结（三）jQuery内容选择器jQuery的内容选择器总共有四个，分别为empty，parent，contains(text)，has(selector)。empty选择器匹配所有不包含子元素或者文本的空元素parent选择器匹配含有子元素或者文本的元素contains(text)选择器匹配包含给定文本的元素has(selector)选择器...
复制链接

扫一扫