jQuery basic learning notes

Posted by icedude on Sat, 30 Oct 2021 12:29:21 +0200

catalogue

jQuery benefits

jQuery Download

jQuery import: (common project)

jQuery entry function

jQuery object and DOM object conversion

jQuery selector

1. Foundation selector

2. Level selector

3. Filter selector

jQuery operation style

jQuery operation class name

jQuery effect

Event switching

jQuery property operation

jQuery text attribute value

jQuery element operation

Creation, addition and deletion of elements   common method

jQuery event registration

event processing

Event object

Copy object: deep copy shallow copy deep

jQuery benefits

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

jQuery Download

  1. The latest version can be downloaded from the official website: jQuery
  2. 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