The foundation of Jquery Learning

1. Add a CSS Class

$ ("button"). Click (function () {
$ ("#div1"). AddClass ("Important blue");
});

==============================

2. Removal of a class

$ ("button"). Click (function () {
$ ("H1,h2,p"). Removeclass ("Blue");
});

==============================

3. Toggle Class

$ ("button"). Click (function () {
$ ("H1,h2,p"). Toggleclass ("Blue");
});

==============================

4.Jquery Setting CSS Properties

$ ("P"). CSS ("Background-color", "yellow");//Set a property

$ ("P"). css ({"Background-color": "Yellow", "font-size": "200%"});//Set multiple properties ==============================5. Empty empty element $ ("# Div1 "). empty ();//all content in the DIV1 block is removed ==============================

6. Setting the parent class property of an element

$ (document). Ready (function () {
$ ("span"). Parent (). CSS ({"Color": "Red", "border": "2px Solid Red"}); the//parent () method returns the immediate parent element of the selected element

});

$ ("span"). The parents ()//parents () method returns all the parent elements of the selected element

==============================

7. Return the immediate subclass element for each Div

$ (document). Ready (function () {
$ ("div"). Children (). CSS ({"Color": "Red", "border": "2px Solid Red"});
});

==============================

The 8.find () method returns the descendant elements of the selected element, all the way down to the last descendant.

$ ("div"). Find ("span"). CSS ({"Color": "Red", "border": "2px Solid Red"});

==============================

The 9.next () method returns the next sibling element

$ ("H2"). Next (). css ({"Color": "Red", "border": "2px Solid Red"});

==============================

10. Filtering

$ ("P"). Filter (". url");//returns all <p> elements with the class name "url"

==============================

The 11.first () method returns the first element of the selected element

$ ("div p"). First ();//Select the initial <p> element within the first <div> element:

==============================

The 12.last () method returns the last element of the selected element.

$ ("div p"). Last ();

==============================

The EQ () method returns the element with the specified index number in the selected element.

$ ("P"). EQ (1);

==============================

The 14.not () method is the opposite of filter ().

$ ("P"). Not (". url");//returns the P element that is not a class URL

==============================

15. Three methods for manipulating the DOM,DOM = Document Object Model

• Text ()-Sets or returns the text content of the selected element
• HTML ()-Sets or returns the contents of the selected element (including HTML tags)
• Val ()-Sets or returns the value of a form field

Example:

$ ("#btn1"). Click (function () {
Alert ("Text:" + $ ("#test"). Text ());
});

$ ("#btn1"). Click (function () {
$ ("#test1"). Text ("Hello world!");
});

$ ("#btn2"). Click (function () {
Alert ("HTML:" + $ ("#test"). html ());
});

$ ("#btn2"). Click (function () {
$ ("#test2"). HTML ("<b>hello world!</b>");
});

Note: id=test, this piece is text content <p> name: <input type= "text" id= "test" value= "Practice Easyui" ></p>

The value of the input field can be obtained by the JQuery Val () method

$ ("#btn1"). Click (function () {
Alert ("Value:" + $ ("#test"). Val ());//Get value
});

$ ("#btn3"). Click (function () {
$ ("#test3"). Val ("Runoob"); Setting the value
});

==============================

The JQuery attr () method is used to get the property value.

$ ("button"). Click (function () {
Alert ($ ("#runoob"). attr ("href"));//Gets the href attribute of the link in id= "Runoob"

$ ("#runoob"). attr ("href", "http://www.runoob.com/jquery");//Set HREF property
});

==============================

The parameters in 17.text () are callback functions, and the parameters are index and content

$ (document). Ready (function () {
$ ("#btn1"). Click (function () {
$ ("#test1"). Text (function (i,origtext) {
Return "Old text:" + Origtext + "new text: Reming (index:" + i + ")";
});
});
});

The foundation of Jquery Learning