Summary of some features and usage of jQuery_jquery

1. Accurate and simple selection of objects (dom):

Copy code The code is as follows:

$('#element');// Equivalent to document.getElementById
("element")
$('.element');//Class
$('p' );//html tag
$("form > input");//sub-object
$("div,span,p.myClass");//select multiple objects at the same time
$ ("tr:odd").css("background-color", "#bbbbff");//
interlaced background of the table
$(":input");//Form object
$ ("input[name='newsletter']");//Specific form object

2. The application of object functions is simple and unrestricted:

Copy code The code is as follows:

element.function(par);
$("p.surprise" ).addClass("ohmy").show("slow")...

3. Operations on selected objects (including styles):

Copy code The code is as follows:

$("#element").addClass("selected");/ /Add style to object
$('#element').css({ "background-color":"yellow", "font
-weight":"bolder" });//Change object style
$("p").text("Some new text.");//Change the object text
$("img").attr({ src: "test.jpg", alt: "Test Image "
});//Change the object text
$("p").add("span");//Add a label to the object
$("p").find("span" );//Find the corresponding element inside the object
$("p").parent();//The parent element of the object
$("p").append("Hello< /b>");//Add content to the object

4. Support aJax, support file format: xml/html/script/json/jsonp

Copy code The code is as follows:

$("#feeds").load("feeds.html"); //Import static page content into the corresponding area
$("#feeds").load("feeds.php", {limit: 25}, function()
{alert("The last 25 entries in the feed have been
loaded");});//Import dynamic content

5. Support for events:

Copy code The code is as follows:

$("p").hover(function () {
$(this).addClass( "hilite");//When the mouse is placed
}, function () {
$(this).removeClass("hilite");//Remove the mouse
});//When the mouse is placed Different effects of going up and moving away (automatically loop all p objects
)

6. Animation:

Copy code The code is as follows:

$("p").show("slow");//Hidden object (slow gradient)
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em"
}, 1000 );
});//Dynamic changes in width, height and font after mouse click

7. Extension:

Copy code The code is as follows:

$.fn.background = function(bg) {
return this.css('background', bg);
};
$(#element).background("red");