Detailed jquery selector _jquery

General Introduction

Finally started my jquery learning road! Feel no more stalling, learn jquery while learning native JavaScript

What is jquery?

jquery is a fast, concise JavaScript framework, a good JavaScript code base (or JavaScript framework) after prototype. The purpose of jquery design is "write Less,do more", which advocates writing less code and doing more things. It encapsulates JavaScript's commonly used functional code, providing a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction.

The core features of jquery can be summed up as follows: A unique chain syntax and a short, clear multi-function interface, a highly efficient and flexible CSS selector, and extensible CSS selectors, with convenient plug-in extensions and rich Plug-ins. jquery compatible with a variety of mainstream browsers, such as IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ and so on. (from Baidu-_-)

jquery Objects and Dom objects

When we write scripts, we may use both native JavaScript and jquery, and then there are some problems. To solve these problems, you need to know the jquery object and the DOM object first.

Dom objects: Getting to elements in the DOM tree through, for example, the getElementById method is a DOM object

jquery objects: Objects that are generated after a DOM object is wrapped through jquery

Note: jquery objects and DOM objects cannot use each other's methods

 Error
 $ (' div '). InnerHTML;
 Error
 document.getelementsbytagname (' div ') [0].html ();

jquery objects and Dom objects can be converted to each other

There are two ways to turn a jquery object into a DOM object:

1, [index]

 var $div = $ (' div ');//jquery object
 var div = $div [0];//dom Object

2, get (index)

 var $div = $ (' div ');//jquery object
 var div = $div. Get (0);//dom Object

There is a way for a DOM object to be converted to a jquery object: $ (DOM object)

 var div = document.getelementsbytagname (' div ') [0];//dom object
 var $div = $ (div);//jquery object

jquery Selector

The selectors in jquery completely inherit the CSS style.

Look at it.

Basic Selector

Change the background color of all div with ID div1

$('#div1').css('background','#bbffaa');

Change the background color of all P-tags and class-one div

$('p,.one').css('background','#bbffaa');

Hierarchy Selector

Select all span elements in a div

$('div span');

Select the element name under Div is a child element of span

$('div > span');

Select Class is the next <div> sibling element of one

$('.one + div');

Select the class to be all the <div> sibling elements behind one

$('.one ~ div');

Filter Selector

1. Basic Filter Selector

Select the first <div> element in all <div> elements

$('div:first');

Select the class is not one <div> element

$('div:not(.one)');

Select the <div> element for which the index is even

$('div:even');

Select <div> element with index equal to 2

$('div:eq(2)');

Select <div> element with index greater than 2

$('div:gt(2)');

Select all header elements, such as H1, H2, etc.

$(':header');

Select all elements that are currently executing the animation

$(':animated');

Select the element that gets the current focus

$(':focus');

2. Content filtering Selector

Select <div> elements that contain text "persistence"

$('div:contains('坚持')');

Select a <div> element that does not contain child elements or text

$('div:empty');

Select the <div> element that contains the <p> element

$('div:has(p)');

Select elements that contain child elements or text

$('div:parent');

3. Visibility Filter Selector

Select all elements that are not visible. Includes <input type= "hidden"/>,<div style= "Display:none" > and <div style= "Overflow:hidden" >

$(':hidden');

Select all the visible <div> elements

$('div:visible');

4. Attribute Filter Selector

Select an element with an id attribute

$('div[id]');

Select the <div> element with ID equal to myID

$('div[id="myId"]');

Select an ID value that is not equal to the myID <div> element

$('div[id!="myId"]');

Select the <div> element whose ID value starts with my

$('div[id^="my"]');

Select the <div> element with the ID value ending with my

$('div[id$="my"]');

Select id value contains my <div> element

$('div[id*="my"]');

Select attribute title equal to En or element with en as prefix (en followed by a hyphen '-')

$('div[title|="en"]');

Select a space-delimited value in attribute title to include the <div> elements of the character en

$('div[title~="en"]');

Select the <p> element that owns the property ID and the attribute title is prefixed by EN

$('p[id][title|="en"]');

5, child element filter

Select the 2nd child element under the <div> parent element of each class one

$('div.one :nth-child(2)');

Select the 1th child element under the <div> parent element of each class one

$('div.one :first-child');

Select the <li> element in <ul> that is the only child element

$('ul li:only-child');

6, the Form object attribute filters the Selector

Select all available elements in the id "Form1" form

$('#form1:enabled');

Select all the unavailable elements in the ID "Form1" form

$('#form1:disabled');

Select All selected <input> elements

$('input:checked');

Select All selected option elements

$('select option:selector');

Form Selector

Select all the <input>, <textarea>, <select>, and <button> elements

$(':input');

Select all single-line text boxes

$(':text');

Select all elements that are not visible

 $(':hidden');

The rest of the options can be learned by means of words (for example, submit is the choice of all the submit buttons) and no longer repeat.

References: Sharp jquery (second edition) http://www.jb51.net/books/92918.html

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!