First, the operation of the class
1. Add a class: addClass()
$("div").click(function(){ $(this).addClass("current") })
2. Delete class: removeClass()
3. Toggle class: toggleClass()
If there is such a class name, add it. If there is no such class name, delete it.
2. Get the index number
3. Get elements
1. Label
$("div")
$("img")
2, class name, id name
$("className")
$("idName")
3. Brother Elements
siblings()
4. Child elements
children()
5. Parent element
parent()
ancestor element
parents()
6. Index
Get the index number: index()
selected order eq()
7. Chain programming
$(this).addClass("current").siblings().removeClass("current");
4. Jquery effect
1. Show hide
show()
hide()
$(".tab_con .item").eq(index).show().siblngs().hide()
toggle()
2. Swipe
slideDown()
slideUp()
slideToggle()
3. Fade in and out
fadeIn() fade in
$("div").fadeIn(1000)
fadeOut() fade out
$("div").fadeOut(1000)
fadeTogle(): fade in and out switch
fadeTo(): Modify the transparency method, the speed and transparency must be written
4. Custom animation
animate()
$("button").click(function(){ $("div").animate({ left: 500, top: 300 }) })
5,stop
The solution to the scene: the mouse slides faster, and the previous animation has not ended, and the next animation starts
Animations have queueing issues.
$(this).children("ul").stop().slideToggle()
stop must be written before the animation
Five, get Jquery attributes
1. Original properties
$("a").prop()
2. Custom attributes or new attributes in h5
$("a").attr()
3. Data cache
4. Select the box to select the attribute checked
$("input").prop("checked",true)
Get checked box
$("input:checked")
Get the length of the selected select box
$("input:checked").length
Six, get Jquery text value
$("div").html() $("div").text() $("input").val()//get form value
Seven, element operation
Traverse, create, add, delete elements, etc.
1. Traverse
$("div").each(function(i,doEle){
})
2. Create
var box2 = $("<li>I created it later li</li>");
3. Add
var box2 = $("<li>I created it later li</li>"); //Internally added, after generation is a parent-child relationship $(".box").append(box2) //add after $(".box").preppend(box2) //add in front //Added externally, after generation is sibling $(".box").after(box2) //add later $(".box").befor(box2) //add before
4. Delete
Eight, Jquery size position operation
1. Get the size
2. Get the location
offSet() //The distance relative to the document
position() //The distance of the relative positioning element relative to the parent
scrollTop()
scrollLef()
$("body,html").stop().animate({ scrollTop:0 })
//mouse scroll event $(window).scroll() //document scrolling $(document).scrollTop()
var boxTop = $(".box").offset().top; $(window).scroll(function(){ var scrollTop = $(document).scrollTop(); if(scrollTop >= boxTop){ alert('exceed'); } })
9. Events
1. Single event registration
$("div").click(function(){ }) mouseenter
2. Event processing, binding multiple events on the same element
2.1 Multiple events with different operations
$(".box").on({ mouseenter: function(){ $(this).css("background","blue") }, click: function(){ $(this).css("background","brown") } })
//Multiple events with the same action $(".box").on("mouseenter mouseleave",function(){ $(this).toggleClass('box-bg') })
/ / Delegate the event originally bound to the child element to the parent element, or trigger it on the child element
Application scenario: Bind events to elements dynamically created in the future
$("div").on("click","div",function(){ alert(11) })
2.2 Unbinding event off()
Example 1:
$(".box").on({ click:function(){ alert(1) } }) //unbind $(".box").off() //Dismiss all events on ".box" $(".box").off("click"); //Dismiss the click event on ".box"
Example 2 (event delegation):
$("div").on("click",".box",function(){ $(this).toggleClass("box-bg") }) $("div").off() //Dismiss all events on ".box" $("div").off("click",".box"); //Dismiss the click event on ".box"
3. The event only triggers one() once
$(".box").one("click",function(){ alert(1) })
4. Automatic trigger events
4.1 Short form
element.click()
4.2 trigger method
element.trigger("eventType") $(".box").trigger("click")
4.3 The triggerHandler method, which does not trigger the default behavior of the event
4.4 Prevent default behavior
event.preventDefault or return false
4.5 Stop event bubbling
event.stopPropagation
Example
$(".box").on("click",function(){ console.log(1); event.stopPropagation(); //Without this line, clicking ".box" will print 1 and 2. Add this line to print only 1 }) $(document).on("click",function(){ console.log(2); })
10. Copy
$.extend(newObj,oldObj) //deep copy
$.extend(newObj,oldObj) //Shallow copy
11. The problem of multi-database coexistence conflicts
1,use directly jQuery 2,var otherName = jQuery.noConfict(); otherName(".box").click(function){ alert(1) })
12. jQuery plugin
jquery plugin library
http://www.jq22.com
http://www.htmleaf.com