Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the attributes of the jquery method. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Introduction to 1.jquery

What is jquery and what is its function?

Jquery is used to simplify js operations DOM elements

Jquery cannot use DOM's method, DOM can't use jquery's method

Usage characteristics of various selectors:

5 basic selectors: $(". # *, space")

4 relationship selectors: $("space > + ~")

8 basic filter selectors: $(": first/:last/:even/:odd/eq (index) /: gt (index) /: lt (index) /: not (selector)")

Four content filter selectors: $(": contains (text) /: empty/:has (selector) /: parent")

2 kinds of visibility filter selectors: $(": hidden/:visible")

There are 8 kinds of attribute selectors: ("= = [attribute], [attribute=value], [attributekeeper value], [attribute=value], [attribute (" = = [attribute], [attribute=value], [attributeselector value], [attribute^ = value], [attribute ("= = [attribute], [attribute=value], [attributeworthy recent value], [attribute=value], [attribute=value], [attribute*=value], [attributeFilter1] [attrbuteFilter2] = ")

Child element filter selector (4) $(": nth-child (index/even/odd),: first-child,: last-child,: only-child")

Form attribute filter selector (4) ${": enabled/:disabled/:checked/:selected"}

Form selector (11) $(": input/:text/:password/:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden")

2.jquery selector 2.1 basic selector 5 / / basic selector 5 $(".div"); / / class selector $("div"); / / tag selector $("# box"); / / id selector $("*"); / / wildcard selector $("div,p,img") / / merge selector 2.2 relationship selector 4 / / relationship selector 4 $("div p"); / / descendant selector $("div > p"); / / descendant selector $("div+p"); / / direct sibling selector $("div~p") / / simple brother selector 2.3 basic filter selector 8 / / basic filter selector 8 kinds $(": first"); / / first element $(": last"); / / last element $(": not (selector)"); / / excluding selector $(": even") / / pick even rows $(": odd"); / / pick odd rows $(": eq (index)"); / / elements whose subscript is equal to index $(": gt (index)"); / / elements whose subscript is greater than index $(": lt (index)") / / elements with subscript less than index 2.4 content filter selectors 4 / content filter selectors 4 $(": contains (text)"); / / match elements containing given text $(": empty"); / / match all empty elements that do not contain child elements or text $(": has (selector)") / / match contains elements matched by selector $(": parent"); / / match elements with children or text 2.5 visibility filter selector 2 / / visibility filter selector 2 kinds of $(": hidden"); / / match all invisible elements, or type is hidden element $(": visible") / / p matches all visible elements 2.6 attribute filter selectors 8 / / attribute filter selectors 8 $("[attribute]"); / / matches elements with attribute attributes $("[attribute=value]"); / / matches elements whose attribute value equals value $("[attribute filter value]") / / match elements whose attribute values are not equal to value $("[attribute^ = value]"); / / match elements whose attribute values begin with certain values ("[attribute$=value]"); / / match elements whose attribute values end with certain values ("[attribute*=value]"); / / match attribute values to contain elements with certain values $("[attributeFilter1] [attrbuteFilter2]") / / compound attribute filter selector. When multiple conditions need to be met at the same time, use 2.7child element filter selector (4) / / Child element filter selector (4) $(": nth-child (index/even/odd)") / / Select the index child element under each parent element $(": first-child") / / Select the first child element of each parent element $(": last-child"); / / select the last child element of each parent element $(": only-child") / / if an element is the only child element in its parent element, it will be matched 2.8form attribute filter selector (4) / / form attribute filter selector (4) $(": enabled"); / / select all available elements $(": disabled"); / / select all unavailable elements $(": checked") / / Select all selected elements $(": selected"); / select all selected elements 2.9 form selectors (11) / / form selectors (11) $(": input"); / select all input/textarrea/select/button elements $(": text"); / / select all single-line text boxes $(": password") / / Select all password boxes $(": radio"); / / select all checkboxes $(": checkbox"); / / select all check boxes $(": submit"); / / select all submit buttons $(": image"); / / select all image buttons $(": reset") / / Select all reset buttons $(": button"); / select all buttons $(": file"); / / select all upload fields $(": hidden"); / / select DOM operations in all invisible elements 3.jQuery 3.1 text operations / / text operations $("p"). Html (); / equivalent to p.innerHtml in DOM $("p") .text (); / equivalent to p.innerText3.2 value operation in DOM / / value operation $("input:eq (5)") .val (); / / equivalent to input.value; $("input:eq (6)") .val ("aaa") in DOM / / set attribute value 3.3 attribute operation / / property operation $("# box"). Attr ('name'); / / get name attribute $("# box"). Attr (' name', "aaa"); / / add name attribute and value $("# box"). RemoveAttr ('name'); / / remove name attribute $("# box"). Prop (' checked') / / when you get a single attribute, you use prop to get the false and true3.4 class operations / / Class operations $("# box"). Attr ("class", "); / get and set $(" # box "). AddClass (" class ","); / append the class name $("# box"). RemoveClass ("class", "); / remove the class name $(" # box "). RemoveClass () / / remove all class names $("# box"). ToggleClass ("main"); / / switch the main class name $("# box"). HasClass ("main"); / / whether there is a class name 3.5 style operation / / style operation $("# box"). Style operation ("color") / / read the css style value $("# box"). Css ({"propertyname": "value", "propertyname": "value"}); / / set multiple styles at the same time. Children (); / / get the child node $("# box"). Children ("div"); / / get the div child node $("# box"). Prev (); / / find a sibling $("# box"). PrevAll () next to it. / / find all the brothers next to the above $("# box"). PrevAll ("div"); / / find all the div brothers next to the above $("# box"). Next (); / / find a brother next to $("# box"). NextAll (); / / find all the brothers next to $("# box"). NextAll ("div") / / find all the div brothers below $("# box"). Parent (); / find parent node 4.2 filter node / / filter node $("ul"). Find (".a"); / / find $("ul li"). Filter (".a"); / / filter 4.3 create, insert, delete / create, insert, delete var lis=$ ("aaa") / / create / / add parent.append (lis) internally; / / add parent.prepend (lis) to the tail of the parent box; / / add box.after (lis) to the head of the parent box; / / add box.before (lis) after box; / / add / delete DOM element $("ul") .remove () before box / / delete completely, all ul,li delete $("ul") .empty (); / / just empty the contents of ul, ul also exists $("li") .remove (".one") / / remove the 5.jquery event of class= "one" in li / / jquery event / / difference from js / / _ window.onload and $(document) .ready () / / distinction one: the former page is fully loaded and the latter executes after the DOM finishes loading, and the latter takes precedence over the former execution / / distinction 2: when the former occurs many times, the last one overwrites the previous When the latter appears many times, they will merge / / distinguish three: is there an abbreviation: window has no abbreviation. Document has abbreviations: $(). Ready (function () {...}) / $(function () {....}) / / event binding: $(selector) .on (event type, callback function) $("ul li") .on ("click", function () {alert (1)) }); / / jquery and ajax / / get methods $.get (url,data,success (response,status,xhr), dataType); / / post methods $.post (url,data,success (data, textStatus, jqXHR), dataType)

These are the attributes of the jquery method shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.