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