jQuery Study Notes - selector

2010-08-16  来源:本站原创  分类:Web  人气:183 

JQuery is the foundation of selector in jQuery in the incident handling, traverse the DOM, and AJAX operations are dependent on the selector

jQuery selector advantages:
Concise written

$("#id")  //document.getElementById("id");
$("tagName")  //document.getElementByTagName("tagName");

Improved event handling mechanism

//  If no id is in the page  "id"  Elements, the browser will complain
//document.getElementById("id").style.color="red";

//  Need to determine  document.getElementById("id")  The existence of
if(document.getElementById("id"))
   document.getElementById("id").style.color="red";

   //  Get a web page using the jQuery element even if there is not an error page
   $("#id").css("color","red");

Examples of basic selector

//  Change the id for the  one  The background color of the element to red
   $("#one").css("backgroundColor","red");
   //  Change the element name  <p>  The background color of all elements  #bbffaa,  Font color  red
   $("p").css({color:"red",backgroundColor:"#bbffaa"});
   //  Change the first  <p>  The background color of elements  red
   $("p").eq(0).css("backgroundColor","red");
   //  All change  <h1>  Elements and the id is  one  The background color of the elements  #bbffaa
   $("h1,#one").css("backgroundColor","#bbffaa");

Level selector

If you want to pass the DOM element to obtain the relationship between the levels of certain elements, such as future generations element, child elements, adjacent elements, brothers and other elements, you need to use the level selector

//  Select the ancestor of all  descendant(  Offspring  )  Elements
   $("ancestor descendant")
   //  Select the parent element under the  child(  Sub-  )  Elements, and  $("ancestor descendant")  Differentiated  ,$("ancestor descendant")  Selected elements of future generations
   $("parent>child")
   //  Immediately after the selected element in the next prev  next  Elements
   $("prev+next")
   //  After selecting all the elements prev  siblings  Elements
   $("prev~siblings")

Note: ("prev! Div") selector can only select the "# prev" element behind the sibling; and jQuery in the way siblings () and before and after the position has nothing to do, as long as a peer node can select the level of sample selector

//  Change  <body>  All  <div>  Background color  #bbffaa
   $("body div")
   //  Change  <body>  Wife  <div>  Background color  #bbffaa
   $("body>div")
   //  Change the id for the  one  Next  <div>  Background color  #bbffaa
   $("#one+div")
   //  Change the id for the  two  All the elements of brothers  <div>  Background color of elements
   $("#two~div")
   //  Change the id for the  two  All the elements  <p>  Brothers, the background color of elements
   $("#two").siblings("p")

Filter selector to ":" at the beginning
1, the basic filter selector

:first //  Select the first element
   :last //  Select the last element
   :not(selector) //  Remove all the given element matches the selector
   :even //  Select all the elements of even index, the index from scratch
   :odd //  Select all the elements of odd index, the index from scratch
   :eq(index)//  Selected elements of index equal to the index  ,  The index from scratch
   :gt(index)//  Selected elements of index greater than index  ,  The index from scratch
   :lt(index)//  Select the element index is less than index  ,  The index from scratch
   :header//  Select all the title elements, such as  h1,h2  Etc.
   :animated//  Select the currently executing all elements of the animation

Examples of filter selector

//  Change the first div element
   $("div:first")
   //  Id not change  one  All the p elements
   $("p:not('#one')")
   //  Change the index value is even number of tr elements
   $("tr:even")
   //  Select the index value greater than 3 and an odd element
   $("p:gt(3):odd")
   //  Change all the title elements
   $(":header")

2, selector, content filtering rules are mainly embodied in "his child elements and text contained in the content" on

:coneains(text)//  Select the text containing the text of the elements
   :empty//  Select the text does not contain child elements or empty elements
   :has(selector)//  Select the match with an element selector elements
   :parent//  Select the text containing the child element or elements
   //  Sample Content Selector
   //  Containing the class to change the  mini  Elements of the p element
   $("p:has(.mini)")

