Basic syntax of jquey

One . understand jQuery

jquery Different versions of ：（ understand ）
1.x The file is bigger , Compatible with older versions ie7
2.x The file is small , High execution efficiency , part ie8 The following is not supported
3.x The offer does not contain ajax/ Animation api Version of , Provides some new api

Two kinds of js The difference between library files ：（.js and .min.js）
.js Development Edition （ The beta ）： Convenient debugging
.min.js Production version （ Compressed version ）： Small , fast

1. What is it? : What?

*  One JS function library : write less, do more
*  Package simplification DOM operation (CRUD) / Ajax

2. Why use it : why?

*  Powerful selector :  Easy and fast search DOM Elements 
*  Implicit traversal ( iteration ):  Operate on more than one element at a time 
*  Integration of reading and writing :  Reading data / Write data using a function 
*  call chaining :  Can pass . Keep calling jQuery Object method 
*  Event handling 
* DOM operation (CUD)
*  Style operation 
*  Animation 
*  Browser compatibility 

3. How to use : How?

1） introduce jQuery library （ Either way ）
* Local introduction and CDN Remote introduction
* Beta and production ( Compressed version )
2） Use jQuery
* Use jQuery Core function : $ perhaps jQuery
* Use jQuery The core object : $xxx Which is execution $() Get the object

Two . jQuery My two sharp weapons

1. jQuery function : $ perhaps jQuery

jQuery What is exposed is jQuery function , You can use it directly
1） As a general function user : $(param)
* param yes function: amount to window.onload = function( Listening after document loading )
* param It's a selector string : Find all matching DOM Elements , Return contains all DOM Elemental jQuery object
* param yes DOM Elements : take DOM The element object is wrapped as jQuery Object returns $(this)
* param Is the label string : Create a label DOM Element object and wrapped as jQuery Object returns
2） Use it as an object : $.xxx
* each(obj/arr, function(key, value){})
* trim(str)

2. jQuery object

Include all matching n individual DOM Pseudo array object of element
perform $() Back to you jQuery object
Basic behavior :
* length/size(): obtain dom Number of elements
* [index]: Get the corresponding value of the specified subscript dom Elements
* each(function(index, domEle){}): Traverse all of dom Elements
* index(): Get the present dom The subscript of the element in all brothers

Example ：

<script type="text/javascript">
  $(function () {
    
    var $btns = $('button')
    console.log($btns)
    //  demand 1.  Count the total number of buttons 
    console.log($btns.size(), $btns.length)

    //  demand 2.  Take out No 2 individual button The text of 
    console.log($btns[1].innerHTML, $btns.get(1).innerHTML)

    //  demand 3.  Output all button Tag text 
    $btns.each(function () {
    
      console.log(this.innerHTML)
    })

    //  demand 4.  Output ' Test three ' The button is the first of all buttons 
    console.log($('#btn3').index())
  })
</script>

3、 ... and . Selectors

1. What is it? ?

*  There are specific grammatical rules (css Selectors ) String 
*  Used to find a / some DOM Elements : $(selector)

2. classification

