1. What is jquery and what is the meaning of learning
jquery is a JS library
What is JS library?
The commonly used methods, encapsulation, encapsulated into a separate JS file, to use when the direct call.
What is the main learning of jquery?
Learn the ways jquery offers to us
Steps to use 2.jQuery
1) Introduction of Jquary Package
2) write-in entry function
The entry function is written in two ways:
Method One: $ (document). Ready (function () {
});
Way two:
$ (function () {
});
3)
Write functions that need to be implemented
Cases:
<script src= "Jquery-1.12.4.js" ></script>//introduced Jquary package <script>$ (document). Ready ( function// entry functions $ ("#btn1"). Click (function () {// functions that need to be performed $ ("div"). Show (400,500); }); $ ("#btn2"). Click (function() { $ ("div"). Text ("I am text content"); }); </script>
Version of jquery
Large version:
1.x (1.1-1.12) IE 6/7/8 supported
2.x (2.1-2.12) does not support IE 678
3.x does not support IE 678
Minor version:
Each large version is divided into two smaller versions:
Compressed (compressed version): Change the variable name as much as possible to a single letter, remove all comments and line breaks to reduce the volume
Uncompressed (uncompressed version): Comment all reserved, variable name as much as possible semantics
Different use environments depending on the size of the iteration
Project on-line, using compressed version
Use of uncompressed version during development
Extended:
Version after 3.x, a slim version of the reduced version appears
Remove Effects Ajax Module
Considerations for entry Functions
1. was not cited before using jquery $ is not defined
2. The order of the primers must be noted before the use of the lead package $ is not defined
3. The path of the lead package must be written right!
What is the $ symbol?
$ essence is a function, depending on the parameters given different functions
The first usage:
Incoming string CSS Selector
function: Get the elements on the page
Chestnuts: $ ("#id")
Syntax: $ (selector)
Second usage:
Incoming DOM Object
Function: Turn DOM objects into jquery objects
Chestnuts: $ (document)
Syntax: $ (domobj)
Third use:
Pass in a fucntion
Function: Entry function
$ (function)
jquery Objects and Dom objects
<script>$ (document). Ready (function(){//the elements that DOM objects get through the JS method are DOM objects varSon1=document.getelementbyid ("Son1"); Son1.style.backgroundColor= "Pink";//son1.css ("BackgroundColor", "green");//error DOM also cannot call the Jauary method //the element that the Jquary object obtains through the jquery method is the jquery object var$lis =$ ("Li"); $lis. CSS ("BackgroundColor", "green");//$lis. style.backgroundcolor= "Pink";//Error jquary cannot call Dom method });</script>
jquery and JavaScript
The jquery object is actually the wrapper set for the DOM object.
Dom objects are stored in a jquery object as a pseudo-array
Basic selector (ID selector, class selector, tag Selector, intersection/SET selector)
// Base Selector // ID Selector $ ( "#id")// class selector $ (". ClassName")// Tag Selector $ ("TagName") // intersection selector $ (SELECTOR1SELECTOR2)// set selector $ (Selector1, SELECTOR2)
Hierarchical selectors (descendants, descendants)
// Hierarchy Selector // descendant selector $ (selector1 selector2) // descendant selector $ (SELECTOR1>SELECTOR2)
Case:
<script src= "Jquery-1.12.4.js" ></script><script> $(function(){//$ (". Hf,.wsy"). CSS ("BackgroundColor", "pink");//Set selector//$ ("Li.nj"). CSS ("BackgroundColor", "Grey"); Intersection selector//$ ("#dlt >li"). CSS ("BackgroundColor", "Red"); Descendant selector$ ("#dlt li"). CSS ("BackgroundColor", "Blue");//descendant Selector });</script> <ul id= "SL" > <li> co-Commander </li> </ul> <ul id= "DLT" > <li class= "TZ" > Li Yunlong </li> <li> sniper </li> <li> soldier </li> <ul class= "FL" > <li> Captive 1</li> <li> captive 2</li> <li> captive 3</li> </ul> < ;li> soldiers </li> <li> soldiers </li> <li class= "HF" > Cooks </li> <li class= "wsy" > Health </li> </ul> <ul id= "TfE" > <li class= "TZ" > Zhuyunfei </li> <li> Sniper </li> <li> soldiers </li> <li class= "NJ" > Soldiers </li> <li> soldiers </li> <li class= "HF" > Husband </li> <li class= "wsy" > Medic </li> </ul> <ul id= "bx" > <li> people </li> <li> people </li> </ul>
Filter selector (ODD,EVEN,EQ)
<script> $ (document). Ready ( function () {$ ( "li:odd"). CSS ("BackgroundColor", "LightBlue"); // odd filter selector $ ("Li:even"). CSS ("BackgroundColor", "Red"); // even filter selector $ ("Li:eq (5)"). Text ("changed text"); // ordinal filter selector </script><body><ul> <li> hahaha </li> <li> ha haha </li> <li> hahaha </li> <li> hahaha </li> <li> hahaha </li> <li> hahaha </li> <li> hahaha </li> <li& GT, hahaha </li> <li> hahaha </li> <li> hahaha </li></ul>
Filter selector (Children (selector), find (selector), Next (), siblings (selector), parent (), EQ (index)
$ (this). Children (selector) Gets the descendant label of the current element
$ (this). Find (Selector)//Find and selector the corresponding element in the descendant element of the current element
$ (this). Next ()//Gets the next element of the current element
$ (this). Siblings (selector)//Gets the sibling element of the current element
$ (this). Parent ()//Gets the parents element of the current element
$ (this). EQ (index))//Gets the index position of the current element
Jquary study-What is Jquary? The relationship between JS and jquary jquary Selector