3, visibility filter selector according to the visible and invisible elements select the appropriate element
: Hidden
: Visible
Note: hidden not only contains the display style attribute to none of the elements, also contains hidden text field (<input type="hidden">) and visible: hidden elements like

4 selector attribute attribute filter filter filter selector rules "by elements of the property to obtain the corresponding element"

[attribute]//  Select the element with this property
   [attribute=value]//  Select the value of the specified property value of the elements
   [attribute!=value]//  Select the value of the specified property value is not equal to the elements
   [attribute^=value]//  Select the value of the property to the specified starting value elements
   [attribute$=value]//  Select the value of the property to the specified value of element
   [attribute*=value]//  Select the value of the property with the specified element value
[selector1][selector2]...[selectorN]// With attribute selectors into a single composite attribute and to meet multiple criteria  .  Each choose a narrow time range

5, sub-element filter selector

:nth-child(index/even/odd/equation)//  Select the parent element of each sub-element under the first index, or parity elements  (index  Counting from 1  )
:first-child//  Under each parent element selected first child
:last-child//  Under each parent element selected last child
:only-child//  Select only one child element of the element

nth-child () selector Xiangjie:
1,: nth-child (even / odd): each parent can choose the index value is even lower (odd) number of elements
2,: nth-child (2): can be selected under each parent element of the index value of 2
3,: nth-child (3n): can be selected under each parent element is a multiple of 3 index value of the elements
4,: nth-child (3n +1), etc.

6, the form object properties filter selector

:enabled//  Select all the available elements
   :disabled//  Select all the available elements
   :checked//  Select all selected elements  (  Radio button, check box  )
   :selected//  Select all elements of the selected option  (  Drop-down list  )

Example:
* Use jQuery object val () method to change the form available within the / value of the element is not available <input> use jQuery object length attribute for the number of checkboxes to select jQuery object using text () method to get under pull the contents of the form, variant selector

:input//  Select all  <input>,<textarea>,<select>  And <button>yuans
   :text//  Select all single line text box
   :paddword//  Select all elements of the password box
   :radio//  Select the radio button for all
   :checkbox//  Select all checkboxes
   :submit//  Select all the submit button
   :image//  Button to select all images
   :reset//  Select all the reset button
   :button//  Select all the buttons
   :file//  Select all of the upload fields
   :hidden//  Select all the elements are not visible
