jQuery notes a beginner

Mirror by Wang Yuyang

jQuery syntax

jQuery syntax element is operated by selecting HTML elements, and selected

Basic grammar:

All jQuery statement with "$" symbol start

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>点击消失</p>
        <p>点击消失</p>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <script>
            $(document).ready(function(){ //固定的jQ开头
                $("p").click(function(){ // 选取p标签，并绑定clisk事件
                    $(this).hide(); //事件触发使用hide()方法（隐藏当前标签属性）
                })
            })
        </script>
    </body>
</html>

jQuery function in a document ready function, we need to load the function documentation in the js

// jQuery入口函数

$(document).ready(function(){
    //jQuery代码
});
/*******************************/
$(function(){
    //jQuery代码
});

Selector syntax:

jQuery selector syntax of CSS and calling methods like Oh!

The method allows selection of the selector element id, class, type, attributes, attribute values, etc. based on looking to the specified HTML element

Element selector
```
$("p"); //选取p标签元素
```
id selector
```
$("#demo"); // 选取id='demo'的元素
```

.class selector

$(".demo"); // 选取class='demo'的元素

All elements
```
$("*"); // 选取全部元素
```

jQuery event:

| Event function | binding function to |
| $ (the Document) .ready (function) | ready event is bound to be a function of the document (when the document is finished loading) |
| $ (Selector) .click (function) | trigger or the binding function of the selected element to the click event |
| $ (Selector) .dblclick (function) | trigger or bind to double-click event function of the selected element |
| $ (Selector) .focus (function) | trigger or the binding function to get the focus event of the selected element |
| $ (Selector) .mouseover (function) | trigger or binds a function to the mouseover event of the selected element |

Event syntax:

reference:

Filter selector

The basic level tag filter

:first/:last

:first: Select the first element

:last: Select the last element
: Not (*): remove the given element selector
:even/:odd

: Even: even indices tag

: Odd: odd-indexed tag
:eq()/:gt()/:lt()

eq (): Select an element specified index

ge (): Select an element is greater than the specified index

lt (): Select the index is less than the specified element
: Focus Select all the elements lose focus
: Header Select all heading elements (h1 \ h2 \ h3 ......)
: Animated Matches all elements of the animation operation is being performed
Example:

$(document).ready(function(){
                $("div:lt(4)").addClass("myClass");// 除最后三个元素以外添加myClass
                $("div:not(.green,.gray)").addClass("myClass"); //除了green和gay以外的元素添加myClass
                $("div:gt(3)").addClass("myClass");//给最后三个元素添加myClass
                $("div:even").addClass("myClass");//偶数索引添加myClass
                $("div:odd").addClass("myClass");// 奇数索引添加没有Class
                $("div:eq(3)").addClass("myClass");//给指定索引添加myClass
                $("div:first").addClass("myClass");//第一个标签
                $("div:last").addClass("myClass");//最后一个标签
            });

Content Filter Selector

: Contains (text) selected text element contains text content; case-sensitive
: Empty Select element-free space or text node child elements
: Has (selector) to select an element comprising elements matched selector
: Parent element or selected elements containing text node child

Attribute filter selector

[Attribute] Select element has this property
[Attribute = value] value of this attribute value to select all the elements
[Attribute! = Value] value is not selected this attribute value of all elements
[Attribute ^ = value] value selected this attribute value is the beginning of all the elements
[Attribute $ = value] value selected this attribute value is the end of all the elements
[Attribute * = value] value selection attribute value contains all the elements

Form filter selector

Form attribute filter selector

jQuery effects

Hide and Show (hide / show)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hide()/show()</title>
    </head>
    <body>
        <div id="demo">
            <input type="button" id="hide" value="隐藏" />
            <input type="button" id="show" value="显示" />
            <div id="a1" style=
                "color: #000; 
                background-color: #66FF66;
                width: 100px;
                height: 100px;
                margin-top: 20px;
                text-align: center;">
                演示块
            </div>
        </div>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                $("#hide").click(function(){
                    // 隐藏
                    $("#a1").hide();
                })
                $("#show").click(function(){
                    //显示
                    $("#a1").show();
                })
            })
        </script>
    </body>
</html>
<!-- hide/show()语法原型
    $().hide(speed,callback);
    $().show(speed,callback);
     speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

