jquery Selector Full solution-base Selector

ID Selection:

Based on element ID selection, $ ("Layer1") selects an element with ID Layer1

<div id="layer1" style="width: 300px;height: 300px;border: 1px solid red"></div>alert($("#layer1").height());

Element

The element selector is a component for searching. Label name pointing to the DOM node

<a href=""></a><a href=""></a><a href=""></a>alert($("a").length);

. class Selector

The. Class selector is a class that is used to search based on the given class-matching element. An element can have more than one class, as long as there is a match that can be matched to

<input type="text" id="ID" value="根据ID选择" /><a>根据元素名称选择</a><input type="text" class="classname" value="根据元素css类名选择" />alert($("#ID").val() +  "  " + $("a").text() + "    " + $(".classname").val());

Selector1,selector2,selectorn Selector

This type of selector selector will be returned together with the elements that each selector matches to. You can specify any number of selectors and merge the matched elements into one result

Hierarchy Selector

Ancestor descendant Selector

It means matching all descendant elements under a given ancestor element, ancestor as a parameter represents any valid selector, and descendant is used to match the selector of an element, and it is the descendant of the first selector.

<form>    <label>Name:</label>    <input name="name" />    <fieldset>        <label>Newsletter:</label>        <input name="newsletter" />    </fieldset></form>alert($("form input").length)

Parent>child Selector

The Parent>child selector represents the matching of all child elements under the given parent element. The two parameters represent the following: the parent represents any valid selector, the child is used to match the element's selector, and it is the sub-element of the first selector.

<div id="n1">    <p id="n2" class="test">        <span id="n3" class="a">Hello</span>    </p>    <p id="n4" class="detail">        <span id="n5" class="b codeplayer">World            <span id="n6" class="c">365mini.com</span>        </span>    </p></div>alert($("p > span ").length + "  " + $("p > span > span").length);

Prev+next Selector

The function of such a selector is to match all next elements immediately following the Prev element. Each of the two parameters represents the following: prev represents any valid selector; next represents a valid selector and immediately follows the first selector.

<form>    <label>Name:</label>    <input name="name" />    <fieldset>        <label>Newsletter:</label>        <input name="newsletter" />    </fieldset></form>alert($("label + input").length)

Prev ~ siblings Selector

The prev ~ Siblings selector represents all siblings elements that follow the Prev element. The two parameters represent the following: prev represents any valid selector; siblings represents a selector, and it acts as the peer of the first selector.

<div id="divTest">    <input type="text" value="投资" />    <input id="next" type="text" />    <input type="text"  value="担当" />    <input type="text" title="学习" value="学习" />    <a>1</a>    <a>2</a></div>alert(jQuery("#next~[title]").val());

jquery Selector Full Solution-Basic filter

<div id="divTest">    <ul>        <li>基本过滤选择器</li>        <li>基本过滤选择器</li>        <li>基本过滤选择器</li>        <li>基本过滤选择器</li>        <li>基本过滤选择器</li>        <li>基本过滤选择器</li>        <input type="radio" value="学习" checked="checked" />        <input type="radio" value="不学习" />    </ul></div><input type="button" value="li_first" id="one"/><input type="button" value="li_last" id="two"/><input type="button" value="not(selector)" id="three"/><input type="button" value="li_even" id="four"/><input type="button" value="li_odd" id="five"/><input type="button" value="li_eq(index)" id="six"/><input type="button" value="li_gt(2)" id="seven"/><input type="button" value="li_:lt(1)" id="leng"/>

First

Match the first element found

$("#one").click(function (){    $("li:first").css("background","pink");});

Last

Match the last element found

$("#two").click(function (){    $("li:last").css("background","pink");});

Not (selector)

Removes all elements that match a given selector

$("#three").click(function (){alert($("input:not(:checked)").val())});

Even

Matches all elements with an even number of index values, counting from 0

$("#two").click(function (){    $("li:even").css("background","pink");});

Odd

Matches all elements with an odd index value, counting from 0

$("#two").click(function (){    $("li:odd").css("background","pink");});

EQ (Index)

element that matches a given index value note: Index counts from 0

$("#two").click(function (){    $("li:eq(3)").css("background","pink");});

GT (Index)

Match all elements that are greater than the given index value note: Index counting starts from 0

$("#two").click(function (){    $("li:gt(3)").css("background","pink");});

LT (Index)

Select elements with index less than N in result set Note: Index counts from 0

$("#two").click(function (){    $("li:lt(3)").css("background","pink");});

jquery Selector Full Solution-content Filter

<div id="divTest">    <ul>        <li>hyip投资</li>        <li>hyip</li>        <li><a href=""></a></li>        <li>内容过滤器</li>        <li>hyip内容过滤器</li>    </ul></div><input type="button" value="li_contains(text)" id="one"/><input type="button" value="li_empty+li" id="two"/><input type="button" value="li_has(selector)" id="three"/>

Contains (text)

Matches the element containing the given text

 $("#one").click(function (){    $("li:contains(‘hyip‘)").css("background","pink");});

