JQuery selector for beginners of jQuery

Keywords: Javascript Attribute JQuery less

Today we'll talk about jquery selectors, which are roughly divided into four selectors!!!

1. Basic selectors (label, ID, class, union, intersection, global)

1 (template)

<body>
    <div id="o" class="myc">I'm the first one. div</div>
    <div><span>I am the second div</span></div>
  </body>

1.1 (label)

 //Label
  $(function(){
   $("div").css("background-color","red");
  });

1.2(ID)

$(function(){
     $("#o").css("background-color","green");
  });

1.3 (category)

 $(function(){
   $(".myc").css("background-color","red");
  });

1.4 (Union)

 $(function(){
   $("div,#o").css("background-color","red");
  });

1.5 (intersection)

$(function(){
   $("div#o").css("background-color","yellow");
  });

1.6 (overall)

$(function(){
     $("*").css("background-color","blue");
  });

2. Hierarchical selectors (descendants, children, neighbors, peers,)

2.1 (offspring)

 $(function(){
     $("div span").css("background-color","green");
  });

2.2 (son)

$(function(){
   $("div>span").css("color","blue");
 });

2.3 (adjacent)

$(function(){
   $("div+div").css("color","green");
 });

2.4 (peers)

 $(function(){
   $("div~div").css("color","red");
 });

3 attribute selector

3.0 (Template)

<body>
    <a id="12" href="#123">First link</a>
    <a id="23" href="@">Second link</a>
    <a id="34" href="#">Third link</a>
  </body>

Syntax:

3.1

[attribute]: Select elements that contain a given attribute

$(function(){
       $("[href]").css("color","red");
 });

3.2 [attribute=value]. Select elements equal to a given attribute being a specific value

$(function(){
       $("[href=#]").css("color","red");
 });

3.3[attribute!=value]: Select elements that are not equal to a given attribute being a specific value

$(function(){
    $("[href!=#]").css("color","red");
  });

3.4[attribute^=value]. Selecting an element whose given attribute is the beginning of a particular value

$(function(){
$("[href^#).css("color","red");
    });

3.5[attribute$=value]] Select elements whose specific values end with certain values

$(function(){
    $("[href$=123]").css("color","red");
    });

3.6[attribute*=value]. Selecting a given attribute is to contain certain values

$(function(){
    $("[href*'2']").css("color","yellow");
    });

3.7[selector][selectorN]. Select elements that satisfy multiple conditions for composite attributes

$(function(){
    $("a[href][id=12]").css("background-color","red");
    });

4. Filter selectors (rule selectors: basic filter selectors, visible filter selectors)

4.0 (Template)

<body>
 <h2>Your Life Value</h2>
   <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="a">4</li>
   <li>5</li>
   <li>6</li>
   </ul>
  </body>

4.1

Syntax:

First: Select the first element

 $(function(){
      $("li:first").css("background","red");
     });

4.2

Last: Select the last element

 $(function(){
      $("li:last").css("background","blue");
     });

4.3

not (selector) select and remove all elements that match the selector

 $(function(){
          $("li:not(.a)").css("background","blue");
     });

4.4

Select all elements whose index is even (index starts from 0)

$(function(){
         $("li:even").css("background","blue");
     });

4.5

Choose all elements whose index is odd (index starts at 0)

$(function(){
       $("li:odd").css("background","blue");
     });

4.6

eq (index) selects the element whose index equals index (index starts at 0)

$(function(){
       $("li:eq(1)").css("background","blue");
     });

4.7

gt (index) Selects elements whose index is larger than index (index starts at 0)

 $(function(){
       $("li:gt(1)").css("background","blue");
     });

4.8

lt (index) Selects elements whose index is less than index (index starts at 0)

 $(function(){
       $("li:lt(1)").css("background","blue");
     });

4.9

Select all header elements, such as h1~h6

$(function(){
       $(":header").css("background","blue");
     });

4.10

Select the element that currently gets the focus

$(function(){
       $(":focus").css("background","red");
     });

5.0 (Template)

<body>
    <p id="text_hide">Click on the button and I will be hidden.</p>
    <p id="text_show"> Hidden me, shown, hey hey hey hey</p>
    <input name="shwo" type="button" value="click on display text"/> 
    <input name="hide" type="button" value="click on display text"/> 
  </body>

Syntax:

5.1

Hidden

 $(function(){
      $("p:hidden").show(100);
   });

5.2

Select all visible elements

$(function(){
       $("p:visible").hide(100);
   });

Programmer Group

JQuery selector for beginners of jQuery

Hot Keywords