jquery QuickStart-manipulating element properties and styles

We introduced DOM objects in detail when we were learning JavaScript. As you can tell from the DOM tree, the operation of the DOM mainly includes the attributes, contents, values, and CSS of the elements.

I. Operation of element attributes

In JQuery, you can perform get, set, delete operations on the attributes of an element, you can perform get and set operations on element properties through the attr () method, and the Removeattr () method can easily delete a specified property.

1. Get element attributes

JavaScript script <script type= "Text/javascript" >    $ (function () {        var Stralt = $ ("img"). attr ("src");//attribute value 1        Stralt + = "<br/><br/>" + $ ("img"). attr ("title");//attribute value 2        $ ("#divAlt"). HTML (stralt);//Display in page    }) </script>//content<div id= "Divalt" ></div>    

　　

2. Set element properties

Normal properties:

$ ("img"). attr ("src", ' images/img01.jpg '); Set the SRC attribute value of img to: images/img01.jpg

property is a function:

$ ("img"). attr ("src", function () {

Return "Images/img0" +math.floor (Math.random () * 2 + 1) + ". jpg"

});

3. Delete element attributes

$ ("img"). Removeattr ("src");

Ii. Getting and setting elements

1. Get and set element content (HTML, text)

2. Get and set element values (value)

$ (' #div1). Val () #获取value

$ (' #div1). Val (value1) #设置value

$ ("select"). val (). Join (","); #获取select的value

<script type= "Text/javascript" >$ (function () {$ ("select"). Change (function () {//Set list box Change Event// Gets the value of all options selected by the list box var Strsel = $ ("select"). val (). Join (","); $ ("#p1"). HTML (Strsel); Displays the value of all options selected by the list box}) $ ("input"). Change (function () {//Set text box Focus event var strtxt = $ ("input"). val ();//Gets the value of the text box ("#p2"). htm L (strtxt); Displays the value entered by the text box}) $ ("input"). focus (function () {//Set text box Focus event $ ("input"). Val (""); Empty the value of the text box}) </script>

　　

Three, Element style operation

1. Set CSS Properties

CSS (name, value)

<script type= "Text/javascript" >$ (function () {$ ("P"). Click (function () {$ (this). CSS ("Font-weight", "bold");//Word Body Bold $ (this). CSS ("Font-style", "Italic"); Italic $ (this). CSS ("Background-color", "#eee");//Add background color}) </script>

　　

2. Add, delete, switch class

AddClass (class0 Class1 ...)

Removeclass (class0 Class1 ...)

Toggleclass (CLASS0) #有class0则去掉, not added

Iv. internal insertion of page element operations

1, append ($div); Add an Element

Preappend ($DIV);

var $div = $ ("<div title= ' jQuery idea ' >write less do more</div>"); $ ("Body"). Append ($div);

　　

2. Append (function (index, HTML))//Add an element to the function as a parameter

Preappend (function (index, HTML))

<script type= "Text/javascript" >$ (function () {        $ ("div"). Append (rethtml);//Insert content    function rethtml () {        var str = "<b>write less do more</b>";        return str;    }}) </script>    

　　

3, $ ("span"). Appentto ($ ("div"));//Appends the selected element to another specified collection of elements. Make the span element best in the div element.

Preappentto ($ ("div"));

External insert

Copy node

Clone ()//Simple copy

If you need to copy all the behavior of the element at copy time, you can do so by using the method clone (True), which is in the form: Clone (TRUE)//overall copy

ReplaceWith () and ReplaceAll ()

<script type= "Text/javascript" > $ (Function () {$ ("#Span1"). ReplaceWith ("<span title= ' replacewith ' > Tao &l　　　　T;/span> "); $ ("<span title= ' replaceall ' >[email protected]</span>"). ReplaceAll ("#Span2");}) </script>

　　

Package element

<script type= "Text/javascript" >$ (function () {    $ ("P"). Wrap ("<b></b>");//The font of all P-tags is bold, wrapped outside the element    $ ("span"). Wrapinner ("<i></i>");//All span tags changed to italic, wrapped inside elements}) </script>

　　

deleting and emptying elements

Remove ()//delete element

Empty ()//empties the child elements inside the node

V. Traversal of elements

1. each ()

<script type= "Text/javascript" >$ (function () {    //traversal of each IMG element    $ ("img"). each (function (index) {        // The title property of the element is set according to the parameter index        this.title = "First" + index + "Picture of the landscape, alt content" + This.alt;    })}) </script>    

Reference URL:

http://www.css88.com/jqapi-1.9/

jquery QuickStart-manipulating element properties and styles