introduce

Jquery is a js library that encapsulates a large number of JS methods, compatible with IE8 and above

Reference Documents:

  1. Online Chinese document
  2. The tutorial
  3. download

Online use

<script src="jquery.min.js"></script>
Copy the code

Development use

<script src="jquery.js"></script>
Copy the code

Object conversion

= > js jquery object

<div id="app"></div>
<script>
    $("#app")// The jquery object is an array of classes
    // Get the js object
    $("#app") [0];
    $("#app").get(0);
</script>
Copy the code

Js = > jquery object

<script>
    var oDiv = document.getElementById("app");
    $(oDiv);/ / the jquery object
</script>
Copy the code

The entry function

/ / js operation
window.onload = function(){
    // Execute the code
}// All pages (including images) must be loaded once

/ / jquery operations
$(document).ready(function(){
    / / code
})//dom can be loaded multiple times

// Can be abbreviated, recommended
$(function(){})Copy the code

Library conflict

jQuery.noConflict();// Transfer control of $

(function($){$(function(){$(".box").hide(); 
    })
	
})(jQuery);
Copy the code

The selector

Id, class, tag

Focus on eq

Dom manipulation

HTML operation

Insert the node

Remove nodes

  • remove()

    • Delete both nodes and bindingsThe event

  • detach()

    • Deletes nodes without deleting events

  • empty()

    • Empty the box

Copy the node

Clone (), which can be true or false. It can be true to clone all objects, including events

Replace the node

  • replaceWith()
  • replaceAll()

The parcel node

  • wrap()

  • unwrap()

    • Delete the parent node of the package

  • wrapInner()

Attribute operation

attr()

// Set the properties
$('div').attr('id'.'box');
/ / multiple
$('p').attr({
    id:'box'.title:'title'
})
// Get the attribute value
console.log($('div').attr('id'));//box
Copy the code

removeAttr()

Remove the attributes

Class action

addClass()

$('div').addClass('active');/ / a single
$('div').addClass('a' 'b' 'c')// Multiple, separated by Spaces
Copy the code

removeClass()

hasClass()

Can determine whether there is a class, return a Boolean value

toggleClass()

Switch the class

$('div').toggleClass('active');
Copy the code

Value operation

html()

/ / to get
.html()
/ / set
.html('<p>hello</p>')
Copy the code

text()

Text manipulation

val()

Value operation

Filter operation

CSS operation

css()

console.log($('.box').css('color'));/ / to get
$('.box').css('color'.'red');/ / set
$('.box').css('font-size'.'20');
$('.box').css('fontSize'.'20');// Support hump

// Set multiple values
$('.box').css({
    color:'red'.fontSsize:'20'// Hump must be used here
});
Copy the code

offset()

Gets the relative offset of the current window

var offst = $('.box').offset();//obj {top:xx,left:xx}
Copy the code

  • scrollTop()

  • scrollLeft()

Gets the relative offset of the scroll bar

$(window).scroll(function(){
	console.log($(this).scrollTop())
    // Scroll to a position to display the scroll bar
    var scrollTop = $(this).scrollTop()
    if(scrollTop > offset.top ){
        // Display the navigation bar
        $('.tab').show()
        // Animation effect
        $('.tab').stop().fadeIn(400)
        / / equivalent to the
        //$('.tab').css('display','block');
        
    }else{$('.tab').hide();
        $('.tab').stop().fadeOut(400)}})Copy the code

width()&height()

// Get content width and height
$('.box').width()//Number 
// Set the parameter
Copy the code

innerWidth()&innerHeight()

/ / get the width + paddingCopy the code

outerWidth()&outerHeight()

/ / get the width + padding + borderCopy the code

The event

The mouse

click()

$('.box').click(function(){
    alert($(this).text());
})
Copy the code

dbclick()

Resolution of conflict between click and double-click events

mousedown()

The mouse click

mouseup()

The mouse is raised

mousemove()

The mouse moves

mouseover()

Mouse over the selected element or a child of the currently selected element. Not recommended

mouseout()

Removed from the

mouseenter()

Move in (current element only), only through the selected element, used more in the project

You can make a drop down menu, notice that when you use animation, you stop the previous animation stop()

$('.box').stop().slideDown(ms);
Copy the code

mouseleave()

Removed from the

focus()

Focusing on the

<input type="text"  class="text"/>$('.text').focus(); // Get focusCopy the code

Requirements:

// The user cannot use the input box
$('input[type=text]').focus({
    this.blur();
})
Copy the code

blur()

Out of focus

The keyboard

keydown()

Press the keyboard

Space: 32

Enter:

Esc: 27

$(window).keydown(function(event){
    console.log(event.keyCode)
    // Different buttons do different things
    switch(event.keyCode){
        case 32:
            // Perform the operation
            break;  
        default:
            break; }}})Copy the code

The form

change()

Triggered when the value of the element changes

$('input[type = text]').change(
function(){
    console.log(The value has changed.)
    var val = $(this).val();
    // Regular check
    if(/^\d{4}$/.test(val)){
        console.log('Entered correctly')}else{
	console.log('Input error')}})Copy the code

select()

submit()

$("form").submit(function(event){
    // Prevent default behavior
    event.preventDefault();
})
Copy the code

The event bubbling

Events bound to child elements are passed up

// Prevent bubbling
event.stopPropagation()
// Return false can also be used to prevent bubbling
Copy the code

Event Broker (delegate)

For the newly created element

$('ul').on("click"."li".function(){
    alert($(this).text())
})
Copy the code

Synthetic events

hover()

$('.box').hover(function(){
// Touch trigger
$(this).css("color".'red')},function(){
// Leave trigger
$(this).css('color'."green")})Copy the code

toggle()

$("#btn").click(function(){$(".box").toggle()
})
Copy the code

animation

hide()&show()

fadeIn()&fadeOut()

slideDown()&slideUp()

fadeTo()

$('.box').fadeTo(400.0.3)
Copy the code

toggle()

fadeToggle()

slideToggle()

animate()

Custom animation

$('.box').animate({
    width:300.height:300.fontSize:18.// Jquery plugin is required for color (jquery-color)
    //background:'green'
},1000.function(){
    // Shopping cart running
})
Copy the code

Ajax

Local updates with the page without reloading the page

$.ajax({
    url:"".method:' './/get/post
    success:function(res){
        console.log(res)// Returns json data}})Copy the code