In those years, I was still learning jquery study notes_jquery

It turns out that Jquery is a library written in javascript. It provides us with many commonly used methods. These methods can be compatible with multiple browsers and can achieve good animation effects. Let’s take a look at the study notes from those years. Bar
1. $ sign
1. Selector
You can select html tags, ID, Class, etc.
as follows:

Copy the code The code is as follows:

　

2. Get the attributes in the tag

Copy code The code is as follows:

var sTitle = $("p>span").attr("Title"); //Get the attribute value in the tag
$("p>a" ).text(sTitle);//Set the value. If you use text() to get the value, it will be the text obtained, excluding html

3. Set attributes

Copy code The code is as follows:

$("button:gt(0)").attr("disabled", "disabled "); //Get the buttons after the first button, and then set their disable attribute to unavailable. Without this attribute, undefined will be returned
$("img").attr({ src: "test.jpg" , alt: "Test Image" });

3.1. Delete attributes
$("img").removeAttr("src");
　4. Modify Class, if If it exists (does not exist), delete (add) a class.

Copy code The code is as follows:

$(
function() {
$("div>p").mouseover(
function() {
$(this).toggleClass("HightLight");//Modify the style class
}
);
}

4.1. Remove Class
$("p").removeClass("selected");
4.2. Add Class
$("p").addClass( "selected");
5. Copy the picture
　$("img:eq(0)").clone().appendTo($("p")); //Get the first picture
　6. Event binding, you can bind multiple same events

Copy code The code is as follows:

$(function() {
$("img").bind("click", function() { //Binding event
alert("Click! 1");
});
　$("img").bind("click", function() { //Binding event
alert("Click! 2");
});
})

7. Remove event

Copy code The code is as follows:

$(function() {
$("input[type=button]").click(function() {
$("img").unbind("click", eventImg );//unbind to remove the method
alert("Remove event!");
});
})

8. Showing and hiding elements

Copy code The code is as follows:

Fade in and fade out effect: Upload a time parameter in the show(), and hide() methods to get the fade in and fade out effect

Copy code The code is as follows:

Copy code The code is as follows:

---

---

As follows:

Copy code

The code is as follows: $("#Button3").click( function() { $("#imgs").fadeIn(10000); });

$("#Button4").click(function() {

$("# imgs").fadeOut(5000);
});


2. Slide effect - implemented by slideUp() and slideDown() methods

Copy code

The code is as follows: $("#Button1").click(function() { $("#imgs ").slideUp(10000); });

$("#Button2").click(function() {

$("#imgs").slideDown(5000);
});


3. Jquery function function
1. Browser detection $.browser, as follows:

Copy code

The code is as follows: if ($.browser.msie) return alert("IE"); if ($.browser.safari) return alert( "safari"); if ($.browser.mozilla) return alert("mozilla");

if ($.browser.opera) return alert("opera");

2. The box model $.boxModel is as follows:
alert($.boxModel ? "standard" : "IE");
3. Processing javascript objects $.each(arr,function) //For arrays Each object is processed with the function function
as follows:

Copy the code

The code is as follows: var aArr = ["one", "two", "three"]; $.each(aArr, function(iNum, value) { alert(iNum "," value);

}) ;

$.grep(Arr,funtion(value)):Filter
Example:

Copy code

The code is as follows: var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var DemoArr = $.grep(aArray , function(value) { return value > 4;

});

document.write(DemoArr.join());
　$.map(Array,function(value,index) )


This article is all derived from the study notes of those years.
Summary
There are many functions in the Jquery library, and some, especially Ajax in Jquery, are very important. This article recalls the days of learning Jquery in those years.