相关文章
  • jQuery Study Notes - selector 2010-08-16

    JQuery is the foundation of selector in jQuery in the incident handling, traverse the DOM, and AJAX operations are dependent on the selector jQuery selector advantages: Concise written $("#id") //document.getElementById("id"); $("

  • jQuery Study Notes - Overview 2010-08-16

    jquery study notes (written by little, to do more) jQuery object can not use the DOM of the method but if you want to jQuery no method of packaging had to use the DOM methodology in the following two methods: 1.jQuery object is an array object, you c

  • jquery study notes can be edited in the form of actual combat 2 2010-06-27

    1. First of all, look at the code. 1// Javascript must first be resolved by the content of some of the background color of the different even and odd lines $(function(){ // Content area to find the table all the even lines $("tbody tr:even").css

  • jquery Study Notes 2 to edit the form of actual combat 2010-06-27

    1. First of all, look at the code. 1// Javascript must first be resolved by the content of some of the background color of the different even and odd lines $(function(){ // Content area to find the table all the even lines $("tbody tr:even").css

  • jQuery Study Notes (3) 2010-09-02

    In many cases, will be a headache to choose one or more HTML inside the element, the following are some of the most basic usage: jQuery element selector $ (This) the current HTML element $ ("P") select <p> element. $ ("P.intro")

  • ajax js jquery study notes, continuously updated 2010-04-30

    ARL201003 1.javascript: var declaration variable scope is the current function Do not declare a variable, direct assignment, then automatically creates a variable but the scope is global. 2.jquery to obtain the value of the text box: var text =$("# t

  • JQuery Study Notes (1) Environmental structures 2010-06-21

    First, download jQuery Starterkit (from the official website, or csdn download) Open the two documents starterkit.html and custom.js starterkit.html to import these two js, to choose their own is Jquery1.2.6 or 1.3.2 or later <script src="jquery.j

  • jQuery Study Notes - Chinese garbage treatment 2010-07-23

    Solution Summary: Method 1, modify the jQuery source code Changes in the 1.3.2 version of the first 3737 line: s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(value); Modified: s[ s.length ] = encodeURIComponent(key) + '=' + encode

  • JQuery Study Notes (1) 2010-07-26

    Because the project used the jquery, but its not very familiar with it, so start learning Jquery, brought a sharp --- Jquery, start learning, and to the blog to record their own learning process. As the rookie myself, from basic science, the prawns t

  • Jquery Study Notes 2 2010-07-27

    Today, do a little example of a web page there are a few pictures, when the mouse rolls over time, will show the pictures to enlarge, mouse leave, the picture disappears. First of all, ready to html page, the initial page code is as follows <!DOCTYPE

  • Jquery Study Notes 4 2010-07-29

    Today to be a small example, to achieve the check box to select all. Concrete is that, when elected in all elections, check boxes are all selected, and when the cancellation of one button, check box, "Select All" button box also abolished. When

  • Jquery study notes (a) of the common functions 2011-05-18

    1. Checkbox select all, anti-choice, value 8 <SCRIPT LANGUAGE="JavaScript"> 9 <!-- 10 $("document").ready(function(){ 11 12 $("#btn1").click(function(){ 13 14 $("[name='checkbox']").attr("checked"

  • JQuery Study Notes 学习笔记(一) 2014-03-15

    jquery是当前比较流行的js类库,学习它可以实现很多功能. 1. 使用jquery 到jquery.com下载jquery.js当前版本是1.4.2 新建一个html页面 <!DOCTYPE html><BR><html lang="en"><BR><head><BR> <meta http-equiv="Content-Type" content="text/html; c

  • jQuery Study Notes学习笔记 (二) 2015-02-04

    jquery简单选择器的使用方法.jquery中最基本的东西了. 1. 使用class与id选择HTML元素 选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素 $('#myDivId') 选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素. 复制代码 代码如下: $('.myCssClass') 获取或设置元素的值 复制代码 代码如下: var myValue

  • jQuery Study Notes - ajax 2010-07-17

    <div> <h3> <a href="#">A</a> </h3> </div> <div> </div> $(document).ready(function () { $("#letter-a a").click(function () { $.get("jqueryGet", {"term":$(this).attr('hr

  • jQuery source Study Notes 1 2010-03-18

    I do not know what the topic since, casual bar. But I did not feel about each of their API, it is a matter of the document. Than those who will be abandoned at any time, and I also focus on its inherent technology, so I chose to read source code. Sin

  • jQuery source Study Notes 2 2010-03-18

    The foregoing summary, jQuery with the init method to create, and it is not an instance of jQuery.fn.init jQuery examples will be used later jQuery.fn.init. prototype = jQuery.fn; the corresponding ability to jQuery.fn.init.prototype from jQuery.prot

  • Beautiful Soup Study Notes 2010-03-29

    BeautifulSoup is used to do HTML parsing, very powerful, than I have ever seen before JAVA and Python versions of HTML Parser to be much stronger. Favorite BeautifulSoup the DOM selector, very JQuery taste, like JQuery developer should immediately li

  • Oracle Study Notes (3) PLSQL program control structure 2010-03-20

    This is the third chapter of the study notes, study completed after the second chapter of the programming basics, from now to learn Oracle programming the ... ..., I hope that we can give some support ah! This is after all not to work overtime on Sat

  • From scratch to learn jQuery (2) universal selector (switch) 2010-05-26

    From scratch to learn jQuery (2) Universal selector <! - Of information -> Analysis: ziqiu.zhang Source: blog Park Date: 2009-05-05 11:26 Read: 6610 times the original link fonts: Large Medium Small [Add] <! - Page and Profile -> Abstract: Thi