toggle (): Switch

$("#toggle").click(function(){
    // toggle开关
    $("#a1").toggle();
});
<!-- 
     speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

fade in and fade out

fadeIn (): Fade hidden elements

grammar

$().fadeIn(speed,callback);
<!--
     speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

fadeOut (): fade visible elements

grammar

$().fadeOut(speed,callback);
<!-- 
    speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

fadeToggle (): fade in / out hidden / visible elements

grammar

$().fadeToggle(speed,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

fadeTo (): allowing the gradation for a given opacity (a value ranging between 0 and 1)

Syntax: This method strictly speaking, only the original 100% transparent to hide the opacity set to use

$().fadeTo(speed,opacity,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     opacity:设置给定的不透明度（0~1）
     callback:完成执行后调用的函数名称
-->

Examples

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>fadeIn()|fadeOut()|fadeToggle()|fadeTo()</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="demo">
            <input type="button" id="fadeIn" value="fadeIn" />
            <input type="button" id="fadeOut" value="fadeOut" />
            <input type="button" id="fadeToggle" value="fadeToggle" />
            <input type="button" id="fadeTo" value="fadeTo" />
            <br>
            <div id="a1" style="
                background-color: #5555FF;
                width: 300px;
                height: 100px;
                margin-top: 20px;
            ">  
            </div>
            <div id="info" style="display: none;">
                已隐藏
            </div>
        </div>
        <script>
            function info(){
                $("#info").toggle();
            }
            $(function(){
                $("#fadeIn").click(function(){
                    $("#a1").fadeIn("slow",info());
                    // slow:慢速的
                    // fast:快速的
                });
                $("#fadeOut").click(function(){
                    $("#a1").fadeOut("slow",info());
                });
                $("#fadeToggle").click(function(){
                    $("#a1").fadeToggle("slow",info());
                })
                $("#fadeTo").click(function(){
                    // 设置隐藏不透明度(通俗的讲就是颜色变淡并不是完全淡出)
                    $("#a1").fadeTo("slow",0.5);
                })
            })
        </script>
    </body>
</html>

slide

slideDown (): downward sliding element

grammar

$().slideDown(speed,callback);
<!-- 
    speed:slow\fast\毫秒值
    callback:完成动作后执行的函数名称
 -->

slideUp (): upward sliding element

grammar

$().slideUp(speed,callback);
<!-- 
    speed:slow\fast\毫秒值
    callback:完成动作后执行的函数名称
 -->

slideToggle (): up / down switching slide element

$().slideToggle(speed,callback);

Examples

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>slideDown()|slideUp()|slideToggle()</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <style type="text/css">
            *{margin: 0px;padding: 0px;}
            #Down,#Up,#Toggle{
                width: 60px;
                height: 20px;
                color: #000000;
                font-size: 10px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            #Down{background-color: #5555FF;}
            #Toggle{background-color: #FCFF9F;}
            #Up{background-color: #66FF66;}
            #slide{
                clear: both;
                background-color: #CCCCCC;
                width: 180px;
                height: 100px;
                border-top: #FF0000;
                text-align: center;
                position: relative;
            }
            #demo{margin: 10px 0px 0px 10px;}
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="Down">向下滑动</div>
            <div id="Toggle">滑动切换</div>
            <div id="Up">向上滑动</div>
            <div id="slide">
            </div>
        </div>
        <script>
            $(function(){
                $("#Down").click(function(){
                    $("#slide").slideDown();
                })
                $("#Up").click(function(){
                    $("#slide").slideUp();
                })
                $("#Toggle").click(function(){
                    $("#slide").slideToggle();
                })
            })
        </script>
    </body>
</html>

Animation

animate (): Create a custom animation

grammar

$().animate({css},speed,callback);
<!-- 
    {css}:定义动画的css属性
        （支持多个同时、支持相对值[+=/-=]、支持hide,toggle…等预定义值）
        支持‘队列’式的动画（即多个animate()组成一串（队列）动画）
    speed:slow/fast/毫秒值
    callback:执行完成调用函数
 -->

Examples

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animate()动画</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <style type="text/css">
            #demo{
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: #5555FF;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            
        </div>
        <script>
            $(function(){
                $("#demo").animate({
                    left:'300px',
                    width:'+=150px',
                    height:'+=150px',
                    // 支持多个样式的组合的动画
                    // 支持相对值
                },2000);//支持延迟
                $("#demo").animate({left:'10px',width:'-=100px',height:'-=100px'});
                $("#demo").click(function(){
                    $("#demo").animate({top:'100px'},1000);
                    $("#demo").animate({left:'100px'},1000);
                    $("#demo").animate({top:'0px'});
                    $("#demo").animate({left:'0px'});
                    // 支持队列组合的动画动作
                })
            })
        </script>
    </body>
</html>

Stop the animation or effect:
- grammar

$().stop(stopAll,goToEnd);
<!-- 
    stopAll:是否清除动画队列 默认false
    goToEnd:是否立即停止动画 默认false
    默认情况下，stop()会清除被选中的元素的当前动画
 -->

Callback()

After the implementation of the current animation 100% complete

jQuery DOM

Get / Set content

text () Set / back the selected text element [Prototype: innerhtml]
HTML () Set / return the contents of the selected element (including HTML tags)
Val () Set / value of the form field Lake FAN

Get / Set Properties

attr () Set / back properties of the content of the selected element (to support a plurality of attributes set, return an array)

Adding elements

append () tail insert elements
The prepend the beginning () insert elements
after () the selected element into the element
before () before it is inserted into the element selected elements

Removing elements

remove () to delete the selected elements and sub-elements
- It accepts a parameter, the filter element is removed (i.e. deleted specified)
- removeClass () to remove elements of the class load
empty () delete the child element of the selected element

jQuery CSS Get / Set

. addClass () to add one or more selected elements to classes Class
removerClass () to delete one or more specified class Class element selected from
toggleClass () of selected elements add / remove operations for switching
CSS () Set / Get Class property selected element
- css("classname","value") 单个
- css("classname":"value",……) 多个

jQuery size settings

jQuery size design

width () / height () Set / back element's width / height (Content; does not include the margins, borders, margins)
innerWidth () / innerHeight () Set / back element's width / height (Content + Padding;, without borders, margins)
outerWidth () / outerHeight () Set / back element's width / height (Content + Padding + Border; margins are not included)

jQuery traversal

Up to traverse the DOM tree

parent () to return to their direct parent element
Parents () returns all its direct earth elements (up to the root element)
parentsUntil () Returns all direct two direct earth element (not included)

// parents(*)/parentsUntil(*):两个方法在这里均可选一个参数接收

Traversing the DOM tree down

children () Returns all direct child elements of the selected element (supporting the filter parameter)
find () Returns the descendent elements of the selected element (support filtering parameter specify the label, class name, id, name, etc.)

Horizontal traversing the DOM tree

SIBLINGS () returns all sibling element of the selected element (supporting the filter parameter)
next () Returns the next sibling element selected from the elements
nextAll () returns the selected elements after all sibling element
nextUntil () returns all of the selected elements and sibling elements between the parameters
PREV () Returns the selected elements of a sibling element
prevAll () before all sibling elements selected elements returned
prevUntil () returns all of the selected elements and sibling elements between the parameters

Traversal filter

first () returns the first child element of the selected element
last () Returns the last child element of the selected element
EQ () Returns the selected elements with the specified index element (optional parameter specifying the index)
filter () returns all of the elements can be matched
not () returns all elements that do not match

jQuery AJAX

AJAX

AJAX = Asynchronous JavaScript + XML

Without overloading web page, the background data is loaded and displayed on the page
AJAX rookie tutorial jQuery ajax () method

AJAX load()

load () to load data from the server, and returns the data

Often used: calling a duplicate block of code, such as web navigation, and other versions of the block ......

It can greatly reduce the amount of code written work, modular development team should be used

grammar

$().load(URL,data,callback);
<!-- 
    URL:加载的数据文件位置uRL
    data:与URL加载请求一起发送的字符串键/值对集合
    callback:执行完毕后调用的函数
        - responseTxt : 调用成功的结果
        - statusTXT : 调用的状态
        - xhr : XMLHttpRequest对象
 -->

AJAX GET()

$ .Get () requests data from the specified resource
grammar

$.get(URL , callback);
<!-- 
    URL:加载的uRL
    callback:执行完毕后调用的函数
 -->

Examples

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

AJAX POST()

$ .Post () using the POST request to submit data to the server