Jquery 选择器

最新推荐文章于 2024-01-14 11:54:30 发布

lealiujj

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量81

点赞数

分类专栏： html前端

本文链接：https://blog.csdn.net/lealiujj/article/details/100008155

版权

html前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

总结：
通过选择器对html页面上的元素进行选择，然后对该元素进行CSS样式增删改查（用css()方法）、对其属性进行增删改查（用prop()方法）、使用jQuery中封装的效果（当然也可以自己写效果）绑定事件触发效果，从而达到交互的目的。
jquery选择器选择规则和css样式相同，使用length属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('p') //选择所有的p标签元素
$('#myId a span') //选择id为为myId元素下的所有a标签下的span元素
$('input[name=myname]') // 选择name属性等于myname的input标签元素

对选择集进行过滤，有三个方法 has、 not 、eq

 $('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素

Demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        // $(document).ready(function(){
        //     var $id= $("#d1");
        //     alert($id);
        //     alert($id.html);
        // });
        window.onload = function(){
            var id=document.getElementById("d1");
            alert(id.innerHTML)
        };
        $(function(){
            var $id=$("#d1");
            alert($id)
        });
        $(function(){
            // id选择器
            var $b1 = $("#d1");
            alert("通过id选择器选择的个数："+$b1.length);
            var $b2 = $("div");
            alert("通过标签选择器选择的个数："+$b2.length);
            var $b3=$("div h1");
            alert("通过层级选择器选择的个数："+$b3.length);
            var $b4=$("input[type=button]");
            alert("通过属性选择器选择的个数："+$b4.length);
            var $b5=$(".la");
            alert("通过类选择器选择的个数："+$b5.length);

        });

    </script>
</head>
<body>
    <div id="d1">
        hahahaah
    </div>
    <div>
        <h1>hehe</h1>
    </div>
    <input type="text">
    <input type="button" value="ok">
    <label for="" class="la">lable</label>
</body>
</html>

lealiujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 选择器

总结：通过选择器对html页面上的元素进行选择，然后对该元素进行CSS样式增删改查（用css()方法）、对其属性进行增删改查（用prop()方法）、使用jQuery中封装的效果（当然也可以自己写效果）绑定事件触发效果，从而达到交互的目的。jquery选择器选择规则和css样式相同，使用length属性判断是否选择成功。$('#myId') //选择id为myId的网页元素$('.myCla...
复制链接

扫一扫

专栏目录