Empty

Matches all empty elements that do not contain child elements or text

 $("#one").click(function (){    $("li:empty+li").css("background","pink");});

: Has (selector)

Matches the element that contains the element that the selector matches

 $("#one").click(function (){    $("li:has(a)").css("background","pink");});

Visibility Filter Visibility Filters

<ul>    <li>可见1</li>    <li style="display:none;">不可见2</li>    <li style="display:none;">不可见<3/li>    <li>可见4</li></ul>

Hidden

An element that matches itself or the parent class does not occupy space in the document. If you use the CSS visibility property so that it does not display but occupies a bit, do not enter hidden

$("#one").click(function (){ alert($("li:hidden").length); });

Visible

Match all visible elements

$("#one").click(function (){ alert($("li:visible").length); });

jquery Selector Full Solution-attribute filter

<input type="text" id="yi" name="hyipinvest" value="hyip投资" /><input type="text" name="investhyip" value="投资hyip" /><input type="text" name="google" value="HYIP" /><button id="one">点击</button>

[Attribute]

Find all the DIV elements in the input tag that contain the id attribute

$("#one").click(function (){ $("input[id]").css("background","pink"); });

[Attribute=value]

Find all values with name Hyipinvest

$("#one").click(function (){ $("input[name=‘hyipinvest‘]").css("background","pink"); });

[Attribute!=value]

Find values in all input with name not Hyipinvest

$("#one").click(function (){ $("input[name!=‘investhyip‘]").css("background","pink"); });

[Attribute^=value]

Find all input values with name beginning with HYIP

$("#one").click(function (){ $("input[name^=‘hyip‘]").css("background","pink"); });

[Attribute$=value]

Find all input values with name ending in Hyip

$("#one").click(function (){ $("input[name$=‘hyip‘]").css("background","pink"); });

[attribute=value]

Find all input values in name containing OO

$("#one").click(function (){ $("input[name*=‘oo‘]").css("background","pink"); });

jquery Selector Full Solution-child element filter

HTML consists of layers that are nested together, and because some labels need to be handled separately, how to pick one or some specific nested tags becomes a problem in the program. jquery provides a child element filter selector that solves this problem. It includes 4 selectors, which will be explained in detail below.

(1): Nth-child selector.

(2): First-child,: Last-child selector (two kinds).

(3): Only-child selector.

There is not much difference between the sub-element filter and the basic filter above, here I do not give an example.

jquery Selector full Solution-form selector--form filter

<form id="form1" action="#">    <input type="button" value="Button"/><br/>    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>    <input type="file" /><br/>    <input type="hidden" /><div style="display:none">test</div><br/>    <input type="image" /><br/>    <input type="password" /><br/>    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>    <input type="reset" /><br/>    <input type="submit" value="提交"/><br/>    <input type="text" /><br/>    <select><option>Option</option></select><br/>    <textarea rows="5" cols="20"></textarea><br/>    <button>Button</button><br/></form>

 $ (document). Ready (function () {var $alltext = $ ("#form1: Text");        var $allpassword = $ ("#form1:p assword");        var $allradio = $ ("#form1: Radio");        var $allcheckbox = $ ("#form1: checkbox");        var $allsubmit = $ ("#form1: Submit");        var $allimage = $ ("#form1: Image");        var $allreset = $ ("#form1: Reset"); var $allbutton = $ ("#form1: Button");        <input Type=button/> and <button ></button> can match var $allfile = $ ("#form1: File"); var $allhidden = $ ("#form1: Hidden");        <input type= "hidden"/> and <div style= "Display:none" >test</div> can all match.        var $allselect = $ ("#form1 select");        var $alltextarea = $ ("#form1 textarea");        var $AllInputs = $ ("#form1: Input");        var $inputs = $ ("#form1 input");  $ ("div"). Append ("with" + $alltext. Length + "single (: text Element) <br/>"). Append ("with" + $allpassword. Length + " (:p assword Element) <br/>. Append ("with" + $allradio.Length + "single (: Radio Element) <br/>"). Append ("with" + $allcheckbox. Length + "single (: checkbox Element) <br/>") . Append ("with" + $allsubmit. Length + "single (: Submit Element) <br/>"). Append ("with" + $allimage. Le                Ngth + "(: Image Element) <br/>"). Append ("with" + $allreset. Length + "single (: Reset Element) <br/>") . Append ("with" + $allbutton. Length + "single (: Button Element) <br/>"). Append ("with" + $allfile. Length + " (: File Element) <br/> "). Append (" with "+ $allhidden. Length +" single (: Hidden Element) <br/> "). Append ("with" + $allselect. Length + "(select Element) <br/>"). Append ("with" + $alltextarea. Length + "x" (Te Xtarea element). Append ("form has" + $inputs. Length + "input" element. <br/> "). Append (" A total of "+ $AllInputs. Length +" (: input) element. <br/> "). CSS (" Color "," Red ") $ (" form "). Submit (function () {return false; });    return false; Cannot commit. });

 

jquery Selector Full solution-base Selector