Jquary study-What is Jquary? The relationship between JS and jquary jquary Selector

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> &lt ;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