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

This article mainly introduces "what are the basic operations of jquery on elements". In daily operations, I believe that many people have doubts about the basic operations of elements in jquery. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "what are the basic operations of jquery on elements?" Next, please follow the editor to study!

Introduction to jQuery

JQuery is a class library of JS, which encapsulates some functions in JS to make DOM operation simple, make the code concise, easy to use, support chain writing, and have good compatibility.

The design idea and main use of jQuery is to select a web page element and then do some operations on it.

What makes jQuery special is that after obtaining the corresponding elements with jQuery, it does not return these corresponding elements, but returns jQuery objects (objects constructed by jQuery), and this object can manipulate these corresponding elements.

The functions that can be realized by jQuery can be realized by JS, and vice versa.

Make window.jQuery = window.$ and abbreviate jQuery to $.

How does jQuery get elements

Just put a selection expression in the constructor $() and get the selected element. The selection expression can be a CSS selector or an jQuery-specific expression.

/ / CSS selector $(document) / / Select the entire document object $('# xxxID') / / Select the element whose ID is xxx $('div.xxxClass') / / Select the element whose Class is xxx $(' input [name = first]') / / Select the element with the class name attribute first / / jQuery unique expression $('aID first') / / Select the first an element $('tr') in the web page : odd') / / Select odd rows of the table $('# myForm:input') / / Select input elements in the form $('div:visible') / / Select visible div elements $(' div:gt (2)') / / Select all div elements Except for the first three $('div:animated') / / select the div element that is currently animated

How jQuery creates elements

You can simply pass the new element into the jQuery constructor.

The new elements created are not automatically inserted into the page, and we also need to explicitly specify where they are inserted into the page.

For example: create a pair of tags

$(function () {let $H2 = $('') / / create element H2 $('body'). Append ($H2) / / put element H2 into body (represented by append as the last child element of body)}

Take div as an example:

$('div'). Prepend ('') / / add an eldest son to div (that is, add to the front) $('div'). Append (selector / jQuery object) / / add a younger son to div (that is, add to the last) $(' xxx'). AppendTo (selector / jQuery object) / / in the child elements of the element selected by the selector, add "xxx" to the end.

How jQuery moves elements

Method 1: move the element directly

$('div') .insertAfter ($(' p')) / / move element div after element p

Method 2: move other elements so that the objective function reaches the position we want

$('p') .after ($('div')) / / put element p before element div

The difference between the two methods: the objects returned are different. The object returned by method 1 is div, and the object returned by method 2 is p.

Different ways to move elements:

InsertAfter () and .after () / / insert elements .insertBefore () and .before () / / outside existing elements from behind, insert elements .appendTo () and .append () / / inside existing elements from the front, insert elements .prependTo () and .prepend () / / inside existing elements from behind, insert elements from the front

How jQuery modifies element attributes

Use attr () to modify element attributes and their contents. Attr is an abbreviation for attribute and an abbreviation for setAttribute&getAttribute in JS. Whether attr is valued or assigned depends on the parameters of the function.

For example:

$('img') .attr (' width','100px') / / assign the attribute 'width'' a value of '100px'

Mode of use:

$(selector) .attr (attribute) / / returns the attribute value of the selected element $(selector) .attr (attribute.value) / / returns the attribute of the selected element & the value $(selector) .attr (attribute,function (index,oldvalue)) / / sets the attribute of the selected element with the function return value & value $(selector). Attr ({attribute1:value,attribute2:value...}) / / sets the attribute & value for one or more selected elements You can modify the values of more than one attribute at a time

Add: the third use above means that the property value is assigned to the property with the return value of the function, which receives and uses the index value and the current property value of the selector. For example:

$('button') .click (function () {$(' img') .attr ('width',function (n img' v) {return vmae50; / / click the button to reduce the picture width by 50})})

Chain Operation of jQuery

After selecting a web page element, perform a series of operations on it, and all the operations can be linked together and written in the form of a chain, which is the chain operation of jQuery.

For example: $('div'). Find (' h4'). Eq (2). Html ('Hello'); this line of code can be split as follows

$('div') / / find the div element. Find (' h4') / / Select the h4 element in it. EQ (2) / / Select the third h4 element .html ('Hello'); / / change its content to Hello

JQuery also provides a back operation. End () so that the result of the operation can be taken a step back.

$('div') .find (' h4') .eq (2) .html ('Hello') .end () / return to the step where all h4 elements are selected. EQ (0) / / select the first h4 element .html (' World') / / change its content to World, and the study of "what are the basic operations of jquery for elements" is over. I hope you can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.