JQuery events --- filter selector & amp; form Selector

JQuery events --- filter selector & form Selector
Filter selector for short: filter. It is actually a selector, and this selector is similar to the pseudo class in CSS3 (http://t.mb5u.com/css3/), can make does not support CSS3 of the lower version of the browser can also support. Like regular selector, jQuery provides many unique filters to make it easier for developers to use. 1. The basic filter filters mainly filter the required DOM elements through specific filtering rules. Similar to the syntax of pseudo classes in CSS: Start with a colon. Copy code 1 $ ('li: first'background .css ('background', '# ccc'); // The first li element 2 3 $ ('li: last).css ('background ', '# ccc'); // The Last li element 4 $5 ('li: not(.red00000000.css ('background', '# ccc '); // elements other than the red class 6 $7 ('li: even'background .css ('background', '# ccc '); // elements with an even number of indexes 8 9 $ ('li: odd).css ('background', '# ccc'); // elements with an odd number of indexes 10 11 $ ('li: eq(22.16).css ('background', '# ccc'); // specify the index value of the element 12 $ ('li: gt(2)'background .css ('background', '# ccc '); // elements greater than the index value 14 15 $ ('li: lt(2'' background .css ('background ',' # ccc '); // elements smaller than the index value 16 17 $ (': header'background .css ('background ', '# ccc'); // All h1 ~ H6 element copy code Note: The focus filter must be an element in the initial state of the webpage that has been activated for element acquisition. Instead of clicking the mouse or clicking the Tab and keyboard to activate it. 1 $ ('input '). get (0 ). focus (); // initialize and activate an element focus 2 $3 (': focus'background .css ('background', 'red '); // jQuery, the element with focus, provides a dedicated method for the most commonly used filter. It has achieved the performance and efficiency mentioned above: Copy code 1 into ('li'{.eq(2}.css ('background ', '# ccc'); // The third li element, with a negative number starting from 2 3 then ('li'{.first().css ('background', '# ccc '); // The first li element (4 5) ('li'hangzhou.last().css ('background', '# ccc'); // the last element of element li 6 7 then ('li'hangzhou.not('.red'hangzhou.css ('background ', '# ccc'); // element li does not contain elements whose class is red. Note: f When two sets of filters and methods, irst,: last, first (), and last (), have the same elements, first implements the first child element of the first parent element, last implements the last child element of the last parent element. Therefore, to specify the parent element, specify 1 $ ('# box li: last'background .css ('background', '# ccc '); // The Last li2 3 // or 4 5 $ ('# box liyun.last().css ('background',' # ccc ') in the element whose id is # box); // same as above. content Filter the content filter rules mainly include child elements or text content. Copy code 1 $ ('div: INS ins ("dream.com" }'background .css ('background', '# ccc'); // select the element 2 3 $ containing the dream.com text ('div: empty'background .css ('background ',' # ccc '); // select the div element 4 5 $ ('ul: has(.red+'background .css ('background ', '# ccc'); // select ul element 6 7 with red class (': parent'background .css ('background', '# ccc '); // jQuery provides an has () method to improve the performance of the has filter by selecting an element that contains child elements or text. Optional values ('ul'{.has('red'}.css ('background', '# ccc '); // select the sub-element containing the ul element whose class is red. JQuery provides a method similar to parent (). However, this method does not select elements containing child elements or text, but obtains the parent element of the current element, returns an element set. 1) ('li'}.parent().css ('background ',' # ccc '); // select the parent element 2 3 of the current element ('li'}.parents().css ('background',' # ccc '); // select the parent element of the current element and the ancestor element 4 5 then ('li'}.parentsuntil('div'}.css ('background ',' # ccc '); // select the parent element of the current div to stop 3. the visibility filter selects the corresponding elements based on the visibility and invisibility of the elements. 1 $ ('P: hidden ). size (); // element p hidden element 2 3 $ ('P: visable '). size (); // element displayed by element p Note: The hidden filter generally contains the following content: CSS style: display: none. The input form type is type = "hidden" and visibility: the elements of hidden. 4. sub-element filter the Filtering Rule of sub-element filter gets the corresponding elements through the relationship between the parent element and sub-element. Copy code 1 $ ('li: first-child'hangzhou.css ('background', '# ccc'); // The first li element of each parent element 2 3 $ ('li: last-child'hangzhou.css ('background', '# ccc'); // The Last li element of each parent element is 4 $ ('li: only-child'hangzhou.css ('background', '# ccc '); // each parent element has only one li element 6 $ ('li: nth-child(odd1_'hangzhou.css ('background', '# ccc '); // an odd number of li elements for each parent element $8 9 ('li: nth-child(even='hangzhou.css ('background', '# ccc '); // each parent element has an even number of li elements 10 11 $ ('li: nth-child(2)'background .css ('background ',' # ccc '); // Copy Code 5 from the second li element of each parent element (index starts from 1. other methods jQuery provides some common methods in selector and filter to facilitate flexible use during development. Copy code 1 $ ('. red '). is ('lil'); // true, selector, checks whether the element whose class is red is li 2 3 $ ('. red '). is ($ ('lil'); // true, jQuery object set, same as 4 5 $ ('. red '). is ($ ('lil '). eq (2); // true, single jQuery object, same as 6 7 $ ('. red '). is ($ ('lil '). get (2); // true, DOM object, same as 8 9 $ ('. red '). is (function () {// true, method, same as 10 11 return $ (this ). attr ('title') = 'list 3'; // You Can Customize various judgments 12 13}); 14 15 $ ('lil '). eq (2 ). hasClass ('red'); // the same as is, except that class16 17 $ ('lil') can be passed '). Slice(0, 22.16.css ('color', 'red'); // The first three lies are changed to red (slice (start, end) contains start and does not contain end). Note: this parameter has the same passing method and JavaScript slice method, for example: slice (2), from the third to the last selected; slice (2, 4), the third and fourth are selected; slice (0,-2), from the last third position, select all forward; slice (2,-2), the first two and the last two are not selected. Copy code 1 $ ("div "). find ("p "). end (). get (0); // returns div's native DOM 2 3 $ ('div '). contents (). size (); // returns the number of subnodes (including text) 4 5 bytes ('li'character .filter('.red'character .css ('background ',' # ccc '); // select elements 6 7 $ ('lil') whose class of li is red '). filter ('. red,: first,: last'background .css ('background ',' # ccc '); // adds a selection (separated by commas) 8 9 // the special requirement function returns 10 11 $ ('lil '). filter (function () {12 13 return $ (this ). attr ('class') = 'red' & $ (this ). attr ('title') = 'list 3'; 14 15 )).Css ('background', '# ccc'); 16 17. Copy the code form selector form as a special element in HTML. The operation methods are diverse and special, developers can not only use the conventional selector or filter, but also use the selector and filter specifically provided by jQuery for the form to accurately locate the form element. 6. Regular selector we can use id, class, and element name to obtain form fields. If it is a form element, it must contain the name attribute and can be precisely located using the attribute selector. Copy code $ ('input '). val (); // locate the element name. By default, the value of the first input is obtained $ ('input '). eq (1 ). val (); // same as above, get the second $ ('input [type = password] '). val (); // select the password field $ ('input [name = user] '). val (); // copy the code by selecting the field named "user". The usage of id and class is similar. You can also use the attribute selector to precisely locate the code, we will not repeat it here. For other element names in the form, such as textarea, select, And button, the principle is the same and there are no duplicates. 7. Although the regular selector can be used to locate the elements of a form, the form selector sometimes cannot meet the flexible and changing needs of developers. Therefore, jQuery provides a dedicated selector for the form. Copy code 1 $ (': input '). size (); // get all form field elements 2 3 $ (': text ). size (); // obtain the elements of a single line text box (': password '). size (); // obtain the password column element 6 7 $ (': radio ). size (); // get a single shard element $8 9 (': checkbox ). size (); // get the check box element 10 11 $ (': submit ). size (); // obtain the submit button element 12 13 $ (': reset ). size (); // get reset button element 14 $15 (': image ). size (); // element of the get image button 16 17 $ (': file ). size (); // get file button element 18 19 $ (': button ). size (); // get the normal button element 20 21 $ (': Den den ). size (); // obtain the hidden field element and copy the code. Note: Some selectors are returned element sets. If you want to obtain a specified element, you 'd better combine them with attribute selectors. For example: $ (': text [name = user]). size (); // obtain Element 8 of the single-line text box name = user. form filter jQuery provides four form filters, which are used to filter form fields. Copy code 1 $ (': enabled '). size (); // get available element 2 3 $ (': disabled ). size (); // get the unavailable element 4 $ (': checked ). size (); // obtain the selected elements of a single choice and check box, 6 $ (': selected ). size (); // obtain the selected element from the drop-down list