JQuery – learning Day1

Time:2020-8-14

JQuery – Basic Learning

What is jQuery?

JQuery is a JS library, which encapsulates the functions of native JS(method)The purpose is to simplify the code amount of native JS and improve the efficiency.
JQuery aims at:
Write Less,Do MoreWrite less, do more!

Basic use of jquery

1. JQuery Download

Two ways are provided

  • Enter the official website of jQuery and click download to download it
  • jQuery.min.js Click this link to enter, right-click to save as to local, the name can be changed by yourself.

2. Introduction of jquery

Go into your own editor and create oneHTMLIn the < head > tag, fill in the path with script Src

<script></script>

3. JQuery entry function

<script>
    //When using jQuery, you must wait for the dom of the page to load before executing JS code and native JS window.onload  equally
    //1. In the first way, the entry function is added in a more complete form.
    $(document).ready(function(){
        ... // here is the entry to the completion of loading the dom of the page
    })
    //2. The second direct use is exactly the same as the first one, so it is recommended to use this method.
    $(function(){
        ... // here is the entry to the completion of loading the dom of the page
    })
</script>

4. JQuery top level object$

  • &dollar;yesjQueryIn the code can be replaced by each other, generally for convenience, are directly used&dollar;.
  • &dollar;yesjQueryThe top-level object, equivalent to the window in the native JS, packages the elements intojQueryObject, you can call thejQueryThe way.

5. JQuery object and DOM object conversion

  • DOM object to jQuery object
$('dom object ');
  • Convert jQuery object to DOM object
$('dom object ') [index] index is the index number
$('dom object '). Get (index) index is the index number

JQuery common API (Interface)

1. JQuery selector

name usage describe
ID Selector $(“#id”) Gets the specified ID element
Select all selector $(“*”) Match all elements
Class selector $(“.class”) Get elements of the same class
tag chooser $(“div”) Gets all elements of the same type of tag
Union selector $(“div,p,li”) Select multiple elements
Intersection selector $(“li.current”) Intersection element
Descendant selector $(“ul>li”) Use the > sign to get parent son level elements; note that grandson level elements do not
Descendant Selectors $(“ul li”) Use a space to represent getting all the Li elements under UL, including the grandson level
Screening the eldest son $(“li:first”) Gets the first Li element
Screening $(“li:last”) Gets the last Li element
Screening sons $(“li:eq(2)”) Gets the element with index 2 in the Li element, and the index number starts from 0
Looking for father $(“li”).parent(); Find parent
Looking for a son $(“ul”).children(“li”); Same as $(“UL > Li”), the latest level (pro son)
Look for the sons $(“ul”).find(“li”); Same $(“UL Li”) descendant selector
Abandon a son $(“.first”).siblings(“li”); Find sibling nodes, not including yourself
Implicit iteration (important)

As follows, the process of loop traversing all matched elements and executing the response method instead of looping is calledImplicit iteration

<body>
    <div class="title">
        < div > Product Introduction
        < div > Product Information
        < div > after sales support
        < div > Product Evaluation
        < div > mobile community
    </div>

    <script>
        $(function(){
            //Get 5 divs directly, add CSS style, and solve the problem with one line of code.
            $('.title div').css("backgroundColor","gray");
        })
    </script>
</body>

2. JQuery style operation

Operating CSS method

<div class="title">
    < div > eldest son
    < div > youngest son
</div>

<script>
    $(function(){
            //When modifying a single CSS attribute, the attributes and values should be enclosed in quotation marks and separated by commas
            $('.title div:first').css('backgroundColor','blueviolet');
            $('.title div:last').css({
                //Modify multiple CSS attributes. Use quotation marks between attribute names and non numeric values: separate two different attributes with commas
                "width":200,
                "height":200,
                "backgroundColor":"red"
            });
        })
</script>

Operation class method

<script></script>
<style>
    .title div{
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        line-height: 90px;
        text-align: center;
        border: chartreuse 5px solid;
        background-color: yellow;
    }
    .item{
        background-color: blueviolet !important;
        color: white;
    }
</style>
<div class="title">
        < div > son < / div >
        < div > son < / div >
        < div > son < / div >
        < div > son < / div >
        < div > son < / div >
    </div>
    
    <script>
        $(function(){
            //Set click function 
            $('.title div').click(function(){
                //After clicking, execute the addclass method to add the item class to the element to modify the style
                $(this).addClass('item1');
                //Remove the brothers' classes and use the removeclass method to achieve the effect of "who changes"
                $(this).siblings().removeClass('item');
            })
        })
    </script>

JQuery effect

display slide Fade in and fade out Custom animation
show() sildeDown() fadeIn() animate()
hid() sildeUp() fadeOut()
toggle() sildeToggle() fadeToggle()
fadeTo()

Overall situation copy the following code to introduce their own jQuery file to see the effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <! -- change the jQuery path here
    <script></script>
    <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
    <style>
        .box{
            position: absolute;
            width: 200px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    < button > display
    < button > Hide < / button >
    < button > Toggle
    <br>
    < button > slide out
    < button > recall
    < button > Toggle
    <br>
    < button > fade in
    < button > fade out
    < button > Toggle
    < button > transparent
    <br>
    < button > Animation < / button >
    <br>
    <div class="box"></div>

    <script>
        //There are three undetermined values in all effects
        //Speed
        //Ising effect parameters swing and linear
        //The FN callback function is executed at the end of the animation, once per element
        $(function(){
            //Display effect
            $('button').eq(0).click(function(){
                $('.box').show(500);
            });
            $('button').eq(1).click(function(){
                $('.box').hide(500);
            });
            $('button').eq(2).click(function(){
                $('.box').toggle(500);
            });

            //Sliding effect
            $('button').eq(3).click(function(){
                $('.box').slideDown(500);
            });
            $('button').eq(4).click(function(){
                $('.box').slideUp(500);
            });
            $('button').eq(5).click(function(){
                $('.box').slideToggle(500);
            });

            //Fade in and fade out effect
            $('button').eq(6).click(function(){
                $('.box').fadeIn(500);
            });
            $('button').eq(7).click(function(){
                $('.box').fadeOut(500);
            });
            $('button').eq(8).click(function(){
                $('.box').fadeToggle(500);
            });
            $('button').eq(9).click(function(){
                $('.box').fadeTo(1000,0.5);
            });

            //The animation effect has a parameter that must be added. Params is the style property that you want to change
            //Passing the required parameter form as an object is like modifying the CSS style
            $('button').eq(10).click(function(){
                $('.box').animate({
                    height:200,
                    left:600,
                    top:300
                },1000);
            });
        })
    </script>
    
</body>
</html>

summary

Before learning jQuery, you must learn JS basics first, then you will feel that the code world is really wonderful!!