Front-end learning record Day4 (jQuery)

Day 4

June 23, 2019.
This is the front end of the fourth day I learn.
On this day, I learned the following knowledge.

About jQuery

jQuery is a fast and concise JavaScript frameworks, following yet another excellent Prototype JavaScript code libraries (or JavaScript framework). jQuery design aim is to "write Less, Do More", that is advocated write less code, do more things. It encapsulates the JavaScript code for commonly used functions, provide a simple JavaScript design patterns to optimize HTML document manipulation, event handling, animating and Ajax interactions design.
jQuery core features can be summarized as follows: the chain has a unique grammar and short clear multi-function interface; highly efficient and flexible css selector, and can be extended CSS selectors; convenient plug-in extension mechanism and a wealth of plug-ins. jQuery compatible with all major browsers, such as IE 6.0 +, FF 1.5 +, Safari 2.0 +, Opera 9.0+ like.

jQuery Features

Quick access to the document element
jQuery selection mechanism built Css selector, which provides the ability to quickly find DOM elements in the document, but also greatly enhanced the JavaScript page elements acquired way.

The page offers beautiful dynamic effects
jQuery built a series of animations can be developed amazingly beautiful pages, many sites use the built-in jQuery effects, such as fade, element removal and other dynamic effects.

Creating AJAX without refreshing the page
AJAX is JavaScript and ML abbreviation asynchronous and can develop very sensitive without refreshing the page, especially the development of server-side web page, such as PHP website, need to travel to communicate with the server, if you do not use AJAX, every time data updates have to refresh the page, while the use of AJAX effects, can be partial page refresh, providing a dynamic effect.

It provides enhanced JavaScript language
jQuery JavaScript provides enhanced basic structure, such as elements iteration and array processing and other operations.

Enhanced event handling
jQuery provides a variety of events page, it avoids too programmers add event-handling code, the most important is in HTML, which eliminates all kinds of event handlers browser compatibility issues.

Change the page content
jQuery can modify the contents of a Web page, such as changing text pages, insert pages or flip the image, jQuery simplifies the way the original JavaScript code need to be addressed.

jQuery import

1. Go to the official website of jQuery https://jquery.com/
download the latest version of jquery (current latest version is 3.4.1)

2. Create a new project following js folder, the downloaded file into jQuery, you can complete the import

jQuery Language Basics

Selector
jQuery allows you to select the group of elements or a single element HTML operates.
jQuery selectors based element id, class, type, attributes, attribute values, etc. "Find" (or select) HTML elements. It is based on existing CSS selectors, in addition, it also has some custom selectors.
All jQuery selectors begin with a dollar sign: $ ().

Element selectors
jQuery element selectors select elements based on the element name.

$("p")

Select all <p.> Element in the page

id selector
jQuery #id selected by selecting the HTML element id attribute specified element.
Id elements in the page should be unique, so you want to select only the elements required by the page #id selector.
By selecting id syntax elements:

$("#test")

class selector
jQuery class selector element can be looked through the specified class.
The syntax is as follows:

$(".test")

Event Processing
jQuery event method syntax
jQuery method in jQuery, most DOM events have an equivalent.
Page specify a click event:

$("p").click();

The next step is to define what time trigger events. You can be achieved by an event function:

$("p").click(function(){
    // 动作触发后执行的代码!!
});

Commonly used jQuery event method
1. $ (Document) .ready ( )

$ (document) .ready () method allows us to perform a function after the document is fully loaded. The event method has been mentioned in the jQuery syntax section.
the Click ()
the Click () method when the button click event is triggered calls a function.
This function is executed when the user clicks on an HTML element.
In the following example, when the click event is triggered on a <. P> element to hide the current <p.> Element:

$("p").click(function(){
    $(this).hide();
});

2.dblclick()

When you double-click an element, dblclick events occur.
dblclick () method triggers dblclick event, function or operation specified event occurs when dblclick:

$("p").dblclick(function(){
    $(this).hide();
});

3.mouseenter()

