Foundation level, selector

1. Basic selector

1. tag selector

$ ( "Tag name")

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

2. Class Selector

$(".class值")

3.id selector

$("#id值")

And 3. Set the selector comma

$ ( ". Class value, # id value")

4. intersection selector (exist)

$ ( "Class value id value")

$ ( "P.myStyle") html ():. Select the label that is p, and the value of class is myStyle

Note: You can not ambiguity
. Error writing $ (. "MyStylep") HTML ()
. Select the intersection at the junction is only the beginning of the selector or #

5. Global selector

$("*")

Select all the elements

2. The selector level (which takes only the back element)

Adjacent Selector "+"

$ ( "Selector selector 1 + 2")

Peer selectors "~"

$ ( "Selector Selector 1 to 2")

Descendant selectors spaces

$ ( "Selector Selector 1 2")

Descendant selector ">"

$ ( "Selector> Selector 2")

Attribute selector 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. Filter selector

Filtering methods and other types of function selectors, e.g. $ ( "ul> li: first") is equivalent to $ ( "ul> li") first ().

Somewhat different, for example, $ ( "ul> li: odd"); Error $ ( "ul> li") odd ();.

: first the very beginning of that one
: that a last Last
: the even the even
: odd odd

: Eq (index) index th

: gt (index)> all elements of index
: lt (index) <index of all elements
: not (selector) except ...
: header select all the title elements h1 h2

: focus Gets the current focus of the elements

5. Visibility selector

: visible select all visible elements
: hidden select all the hidden element

Example:

<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>