Jquery 基本选择器

发布时间:2020-08-24编辑:脚本学堂
本文介绍了Jquery 基本选择器的用法,有关Jquery 选择器的例子,有需要的朋友参考下。

例子,jquery 基本选择器 实例代码。
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery 基本选择器_www.jb200.com</title>
    <style type="text/css">
        .myDiv{width:100px;background-color:Blue;}           
    </style>
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //jquery选择器用于查找满足条件的元素。
    //基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和tagName来查找dom元素
    //1.$("#id") : id选择器,document.getElementById("id");
    //2.$("div") :元素选择器 document.getElementByTagName("div");
    //3.$(".myClass") : 类选择器,返回所有class="myClass"的元素
    //4.$("*") : 返回所有元素,多用于结合上下文搜索
    //5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素
        $(function () {
            //-----1.id选择器
            //var $divMain = $("#main");
            //alert($divMain.get(0));

            //-----2.元素选择器
            //var $divs = $("div");
            //for (var i = 0; i < $divs.length; i++) {
            //    alert($divs.get(i).innerHTML);
            //}

            //-----3.类选择器
            //var $divs = $(".myDiv");
            //for (var i = 0; i < $divs.length; i++) {
            //    alert($divs.get(i).innerHTML);
            //}

            //-----4.返回所有元素
            //var $Elements = $("*");
            //for (var i = 0; i < $Elements.length; i++) {
            //    alert($Elements.get(i).innerHTML);
            //}

            //-----5.多条件选择器
            var $MyObjs = $("div,input,span");
            for (var i = 0; i < $MyObjs.length; i++) {
                alert($MyObjs.get(i).id);
            }
        });
    </script>
</head>
<body>
    <input id="button1" type="button" value="我是button1" />
    <div id="main">
        <div id="div1" class="myDiv">我是div1<span id="span1">我是span1</span></div>
        <div id="div2" class="myDiv">我是div2<span id="span2">我是span2</span></div>
    </div>
    <input id="button2" type="button" value="我是button2" />
</body>
</html>