Jquery 选择器事件 DOM操作基本知识-优快云博客

本文详细介绍了JQuery中的各种选择器使用方法及其应用场景，包括基本选择器、过滤选择器等，并展示了如何利用JQuery简化事件绑定的操作。

这里简单的举了一些实例，方便查看和浏览：

首先是HTML代码：

 <style>
        .div1 {
            width:100px;
            height:100px;
            background-color:red;
            border:3px solid black;
            float:left;
            margin:10px;
        }


    </style>

</head>
<body>
    <form id="form1" runat="server">
        <div class="big">
            <input type="button" id="btn1" value="按钮" />
            <div class="div1">aa</div>
               <div class="div1">bb</div>
               <div class="div1" id="d1">cc</div>
               <div class="div1"><a></a>dd</div>
               <div class="div1" id="d2">ee</div>
        </div>
    </form>
</body>
</html>

下面就是Jquery代码：

一：基本选择器和过滤选择器：

 //这里是给每一个选择器.div1都附上点击事件，以前时候需要遍历，现在不需要遍历，直接能赋点击事件，通过id来赋值，就把下面的. 改成#号就可以
    如果是标签选择器，就是Tagname那个，里面的就是$('div')

    $(".div1").click(function () {

        alert("aaa");
    });

    //id选择器
    $("#div1").click(function () {

        alert("aaa");
    });
      //标签选择器 
    $("div1").click(function () {

        alert("aaa");
    });
    
    //如果是两个选择器要执行一样的事件，那就用逗号隔开。
    $('#d1,#d2').click(function () {

        alert('哈哈哈哈');
    });
    //执行某个选择器的下一级用空格表示
    $(".big #d1").click(function () {

        alert("哈哈啊");
    });


    //过滤选择器：

    //只赋第一个div的事件
    $(".div1:first").click(function () {

        alert("哈哈啊");
    });
    //只赋最后一个
    $(".div1:last").click(function () {

        alert("哈哈啊");
    });

    //等于任意个 eq() ,按索引来

    //第一个：
    $(".div1:eq(0)").click(function () {

        alert("哈哈啊");
    });
    //最后一个： 可以写出他的长度。有多少个div
    $('.div1:eq(' + $('.div1').length-1 + ')').click(function () {
        alert('aaaa');
    });
    //上面的也可以写成：  如果写一个循环，直接把下面的1换成i就可以了、直接能写出所有的div
    $('.div1').eq(1).click(function () {
        alert("aaa");
    });

    //大于：gt(),大于第几个开始,这里举的例子是从索引第二个开始以后的。
    $('.div1：gt(2)').click(function () {
        alert("aaa");
    });

    //小于：:lt(),小于第几个，小的所有
    $('.div1：lt(2)').click(function () {
        alert("aaa");
    });
    //排除，排除第几个，写出其他的所有。

    //这里是直接放的选择器。
    $('.div1:not(.#d1)').click(function () {
        alert("aaa");
    });
    //这里是放第几个：排除第几个出来；
    $('.div1:not(.div:eq(3))').click(function () {
        alert("aaa");
    });
    //按索引奇偶数来看div;
    //奇数：
    $('.div1：odd').click(function () {
        alert("aaa");
    });
    //偶数：
    $('.div1：even').click(function () {
        alert("aaa");
    });

    //属性过滤：

    //属性名过滤：按属性名字进行过滤
    $('.div1[id]').click(function () {
        alert("aaa");
    });
    //属性名对应值过滤： 所有type=button的
    $('.input[type=button]').click(function () {
        alert("aaa");
    });

    //内容过滤：
    //contain(”字符串“)  所有内容包含d的，注意是包含的内容
    $('.div1：contains("d")').click(function () {
        alert("aaa");
    });

    //子元素：has(选择器) 包含a标签的 
    $('.div1：has(a)').click(function () {
        alert("aaa");
    });

二：事件：

//事件：事件和JS基本一样，就是把on去掉就是Jquel的

    //基础事件
    $(".div").mouseover(function () {

    });

    //复合事件：不经常用 hover和Js的基本一样，就是鼠标移上去变颜色
    $("div1").hover(function () {

        $(this).css("background-color", "yellow");
    }, function () {

        $(this).css("background-color","red");
    });

// toggle点击事件的循环执行点第一下黄色，第二下红色，但是呢这里用的Jquel版本是1.11.1不行，得用1.7.2的
    $(".div1").taggle(function () {
        $(this).css("background-color","yellow")
    }(function () {
        $(this).css("background-color","red")
    }));