1） basic

  * #id
  * tagName/*
  * .class
  * selector1,selector2,selector3:  Combine 
  * selector1selector2selector3:  intersection 

Example ：

<script type="text/javascript">
  $(function () {
    
// 1.  choice id by div1 The elements of 
    $('#div1').css('background', 'red')
// 2.  Choose all div Elements 
    $('div').css('background', 'red')
// 3.  Select all class The attribute is box The elements of 
    $('.box').css('background', 'red')
// 4.  Choose all div and span Elements 
    $('div,span').css('background', 'red')
// 5.  Select all class The attribute is box Of div Elements 
    $('div.box').css('background', 'red')  // Can't write .boxdiv
  })
</script>

2） level

Hierarchy selector : Find child elements , Progeny element , Selector for sibling elements

1. ancestor descendant
   Match all descendant elements under a given ancestor element
2. parent>child
   Match all child elements under a given parent element
3. prev+next
   Match all immediately after prev Elemental next Elements
4. prev~siblings
   matching prev Everything after the element siblings Elements

<script type="text/javascript">
  $(function () {
    
//1.  Choose ul Let's go through all the span
    $('ul span').css('background', 'red')
//2.  Choose ul All the sub elements below span
    $('ul>span').css('background', 'red')
//3.  Choose class by box Next li
    $('.box+li').css('background', 'red')
//4.  Choose ul Under the class by box All sibling elements after the element of 
    $('ul .box~*').css('background', 'red')
  })
</script>

3） Filter

Filter out some of the original matching elements

<script type="text/javascript">
  $(function () {
    
//1.  Select first div
    $('div:first').css('background', 'red')
//2.  Choose the last class by box The elements of 
    $('.box:last').css('background', 'red')
//3.  Select all class Property is not box Of div
    $('div:not(.box)').css('background', 'red')
//4.  Choose the second and third li Elements 
    $('li:gt(0):lt(2)').css('background', 'red') // The starting position of the index changes , Restart the calculation 
    $('li:lt(3):gt(0)').css('background', 'red') // Correct index position 
//5.  The selection is BBBBB Of li
    $('li:contains(BBBBB)').css('background', 'red')
//6.  Select hidden li
    $('li:hidden ').show()
//7.  Choose to have title Attribute li Elements 
    $('li[title]').css('background', 'red')
//8.  Select all properties title by hello Of li Elements 
    $('li[title=hello]').css('background', 'red')
  })
</script>

4） Forms

<script type="text/javascript">
  $(function () {
    
	//1.  Select the text entry box that is not available 
    $(':input:disabled').css('background', 'red')
	//2.  Displays the selected hobby   The number of 
    console.log($(':checkbox:checked').length)
	//3.  Displays the name of the selected city 
    console.log($('select>option:selected').html())
    console.log($('select').val())  // What you get is what you choose option Of value
  })
</script>

Four . $ Tool method

1. $.each(): Traverse the data in an array or object
2. $.trim(): Remove the spaces on both sides of the string
3. $.type(obj): Get the type of data
4. $.isArray(obj): Determine if it's an array
5. $.isFunction(obj): Determine if it's a function
6. $.parseJSON(json) : analysis json String conversion to js object / Array

many Tab Click to switch Example ：

<body>
<h2> many Tab Click to switch </h2>
<ul id="tab">
  <li id="tab1" value="1">10 Yuan package </li>
  <li id="tab2" value="2">30 Yuan package </li>
  <li id="tab3" value="3">50 Yuan Baoyue </li>
</ul>
<div id="container">
  <div id="content1">
    10 Yuan package details ：<br/>&nbsp; Call within the monthly package 100 minute , The excess part 2 hair / minute 
  </div>
  <div id="content2" style="display: none">
    30 Yuan package details ：<br/>&nbsp; Call within the monthly package 300 minute , The excess part 1.5 hair / minute 
  </div>
  <div id="content3" style="display: none">
    50 Yuan per month ：<br/>&nbsp; Unlimited amount of free play every month 
  </div>
</div>

<script> $(function () {
       var index = 0 var $contents = $('#container>div') $("#tab>li").click(function () {
       var clickIndex = $(this).index() if (clickIndex != index) {
       $contents[index].style.display = 'none' $contents[clickIndex].style.display = 'block' index = clickIndex } }) }) </script>
</body>

5、 ... and . attribute / Text

• Properties of the action tag , Label body text
• attr(name) / attr(name, value): Read and write label attributes with non Boolean values
• prop(name) / prop(name, value): Read and write label properties of Boolean values
• removeAttr(name)/removeProp(name): Delete attribute
• addClass(classValue): add to class
• removeClass(classValue): Remove the specified class
• val() / val(value): Read and write labels value
• html() / html(htmlString): Read and write label text