jQuery four selector usage and examples-JS Tutorial-php.cn

jQuery four selector usage and examples

巴扎黑

Release： 2017-06-20 16:31:31

Original

1131 people have browsed it

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

element.

$("p.intro") selects all

elements with class="intro".

$("p#demo") selects all

elements with id="demo".

Sample code:

jquery part

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


function tagName(){
  $('p').addClass('heighlight');
}

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

Copy after login

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>

Copy after login

css section

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

.alt{
  background-color:#ccc;
}

Copy after login

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(){
  $('[href="#"]').addClass('heighlight'); 
}

Copy after login

jQuery CSS selector

.addClass() or .css()

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

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

Copy after login

jQuery Custom selector

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

function custom(){
  $('tr:odd').addClass('alt');
}

Copy after login

Attachment

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

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

:first	$("p:first")	First element
:last	$("p:last")	The last element
:even	$(" tr:even")	All even
:odd	$("tr:odd")	All odd

: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 elements -
: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 The 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")	All elements
:text	$(":text")	All
:password	$(":password")	All elements of type="password"
:radio	$(":radio")	All elements of type="radio"
:checkbox	$(":checkbox")	All elements of type="checkbox"
:submit	$(":submit")	All elements of type="submit"
:reset	$ (":reset")	All elements of type="reset"
:button	$(":button")	All elements of type="button"
:image	$(":image")	All 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!