Using the custom Selector

jquery allows us to define custom selectors based on CSS selectors to make our code more concise;

Here are the instructions for using methods and parameters:

1$.expr[': '].mycustomselector=function(element, index, meta, stack) {2     //element-dom Elements3     //index-The indexed value currently traversed in the stack4     //meta-data elements about your selector5     //stack-stacks for traversing all elements6  7     //contains the current element and returns True8     //returns False if the current element is not included9 };Ten   One //Application of Custom selectors: A$ ('. Someclasses:test '). dosomething ();

Here, let's raise a chestnut (yes, that's how chestnuts are lifted up);

We lock the set of elements that contain the "rel" attribute by using a custom selector:
Html:

1 <ul>2   <Li>3     <ahref="#">Without rel</a>4   </Li>5   <Li>6     <arel= "Somerel"href="#">With rel</a>7   </Li>8   <Li>9     <arel=""href="#">Without rel</a>Ten   </Li> One   <Li> A     <arel= "nofollow"href="#">A link with rel</a> -   </Li> - </ul>

Js:

1$.expr[': '].withrel =function(Element) {2   var$ This=$ (element);3   //returns only elements for which the Rel property is not empty4   return($ This. attr (' rel ')! = ");5 };6  7$ (document). Ready (function(){8 //the use of custom selectors is simple, and as with other selectors, returns an element wrapper set9 //you can use the format method for him, such as the following to modify its CSS styleTen$ (' A:withrel '). CSS (' background-color ', ' green ')); One});

In this way, we let the background color of the element that is not NULL for the Rel property turn green. (The 1,2,4 <a> background color turns green, which means that <a> with no rel attribute is selected.) $this. attr (' rel ')! = ' actually returns true)

Note: We can write the logic and the inclusions that we need to implement in the 4th line of code in the JS section. Contains a return of true, and does not contain a return of false.

Here's a very strange phenomenon when we change the 4th line of the JS section to return ($this. attr (' rel ')); only the first 2 and 4 <a> are selected. That is,3 <a>rel= "" are empty elements and also return False (not selected);

Using the custom Selector