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!