jq选择器

菜鸟张小花

于 2023-01-30 22:37:29 发布

阅读量507

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_64289861/article/details/128801791

版权

js封装成的一个库，有成链的语法，简便清晰，丰富的乍见支持，轻量级的库文件，对于dom的查找，调用提供了大量的支持。

1.jq的引用：使用script标签引用jq文件，先写一个入口函数（使用jq起始的位置）

$(function(){
    //内容
})

2.js，jq入口函数的区别

js的入口函数要把页面所有的页面资源全部加载完成之后，在执行
jq的入口函数,dom加载完成之后直接执行

3.根据事情发生的场景，编写事件和事件内容

jqure事件的链式式写法

每一个时间内部都包含一个this，this是dom对象(当前dom获取元素）

<body>
    <script>
        $(function(){
            $('#div1').click(function(){
                alert('臻浓牛奶')
                $('#div1').text('臻浓牛奶')
            })
        })
    </script>
    <div id='div1'></div>
    <button id='btn1'>按钮</button>
</body>

dom对象与jquery之间的转换

var obj=document.getElementById('btn')
            $obj=$(obj)
            $obj.click(function(){
                $('#div').css('background','pink');
                $('#div').toggleClass('plum');
            })
            //jqurey对象转换成dom对象
            //var dom=$('#div')[0]
            var dom=$('#div').get(0)
            dom.innerHTML="望山楂"

选择器

复合选择器

后代选择器（概念：后代选择器又称为包含选择器；作用：用来选择元素或者元素组的子孙后代）

div p div中所有的p标签

div>p div的子元素p

属性选择器

$('input'); //所有input元素
$('input[id]'); //input元素中，设置了id属性的所有元素。
$('input[id=btn1]'); //input元素中，id=btn1的元素。
$('input[id*=btn]'); //input元素中，id包含btn的所有元素。
$('input[id^=btn]'); //input元素中，id以btn开头的所有元素。
$('input[id$=btn]'); //input元素中，id以btn结尾的所有元素。
$('input[value][type=text]'); //同时满足多个属性条件，用[] []，input元素中，设置了value属性值，并且类型是text的所有元素

操作标签属性（可以设置复选框的全选全不选）

标签属性方法：attr(name)/attr(name,value)读写非布尔值的标签属性

标签属性方法:prop(name)/prop(name,value)读写布尔值的标签属性

数据缓存：data（ data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除）

过滤选择器