When the mouse pointer through the elements, mouseenter events occur.
mouseenter () method mouseenter trigger event, or specified when the function mouseenter run when an event occurs.

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

4.mouseleave()

When the mouse pointer leaves the element, mouseleave events occur.
mouseleave () method mouseleave trigger event, or specified when the function mouseleave run when events occur:

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});

5.mousedown()

When the mouse pointer is moved over the element, and the mouse button is pressed, mouseDown event occurs.
mousedown () method triggers mousedown event, function or operation of the provisions of the mousedown event occurs when:

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});

6.mouseup()

When you release the mouse button on the element, mouseup events occur.
Mouseup method of triggering event or function specified when mouseup run when events occur:

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});

7.hover()

hover () method for simulating cursor hover event.
When the mouse moves over the element, will trigger the first function specified (MouseEnter); when the mouse out of the element, will trigger the second specified function (mouseleave).

$("#p1").hover(function(){
    alert("You entered p1!");
    },
    function(){
    alert("Bye! You now leave p1!");
});

8.focus()

When the element gets focus, focus events.
When the mouse click on the selected element or elements via navigate to the tab key, the element will focus.
focus () method triggers the focus event, or specified when the function when the focus event.

$("input").focus(function(){
    $(this).css("background-color","#cccccc");
});

9.blur()

When the element loses focus, blur event occurs.
blur () method triggers the blur event, function or operation specified event occurs when a blur:

$("input").blur(function(){
    $(this).css("background-color","#ffffff");
});

jQuery example

• Achieve interlaced color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入jQuery-->
    <script src="js/jquery-3.4.1.js"></script>

</head>
<body>

<table border="1px" id="tb">
    <tbody>
        <tr>
            <td>第一行</td>
            <td>第一行</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>第二行</td>
        </tr>
        <tr>
            <td>第三行</td>
            <td>第三行</td>
        </tr>
        <tr>
            <td>第四行</td>
            <td>第四行</td>
        </tr>
        <tr>
            <td>第五行</td>
            <td>第五行</td>
        </tr>
        <tr>
            <td>第六行</td>
            <td>第六行</td>
        </tr>
        <tr>
            <td>第七行</td>
            <td>第七行</td>
        </tr>
    </tbody>

</table>

<script>
  /*  var a = document.getElementById("tb");
    var b = document.getElementsByTagName("tbody")[0];
    var c = document.getElementsByTagName("tr");

    console.log(a);
    console.log(b);
    console.log(c);

    for (var i = 0 ; i < c.length ; i++){
        if (i % 2 === 0){
            c[i].style.background = "yellow";

        }
    }*/
    $("tr:odd").css("background-color","#e8f0f2");
</script>


</body>
</html>

• jQuery selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery选择器</title>

    <!--引入jQuery-->
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>

<a href="">你好啊</a>
<p id="i">23333</p>
<div class="c">emmmmmmm...</div>
<span>猪</span>
<input type="button" value="按压">


<script>

    //jQuery = $
    //$ or jQuery ：就是jQuery的工厂函数 —— 将document对象加工为jQuery对象
    //（）: 选择什么东西加工
    // .事件 ： jQuery写好的各种各样的方法

    //万能公式 ： $(选择器).事件(事件产生的函数);

    $("[value='按压']").keydown(function () {
        console.log(event.keyCode);

        if (event.keyCode === 13){
            console.log("你输入的是回车");
        }
        console.log("下去了")
    });
    $("[value='按压']").keypress(function () {
        console.log("压住了")
    });
    $("[value='按压']").keyup(function () {
        console.log("上来了")
    });



    $(document).ready(function () {
        alert("jQuery");
    });

    $("#i").click(function () {
        alert("你好啊");
    });

</script>

</body>
</html>

• Implicit iterative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入jQuery-->
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>

<ul>
    <li class="a">111111</li>
    <li>222222</li>
    <li class="a">333333</li>
    <li>444444</li>
</ul>

<script>

    //隐式迭代，可以选择到一类标签元素
    $(".a").css({"font-size":"20px","background":"red"});

</script>
</body>
</html>