An article takes you to get started and understand the basic operation of Jquery

  • 2021-12-05 05:21:42
  • OfStack

Directory 1. Steps to use Jquery: (1) Import js library (2) Page load event 2. Transformation of Jq object and js object (1) js object---- > jq Object (2) jq Object-- > js Object 3. Basic selector for jq//(1) id selector for jq//(2) class selector for jq//(3) Form selector//(4) element selector 4. Level selector for jq 5. Filter selector 6. Attribute selector 7. Summary of jq document processing

1. Steps to use Jquery:

(1) Import the js library


<script src="js/jquery-1.11.3.min.js"></script>​
//js/jquery-1.11.3.min.js    Compressed version ( Recommend )
//js/jquery-1.11.3.js        Full version 

(2) Page Load Events


$(document).ready(function(){
     Business operations  ;
});​
// After optimization :
$(function(){
     Business operations ;
});

2. Conversion of Jq objects to js objects

(1) js Object---- > jq Object


var js Object  = document.getElementById("id Attribute value ");
var $jq Object  = $(js Object )

(2) jq Object-- > js Object


var js Object  = $jq Object .get(index) ;

3. Basic selector of 3. jq

//(1) id selector for jq


$("#id Attribute value "). Bind event method (function(){
     Business operations  ;
});

//(2) class selector for jq


$("#.class Attribute value "). Bind event method (function(){
     Business operations  ;
});

//(3) Form selector


$(" Selected input Label [ Label with specified attribute ]"). Bind event method (function(){
     Business operations  ;
});

//(4) element selector


$(" Element / Label ").html("XXX") ;

4. Level selector of 4. jq


// Descendant selector 
$(" Parent tag   Sub-label ")
​
// Child element selector 
$(" Parent element > Child element ")

5. Filter selector


$(" Label :first")               // Matches the number 1 Tags 
$(" Label :even")                // Matches from the 0 Starting even number of tags (0,2,4...)
$(" Label :odd")                 // Matches from the 1 Beginning odd number of elements (1,3,5...)

6. Property selector


$(document).ready(function(){
     Business operations  ;
});​
// After optimization :
$(function(){
     Business operations ;
});
0

7. jq document processing


$(document).ready(function(){
     Business operations  ;
});​
// After optimization :
$(function(){
     Business operations ;
});
1

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!


Related articles: