jQuery选择器介绍

￡神魔★判官ぃ 2022-09-25 06:30 212阅读 0赞

1、jQuery是优秀的Javascrīpt框架。使用jQuery的好处是它包装了各种浏览器版本对DOM对象的操作。

2、页面加载完成后开始运行do something when DOM is ready中的语句!

$(document).ready(function() { 
        // do something when DOM is ready
    });
    
    //例1
    $(document).ready(function() { 
        $("div p"); // (1) 得到所有<div>标签下的<p>元素
        $("div .container"); // (2) 得到class 为container的<div>元素
        $("div #msg"); // (3) 得到<div>标签下面id为msg的元素
        $("table a",context); // (4) 得到context为 上下文的table里面所有的连接元素
        $("#myId"); //(5) 得到id为myid的所有元素
    });
    
    
    //例2
    $(document).ready(function() { 
        $("a").click(function() { 
            alert("Hello world!");
        });
    });

`$("a")`是一个jquery的选择器（selector），`$("")`其中的字段就是元素的标记。比如`$("div")`就是`<div></div>`。click是函数对象的一个方法，为鼠标点击事件。  
　`$("a").click()`这句话就是给所有的标签为`<a>`的元素绑定了一个click事件。即当所有`<a>`标签被鼠标单击的时候，执行 alert(“Hello World!”);

3、选择器(selector)和事件(events)  
（1）选择一个ID为orderedlist的元素,相当于javascript中的document.getElementById(“orderedlist”)，jquery中只需要$(“\#id”)；其中的id为元素的ID,元素为任意元素。addClass为把这个元素的css的class改为red。

$(document).ready(function() { 
        $("#orderedlist").addClass("red");//将所有id为orderlist的元素的css改为red
    });

（2）

$("#dc > xx")；//指的是id为dc的元素下的直接id为xx的元素！
    $("#dc div")；//指的是id为dc下的所有div元素
    
    $(document).ready(function() { 
        $("#orderedlist > li").addClass("blue");//将id为orderlist 元素下的直接所有<li>标签的元素的css改为blue
    });

（3）

$(document).ready(function() { 
        // use this to reset a single form
        $("#reset").click(function() { 
            $("#orderlist form")[0].reset();//id为orderlist的表单执行reset()方法
        });
    });
    
    $(document).ready(function() { 
        // use this to reset several forms at once
        $("#reset").click(function() { 
            $("form").each(function() { //为多个表单执行reset()方法
                this.reset();
            });
        });
    });

（4）filter()和not()  
对于选择某个或某几个元素，Jquery提供了filter()和not()方法。当filter()是过滤一些适合filter()表达式元素，而not()是删除和not()表达式相反的元素。当你想选择所有的`<li>`元素，并且不包含`<ul>`子元素，可以这样写：

$(document).ready(function() { 
        $("li").not("[ul]").css("border", "1px solid black");
    });

（5）find()  
find(expr) 在匹配的对象中继续查找符合表达式的对象，如

<p>Hello</p>  
    <p id="a">Hello Again</p>
    <p class="selected">And Again</p>
    
    function test(){
        alert($("p").find("#a").html());//在$("p")对象中查找id为a的对象
    }