Little jquery knowledge

Source: Internet
Author: User

// Click the bullet box
$ (Document). Ready (function (){
$ ("Div"). Click (function (){
Alert ("Hello world! ");
})
})
// Add a style to the page load and click Div to remove the style.
$ (Document). Ready (function (){
$ ("Div"). addclass ("AAA ");
$ ("Div"). Click (function () {$ (this). removeclass ("AAA ")});
}
)
// When you click an element whose ID is div1, set a style for this element.
$ (Document). Ready (function (){
$ ("# Div1"). Click (function (){
Certificate (this).css ("border", "5px dashed red ");
})
});
// When you click an element whose ID is div1, set a style for the element and show the style value (5px dashed red) in a pop-up box)
$ (Document). Ready (function (){
$ ("# Div1"). Click (function (){
Certificate (this).css ("border", "5px dashed red ");
Alert(%(this%.css ("border "));
})
});
// When you click an element whose ID is div1, the style is changed.
// The border-width border-style border-color attributes must be written separately.
$ (Document). Ready (function (){
$ ("# Div1"). Click (function (){
((This).css ({color: "red", Background: "blue "});
})
});
$ (Document). Ready (function (){
$ ("# Div1"). Click (function (){
Certificate (this).css ({"border": "5px dashed red", "background-color": "blue "});
})
});
// Change the width and height of an element whose ID is div1.
$ (Document). Ready (function (){
$ ("# Div1"). Click (function (){
$ (This). Height ("100px ");
$ (This). Width ("150px ")
})
});
// Set to fade in and fade out fadeout fade out fadeto change transparency fadein fade in
// The first div1 is the trigger ID, and the second div1 is the ID of the layer to be scaled in and out.
// The onclick event is click onmouseover. The event is Mouseover.
$ (Document). Ready (function (){
$ ("# Div1"). Click (function (){
$ ("# Div1"). fadeout ("slow", function () {alert ("is this layer slowly disappearing! ")});
})
$ ("# Div2"). Mouseover (function (){
$ ("# Div2"). fadeto ("slow", 0.5, function () {alert ("is the transparency of the layer below changed to 50%! ")});
})
$ ("# Div3"). Click (function (){
$ ("# Div31"). fadein ("slow", function () {alert ("is this layer slowly emerging! ")});
})
});
// Display the sliding effect
$ (Document). Ready (function (){
$ ("# Div3"). Click (function (){
$ ("# Div2"). slideup ("normal", function () {alert ("slide hidden! ")});
$ ("# Div31"). slidedown ("normal", function () {alert ("slide display! ")});
$ ("# Div31"). slidetoggle ("normal", function () {alert ("slide hidden when displayed, slide hidden when hidden ")});
})
});
// Some attribute selectors
First, select e [@ ATTR] based on the attributes.
$ ("[@ Title]"). Click ()..........
That is, select all elements with a title attribute in the element.
<Li class = "aaaa" Title = "TTT"> li-1 </LI>
<Li Title = "fffff"> li-2 </LI>
<Div class = "aaaa" Title = "TTT"> li-1 </div>
<Div Title = "fffff"> li-2 </div>
$ ("Div [@ title]"). Click ()..........
Select all elements with title under all Div labels
<Div class = "aaaa" Title = "TTT"> li-1 </div>
<Div Title = "fffff"> li-2 </div>

Second, select e [@ ATTR = Val] based on the attribute value.
$ ("Div [@ Title = TTT]"). Click ()................
Select all the elements under the DIV whose title attribute is equal to TTT.
<Div class = "aaaa" Title = "TTT"> li-1 </div>
If it is $ ("[@ Title = TTT]"). Click ()................
All elements whose attribute title is ttt
<Li class = "aaaa" Title = "TTT"> li-1 </LI>
<Div class = "aaaa" Title = "TTT"> li-1 </div>

Third, select e [@ ATTR ^ = Val] based on the Start Letter of the attribute value.
$ ("Div [@ title ^ = T]"). Click ()................
All attribute title values under all DIV elements start with T

Third, select e [@ ATTR $ = Val] based on the Start Letter of the attribute value.
$ ("Div [@ title $ = T]"). Click ()................
All attribute title values under all DIV elements end with T

Third, select e [@ ATTR * = Val] based on the characters in the attribute.
$ ("Div [@ title * = T]"). Click ()................
All attribute title values under all DIV elements are all elements that contain t

Third, select e [@ ATTR = Val] [@ ATTR = Val] based on multiple attributes.
$ ("Div [@ Title = TTT] [@ class = AAAA]"). Click ()................
All attribute title values under all DIV elements are equal to TTT and the attribute class is equal to AAAA.

// Load usage when the single-click id_div3's element, the content of myload.html will be loaded into the layer with the ID of div31 (only loaded into the DIV, will overwrite the content of the original Div)
$ (Document). Ready (function (){
$ ("# Div3"). Click (function (){
$ ("# Div31"). Load ("myload.htm ");
})
});

$ ("Body"). Load ("test.html # A"); // load to the page

// Load usage when the single-click id_div3's element, load the content of the element whose ID is mydiv in myload.html to the layer whose ID is div31
$ (Document). Ready (function (){
$ ("# Div3"). Click (function (){
$ ("# Div31"). Load ("myload.htm # mydiv ");
})
});

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.