基础，层次，选择器

1.基本选择器

1.标签选择器

$(“标签名”)

        $("p").html() //获取p标签对象，是jquery对象形式的
        $("p").length

2.类选择器

$(“.class值”)

3.id选择器

$(“#id值”)

3.并集选择器逗号隔开

$(“.class值，#id值”)

4.交集选择器（同时存在）

$(“class值id值”)

$(“p.myStyle”).html()：选中即是p标签，并且class的值是myStyle

注意：不能出现歧义
错误写法 $(“.myStylep”).html()
交集选择器在交接处只能是.或#开头的选择器

5.全局选择器

$(“*”)

选中全部元素

2.层次选择器（只取后面的哪些元素）

相邻选择器 “+”

$(“选择器1+选择器2”)

同辈选择器 “~”

$(“选择器1~选择器2”)

后代选择器 空格

$(“选择器1 选择器2”)

子代选择器 “>”

$(“选择器>选择器2”)

3.属性选择器 […]

$("[属性名]")

    $("[class]") : // 选中全部元素中 有class属性的 元素

$("[属性名=属性值]")
    $("[class=xxx]")  
    $("[class='xxx']")    

$("[class!=a]") // 不等于， 包含两种： 有class但值不是a,   没有class

$("[class^=a]") // class以a开头的元素
$("[class$=a]") // class以a结尾的元素
$("[class*=a]") // class有a的元素

4.过滤选择器

过滤选择器的一些方法和其他函数类型，例如 $(“ul>li:first”)等价于$(“ul>li”).first()

有些不同，例如，可以$(“ul>li:odd”) ；错误$(“ul>li”).odd();

:first 最开头那一个
:last 最后那一个
:even 偶数
:odd 奇数

:eq(index) 第index个

:gt(index) >index的全部元素
:lt(index) <index的全部元素
:not(选择器) 除了…以外
:header 选中所有的标题元素 h1 h2

:focus 获取当前焦点的元素

5.可见性选择器

:visible 选中所有可见的元素
:hidden 选中所有隐藏的元素

例：

<html>
    <head>
        <title>my title</title>
        <meta charset="utf-8"/>
        <!--引用 -->
        <script type="text/javascript" src="jQuery/jquery-3.4.1.js">
        </script>
        <!--使用 -->
        <script type="text/javascript" >
            //alert("hello");
            /*$(document).ready(function(){//加载函数也称初始化函数
                alert("hello jquery");
                
            });*/
            //当网页中的dom（结构出来了并不需要内容）元素全部加载完毕后 立刻执行
            //onload:javascript,初始化函数，当网页中的dom元素（关联图片，视图，资源）全部加载完毕后 立刻执行
            
            /*$(document).ready( function(){
            alert("hello js");
            });
            
            $(function(){
            alert("hello 123");
            });
            
            function init()
            {
            
                alert("init...");
            }*/
            
            $( function(){
                var $title = $("#myTitle");
                //alert($title.html()+"jquery");
                //alert($title[0].innerHTML+"111");
                //alert($title.get(0).innerHTML+"222");
                //alert( $("p").html());//标签选择器 $("标签名")
                    //alert( $("p").length);
                    //alert($(".myTitle").html()+"555");//类选择器
                    //alert($("#myTitle").html()+"333");//id选择器
                    //alert($(".myTitle,#myTitle,#myTitle3 ").length );//并集选择器
                    //alert($("p.myTytle").length );//交集选择器 错误写法$(".myStylep").html()
            
                        //alert($("*").length );//全局选择器
                    
                    //层次选择器+  $("选择器1+选择器2")相邻只取后面的
                        //alert($("#b+li").html() );
                        //alert($("#b+li").length);
                    //同辈选择器~  $("选择器1~选择器2") 同辈只取后面的
                        //alert($("#b~li").html() );
                        //alert($("#b~li").length);
                    //后代选择器 空格 $("选择器1 选择器2")
                        //alert($("body li").length);
                        //alert($("body>li").length);//不行
                    //子代选择器 > $("选择器1>选择器2")
                        //alert($("ul>li").length);
                    
                    //属性选择器 [...]
                    // $("[属性名]") $("[name]"):选中全部元素中 有name属性的元素 
                        //alert($("[class]").html());
                        //alert($("[class='xxx']").html());//选中class=xxx的
                            //$("[class !=a]") 不等于 包含两种: 有calss但值不是a 没有class
                            //$("[class ^=a]")  class以a开头的元素
                            //$("[class $=a]")  class以a结尾的元素
                            //$("[class *=a]")  class有a的元素
                        
                        
            });     
             
            /*function init()
            {
                var title = document.getElementById("myTitle");
                //alert( title.innerHTML  );
                alert( $(title).html()+"123"  );
            }*/
            </script>
            <style>
                <!--.myTitle{
                color:red;
                
                }-->
            </style>
            
    </head>
    
    
    <!--<body onload="init()">-->
    <body >
    <p id="myTitle" >你最喜欢的颜色是？</p>
    <p class="myStyle" >你最喜欢的颜色是2？</p>
    <p id="myTitle3" >你最喜欢的颜色是3？</p>
            
        <ul>
        
            <li>aaa</li>
            <li id="b">bbb</li>
            <li>ccc</li>
            <li>ddd</li>
            <li>ee</li>
            <li>ff</li>
        </ul>
            
    </body >


</html>

本文链接：https://www.cnblogs.com/x-i-n/p/12075208.html

基础，层次，选择器