Getting to know JQuery

JQuery与JavaScript

JQuery is one of the JavaScript libraries, it is the encapsulation of JavaScript objects and utility functions.

The biggest advantage of using JQuery compared to simply using JavaScript is that the page can maintain a uniform display effect in all browsers, that is, there is no browser compatibility problem.

Uses of JQuery

1. Access and manipulate DOM elements

2. Control page style

3. Handle page events

4. Extend the new jQuery plugin

5. Perfect combination with Ajax technology

Advantages of JQuery

1. Small size, only about 100KB after compression

2. Powerful selector

3. Excellent DOM encapsulation

4. Reliable event handling mechanism

5. Excellent browser compatibility

6. Simplify programming with implicit iteration

7. Rich plug-in support

JQuery syntax

Introduce jQuery into the page

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

Popup message box using JQuery

E.g:

<body>

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        alert("jQuery！");
    });
</script>
</body>

The ready() method in the $(document).ready() statement in this code is similar to the onload() method in traditional JavaScript , which is the method of the page load event in JQuery .

$(document).ready() is similar to window.onload , but there are differences

	window.onload	$(document).ready()
execution time	You must wait for all the content in the web page to be loaded (including pictures, flash , videos, etc.) to execute	All DOM document structures in the web page are executed immediately after drawing, and the content (picture, flash , video, etc.) associated with DOM elements may not be loaded.
write number	The same page cannot be written more than one at the same time	The same page can write multiple at the same time
Simplified spelling	without	$(function(){ // execute code }) ;

JQuery syntax structure

The three major parts of a JQuery statement are called factory functions, selectors, and methods. The syntax is simplified as follows:

grammar:

$(selector).action() ;

1. The function of $( ) is to convert the DOM object into a JQuery object. Only after the DOM object is converted into a JQuery object, the JQuery method can be used.

2 , selector selector

JQuery supports almost all selectors in CSS1.0 to CSS3.0 rules. Using JQuery selectors and $( ) factory functions can be very convenient to get the DOM elements that need to be manipulated

grammar:

$(selector)

3. Method action()

Methods provided in jQuery , including methods for binding event handling

E.g:

<body>
<ul>
    <li id="current">jQuery简介</li>
    <li>jQuery syntax</li>
    <li>jQuery selector</li>
    <li>jQuery events and animations</li>
    <li>jQuery方法</li>
</ul>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li").click(function(){
            $("#current").addClass("current");
        });
    });
</script>
</body>

The addClass() method in the sample code is one of the methods used for CSS manipulation in JQuery . Its function is to add one or more styles to the selected element.

Syntax:
jQuery object.addClass ([ style name ]);

There can be one or more style names, and multiple style names need to be separated by commas.

E.g:

<body>
<div class="nav-box">
<div class="nav-top"><a href="">全部商品分类</a></div>
<ul>
<li>
<a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
</li>
</ul>
</div>
    <script src="js/jquery-1.12.4.js"></script>
<script src="js/hover.js"></script>
<script>
$(document).ready(function(){

/**First-level content suspension**/
$("li").mouseover(function(){
$(this).css({"background":"orange"});//The current li background color is orange
$(this).children("div").show();//Show the corresponding secondary content
}).mouseout(function(){
 $(this).css({"background":"#c81623"});
$(this).children("div").hide();
});
});
</script>
 </body>

This example uses the css() method, which is another method used for CSS manipulation in JQuery , and its role is to add CSS styles to matching elements

grammar:

css(" property ", " property value ") ;

css({" property 1":" property value 1"," property 2":" property value 2"...});

The syntax to show and hide an element is as follows:

Set display: $(selector).show( );

Set hide: $(selector).hide( );

E.g:

$(".nav-top").show( );
$("p").hide( );

chain operation

Performs multiple operations on an object and returns the result of the operation to the object, so that the returned result can be applied to the next operation on the object.

E.g:

<body>
<h2>What is a beneficiary?</h2>
<p>
    <strong>Answer:</strong>
    The beneficiary refers to the person designated by the insured or the insured in the life insurance
    For those who have the right to claim insurance money, the insured and the insured may be the beneficiaries.
</p>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("h2").click(function(){
//The function of the next method is to obtain the sibling elements immediately following each element in the set of matched elements.
            $("h2").css("background-color","#CCFFFF").next().css("display","block");
        });
    });
</script>
</body>

Implicit iteration

In JQuery writing, in addition to chain operations, there is another way, that is, implicit iteration. The following code does not need to list the fonts in all <li> tags, for example:

<body>
<ul>
    <li>Digital Products</li>
    <li>Household appliances</li>
    <li>Maternal and Child Health</li>
    <li>Fashion Beauty</li>
</ul>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });
</script>
</body>

DOM objects and JQuery objects

DOM object: Node object obtained directly using JavaScript

E.g:

var objDOM=document.getElementById("title");
var objHTML = objDOM.innerHTML;

jQuery object: The object generated after wrapping the DOM object with jQuery, it can use the methods in jQuery

$("#title").html( );
Equivalent to
document.getElementById("title").innerHTML;

Note: DOM objects and jQuery objects have separate methods and cannot be mixed

Conversion between JQuery objects and DOM objects

1. Convert JQuery objects into DOM objects

The jQuery object is an array-like object, and the corresponding DOM object can be obtained through the [index] method

var $txtName =$ ("#txtName"); //JQuery对象
var txtName =$txtName[0]; //DOM object

Get the corresponding DOM object through the get(index) method

var $txtName =$("#txtName"); //JQuery对象
var txtName =$txtName.get(0);//DOM object

2. Convert DOM objects to JQuery objects

Use the $() function to convert: $(DOM object )

var txtName =document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName); //JQuery object

Note: The general convention for jQuery object naming starts with $

$(this) is often used in events , this is the object that triggered the event

Getting to know JQuery

Guess you like