Home > Article > Web Front-end > jQuery four selector usage and examples

jQuery four selector usage and examples

巴扎黑Original: 2017-06-20 16:31:311058browse

This article gives you a summary of how to use jQuery's four selectors and examples. It is very simple and practical. I hope it will be helpful for everyone to learn jquery.

jQuery Element Selector

## jQuery uses CSS selectors to select HTML elements.

$("p") Selects the e388a4556c0f65e1904146cc1a846bee element.

$("p.intro") selects all e388a4556c0f65e1904146cc1a846bee elements with class="intro".

$("p#demo") selects all e388a4556c0f65e1904146cc1a846bee elements with id="demo".

Sample code:

jquery part

$(document).ready(function(){//页面加载完成后执行
  tagName();
// idName();
// className();
});


function tagName(){
  $(&#39;p&#39;).addClass(&#39;heighlight&#39;);
}

function idName(){
  $(&#39;#p&#39;).addClass(&#39;heighlight2&#39;);
}
function className(){
  $(&#39;p.pClass&#39;).addClass(&#39;heighlight2&#39;);
}

html part

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/select.js" ></script>
    <link rel="stylesheet" href="css/select.css" />
  </head>
  <body>
    <p id="p">
      <p>this is my name!!</p>
      <p class="pClass">class is import!</p>
      <a href="#">you cai!!</a>
    </p>
  </body>
</html>

css section

.heighlight {
  background-color: blue;
  
}
.heighlight2 {
  background-color: red;
}

.alt{
  background-color:#ccc;
}

jQuery Attribute Selector

Query Use XPath expressions to select with The element with the given attribute.

$("[href]") Selects all elements with href attribute.

$("[href='#']") Selects all elements with an href value equal to "#".

$("[href!='#']") Selects all elements with an href value not equal to "#".

$("[href$='.jpg']") Selects all elements whose href value ends with ".jpg".

jquery part, other parts are the same as above.

$(document).ready(function(){
  attribute();
});

function attribute(){
  $(&#39;[href="#"]&#39;).addClass(&#39;heighlight&#39;); 
}

jQuery CSS selector

.addClass() or .css()

$(document).ready(function(){
 cssName();
});

function cssName(){
  $(&#39;p&#39;).css("background-color","pink");
}

jQuery Custom selector

$(document).ready(function(){
 custom();
});

function custom(){
  $(&#39;tr:odd&#39;).addClass(&#39;alt&#39;);
}

Attachment

##.$(".intro.demo")All elements with class="intro" and class="demo"##:file$(":file")All d5fd7aea971a85678ba271703566ebfd elements of type="file"

Selector	Instance	Select
*	$(" *")	All elements
#id	$("#lastname")	Element with id="lastname"
.class	$(".intro")	All elements with class="intro"
element	$("p")	Alle388a4556c0f65e1904146cc1a846bee elements
class.class

:first	$("p:first")	Firste388a4556c0f65e1904146cc1a846bee element
:last	$("p:last")	The last e388a4556c0f65e1904146cc1a846bee element
:even	$(" tr:even")	All evena34de1251f0d9fe1e645927f19a896e8 elements
:odd	$("tr:odd")	All odda34de1251f0d9fe1e645927f19a896e8 elements

:eq(index)	$(" ul li:eq(3)")	The fourth element in the list (index starts from 0)
:gt(no )	$("ul li:gt(3)")	List elements with index greater than 3
:lt( no)	$("ul li:lt(3)")	List elements with index less than 3
:not(selector)	$("input:not(:empty)")	All input elements that are not empty

:header	$(":header")	All title elements4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc
:animated		All animated elements

:contains(text)	$(" :contains('W3School')")	Contains all elements of the specified string
:empty	$(":empty")	All elements without child (element) nodes
:hidden	$("p:hidden")	All hidden Thee388a4556c0f65e1904146cc1a846bee element
:visible	$("table:visible")	All visible tables

s1,s2,s3	$("th,td,.intro")	All with matching Selected elements

[attribute]	$("[href]")	All elements with href attributes
[attribute=value]	$("[href='#']")	The value of all href attributes Elements equal to "#"
[attribute!=value]	$("[href!=' #']")	All elements whose href attribute value is not equal to "#"
[attribute$=value]	$("[href$='.jpg']")	The value of all href attributes contains elements ending with ".jpg"

:input	$(":input")	Alld5fd7aea971a85678ba271703566ebfd elements
:text	$(":text")	All
:password	$(":password")	All d5fd7aea971a85678ba271703566ebfd elements of type="password"
:radio	$(":radio")	All d5fd7aea971a85678ba271703566ebfd elements of type="radio"
:checkbox	$(":checkbox")	All d5fd7aea971a85678ba271703566ebfd elements of type="checkbox"
:submit	$(":submit")	All d5fd7aea971a85678ba271703566ebfd elements of type="submit"
:reset	$ (":reset")	All d5fd7aea971a85678ba271703566ebfd elements of type="reset"
:button	$(":button")	All d5fd7aea971a85678ba271703566ebfd elements of type="button"
:image	$(":image")	All d5fd7aea971a85678ba271703566ebfd elements of type="image"


:enabled	$(":enabled")	All activated input elements
:disabled	$(":disabled")	All disabled input elements
:selected	$(":selected")	All selected input elements
:checked	$(":checked")	All selected input elements

The above is the detailed content of jQuery four selector usage and examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the usage of jQuery selector elementNext article：Introduction to the usage of jQuery selector element

See more

jQuery four selector usage and examples

Related articles