JavaScript jQuery-10 t-query (t-query, basic selector, T-query object, action method, create element, event binding)

First, T-query

DOM usage Issues

-use DOM to parse and manipulate HTML elements in JavaScript

-The DOM specification specified by the website is not only suitable for parsing and manipulating HTML pages, but also for parsing and manipulating XML files

-Parsing and manipulating element code in HTML pages using the DOM is not concise

-If the implementation logic is too complex, it may also affect the performance of the HTML page

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/74/wKioL1cA-Arg2qGqAABEleyErtU119.png "title=" Web.png "alt=" Wkiol1ca-arg2qgqaabeleyertu119.png "/>

-We can complete the encapsulation of some operations with a custom t-query, simplifying the basic operation

-The T-query function is broadly as follows:

-Create a global object and provide factory functions

-Use the $ (expr) method to simplify DOM fetching of HTML page elements

Expr uses CSS selector mode

-Create a method to simplify the basic operation of the DOM

-Provides a get () method for customizing conversions between objects and Dom objects

Second, the basic selector

Introduction to Selectors

-The selector is a familiar CSS syntax for developers to quickly and easily set up a page

-commonly used selectors in CSS

-ID selector: #id {}

-Class selector:. class{}

-Tag Selector: element{}

- ... ...

ID Selector

-ID Selector: Locates an element on the page with the ID attribute value of the page element

-The Package ID selector is designed to simplify

document.getElementById () method

-Syntax: $ ("#id")

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/78/wKiom1cA-tOT1QlRAABUiNq35yc676.png "title=" Web.png "alt=" Wkiom1ca-tot1qlraabuinq35yc676.png "/>

Class Selector

-Class selector: Locates elements on the page with the class attribute value of the page element

-The wrapper class selector is designed to simplify

Document.getelementbyclassname () method

-Syntax: $ (". ClassName")

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/78/wKiom1cA-0fhdyOZAABcnY648hU581.png "title=" Web.png "alt=" Wkiom1ca-0fhdyozaabcny648hu581.png "/>

Element Selector

-element selector: The element name of the page element to locate elements on the page

-The purpose of encapsulating element selectors is to simplify

Document.getelementbytagname () method

-Syntax: $ ("elementname")

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/74/wKioL1cA_F7j1rreAABUWSpq444796.png "title=" Web.png "alt=" Wkiol1ca_f7j1rreaabuwspq444796.png "/>

Third, T-query object

$ object

-The $ object is actually modeled as $ in jquery to get the elements on the page based on the specified selector

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/78/wKiom1cA_C2xaGbWAAAso22JbcQ351.png "title=" Web.png "alt=" Wkiom1ca_c2xagbwaaaso22jbcq351.png "/>

Tquery Object

-The Tquery object is a custom JavaScript object whose main purpose is to hold one or a set of DOM objects obtained through each selector

-Tquery objects In addition to the ability to save DOM objects, but also have a set of methods to facilitate the operation of these objects

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/74/wKioL1cA_VGzV_1IAAAmF14SIxs033.png "title=" Web.png "alt=" Wkiol1ca_vgzv_1iaaamf14sixs033.png "/>

-Replace array arrays in $ object with custom JavaScript object tquery

-Implements chained operations for Tquery objects

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/78/wKiom1cA_RbRTbEnAABDKz7XlmE592.png "title=" Web.png "alt=" Wkiom1ca_rbrtbenaabdkz7xlme592.png "/>

Tquery Object Conversion DOM Object

-Use custom JavaScript object tquery to encapsulate some simplified dom manipulation methods, but not all of the DOM's operations can be encapsulated

-You need to provide a get () method that allows you to convert a Tquery object back to a DOM object so that you can continue the operation using the DOM method

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/78/wKiom1cA_Yeg2fDVAAAkLFSDXoM654.png "title=" Web.png "alt=" Wkiom1ca_yeg2fdvaaaklfsdxom654.png "/>

Four, t-query operation method

HTML ()/HTML (text)

-HTML (text) to assign the value of the HTML value to the specified T-query element

HTML () to get the HTML value of the specified T-query element

-The HTML () method is to encapsulate the innerHTML attribute

-Syntax: $ (selector). HTML ([HTML])

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/78/wKiom1cA_qyCBf3UAAAyQgHMh7o758.png "title=" Web.png "alt=" Wkiom1ca_qycbf3uaaayqghmh7o758.png "/>650" this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/ 7e/74/wkiol1ca_3rb1jnwaacrbsru8qm950.png "title=" Web.png "alt=" Wkiol1ca_3rb1jnwaacrbsru8qm950.png "/>

Text ()/text (text)

-Text (text) to assign a text value to the specified T-query element

Text () to get the text value of the specified T-query element

-The text () method encapsulates the Textcontent property

-Syntax: $ (selector). text ([text])

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/78/wKiom1cA_1GR32CeAAAzfG_G3LU019.png "title=" Web.png "alt=" Wkiom1ca_1gr32ceaaazfg_g3lu019.png "/>650" this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/ 7e/78/wkiom1ca__7c_ppoaacaraydxh4580.png "title=" Web.png "alt=" Wkiom1ca__7c_ppoaacaraydxh4580.png "/>

Val ()/Val (value)

-Val (value) is used to assign a value to the Value property of the specified T-query element

Val () to get the value of the specified T-query element

-The Val () method is to encapsulate the Value property

-Syntax: $ (selector). val ([value])

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/74/wKioL1cBAT-x8LeCAAAyFzZ-ax8526.png "title=" Web.png "alt=" Wkiol1cbat-x8lecaaayfzz-ax8526.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/ 7e/78/wkiom1cbalyj4w-haab_ftqn_ye132.png "title=" Web.png "alt=" Wkiom1cbalyj4w-haab_ftqn_ye132.png "/>

attr (Name,[value])

-Gets or sets the specified property value of the T-query element

-Equivalent to Dom.setattribute (name,value)/Dom.getattribute (name)

-Syntax: $ (selector). attr ("name", [value])

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/74/wKioL1cBAfHTFxurAABAPHiMi4A271.png "title=" Web.png "alt=" Wkiol1cbafhtfxuraabaphimi4a271.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M00/ 7e/78/wkiom1cbaxtbhu2gaaf7jbqmvxq299.png "title=" Web.png "alt=" Wkiom1cbaxtbhu2gaaf7jbqmvxq299.png "/>

V. T-query creating elements

$ () Create element

-In T-query, we have the flexibility to create DOM elements to provide other elements to use.

-In the DOM, you can use the Document.createelement method, which can be encapsulated as $ () in T-query to create

-Syntax: $ ("<div>content</div>")

That is, create a DIV element with content

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/74/wKioL1cBAs-C9l44AAI5nAa2nrE131.png "title=" Web.png "alt=" Wkiol1cbas-c9l44aai5naa2nre131.png "/>

Vi. T-query Event Bindings

Bind ()

-In T-query, in addition to being able to perform simple operations on elements, you can also perform events on elements such as binding events, removing events, etc.

-Methods in the DOM

Domelem.addeventlistener (eventname,fn,propergation);

-T-query Syntax: $ (selector). bind (EVENTNAME,FN);

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/74/wKioL1cBA8ewTDsEAAC2YwUC1Kg848.png "title=" Web.png "alt=" Wkiol1cba8ewtdseaac2ywuc1kg848.png "/>

Summary: This chapter mainly introduces T-query (T-query, basic selector, T-query object, action method, creation element, event binding)

This article from the "Flying Ants" blog, declined to reprint!

JavaScript jQuery-10 t-query (t-query, basic selector, T-query object, action method, create element, event binding)