jQuery basic learning notes

Lightweight. The core file is only tens of kb, which will not affect the page loading speed
Cross browser compatibility. It is basically compatible with mainstream browsers
Chain programming, implicit iteration.
Support the operation of events, styles and animations. Simplifies DOM operations
Support plug-in extension development. Third party plug-ins can be installed
Free open source

jQuery Download

The latest version can be downloaded from the official website: jQuery
Download other versions: jQuery CDN

jQuery import: (common project)

Introduce the jQuery file and insert the script tag at the end of the document

jQuery entry function

// First: simple and easy to use.
$(function () {   
    ...  // This is the entrance to the completion of page DOM loading
}) ; 

// The second: cumbersome, but it can also be realized
$(document).ready(function(){
   ...  //  This is the entrance to the completion of page DOM loading
});

jQuery object and DOM object conversion

// 1. There is only one method to convert DOM objects into jQuery objects
var box = document.getElementById('box');  // Get DOM object
var jQueryObject = $(box);  // Convert DOM objects to jQuery objects

// 2. There are two methods to convert jQuery objects to DOM objects:
//   2.1 jQuery object [index value]
var domObject1 = $('div')[0]

//   2.2 jQuery object. Get (index value)
var domObject2 = $('div').get(0)

jQuery selector

1. Foundation selector

ID selector: $('#id')
Select all selector: $('*')
class selector: $('. class')
Label selector: $('div ')
Union selector: $('div,p,span ')
Intersection selector: $('li.current ')

2. Level selector

Descendant selector: $('ul > Li ')
Descendant selector: $('ul li ')

3. Filter selector

: First: $('li:first ') -- first Li element
: Last: $('li:last ') -- last Li element
: eq(index): $('li: EQ (2 ') -- Li element with index 2
: odd: $('li:odd ') -- Li element with odd index
: even: $('li:even ') Li elements with even index

jQuery operation style

// 1. If the parameter only writes the property name, the property value is returned
var strColor = $(this).css('color');

// 2. Parameters are attribute names, attribute values, separated by commas. They are used to set a set of styles. Attributes must be quoted. If the value is a number, it can not be followed by units and quotation marks
$(this).css(''color'', ''red'');

// 3. The parameter can be in the form of object, which is convenient for setting multiple groups of styles. Attribute names and attribute values are separated by colons, and attributes can not be quoted
$(this).css({ "color":"white","font-size":"20px"});

jQuery operation class name

// 1. Add class
$("div").addClass("current");

// 2. Delete class
$("div").removeClass("current");

// 3. Switching class
$("div").toggleClass("current");

jQuery effect

Display and hide: show() / hide() / toggle();
Draw in: slideDown() / slideUp() / slideToggle();
Fade in and fade out: fadeIn() / fadeOut() / fadeToggle() / fadeTo();
Custom animation: animate();

Stop Animation queuing: stop()

Event switching

hover()
over()
out()

jQuery property operation

1. Element intrinsic attribute: prop() -- applicable to common attributes and form attributes: disabled, checked and selected

Get: prop('property ')
Set attribute: prop('attribute ',' attribute value ')

2. Element custom attribute: attr()

Get: attr('attribute ')
Set attribute: attr('attribute ',' attribute value ')

3. Data cache: data() -- data can be accessed on the specified element without modifying the structure of DOM element. Once the page is refreshed, the stored data will be removed

Add data: data('name','value ')
Get data: data('name ')

jQuery text attribute value

1. Common element content (HTML) -- equivalent to native innerHTML

Get: html()
Setting: html('content ')

2. Common element text() -- equivalent to native innerText

Get: text()
Setting: text('content ')

3. Form value val() -- equivalent to native value

Get: val()
Setting: val('content ')

jQuery element operation

1.each()

Syntax: $('div').each(function(index,ele) {...})
Function: traverse every element commonly allocated, mainly used for DOM processing
Note: this method is used to traverse each item in the jq object. The element in the callback function is a DOM object. When using the jq method, you need to turn the DOM object into a jq object

2.$.each()

Syntax: $. each(object,function(index,ele) {...})
Function: it can traverse any object, such as array and object. It is mainly used for data processing
Note: this method is used to traverse each item in the jq object. The element in the callback function is a DOM object. When using the jq method, you need to turn the DOM object into a jq object

Creation, addition and deletion of elements common method

// 1. Create
$('element')

// 2. Internal addition
element.append('content')  // Put the content at the end of the matching element
element.prepend('content')  // Put the content first inside the matching element

// 3. External addition
element.after('content')  // Put content after target element
element.before('content')  // Put the content before the target element

// 4. Delete element
element.remove()  // Delete matching elements
element.empty() // Delete all child nodes in the matching element collection
element.html('') // Empty the contents of the matching element

jQuery event registration

element. Event (function() {...})
$('div).click(function(){ ... })

event processing

on(): binding events
off(): unbinding event
trigger() / triggerHandler(): event triggering

Event object

element.on(event,[selector],function(event){
    event.preventDefault() // Or transform false blocks the default behavior
    event.stopPropagation() // Stop bubbling
})

Copy object: deep copy shallow copy deep

$.extend([deep], target, obj1, [objN])
// 1.deep is true for deep copy and false for shallow copy
// 2.target object to copy
// 3.1 the first object to be copied
// 4.objN the nth object to be copied

Topics: Javascript Front-end JQuery

Programmer Think