JavaScript study notes (five) jQuery

Others 2019-11-14 12:19:50 views: null

jQuery is a JavaScript library that is compatible with most of the current browsers, summary includes the following features:

  • Select elements
  • Operating elements
  • Style settings
  • Event Action
  • Transition and animation
  • AJAX

1, the installation

(1) In the official website to download in jQuery, incorporated by <script> tag in the project

jQuery offers two versions available for download, namely, the production version (in fact for line) and a development version (for development and testing)

Downloaded jQuery is a JavaScript file that can be introduced through the <script> tag in the project

(2) introducing a CDN directly

It can also be introduced by jQuery CDN, CDN, for example here in an official

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

2, Grammar

(1) basic grammar

Just learned HTML, CSS, JavaScript friend, will feel very familiar with the syntax of jQuery

A separate statement jQuery can be divided into three parts,$(selector).action()

  • $: Global jQuery references
  • selector: Select a specific HTML elements
  • action: Selection of the operating element

(2) perform an inlet

In order to prevent run before the document is fully loaded jQuery code, we generally will write jQuery code in the following callback function

// 常规语法
$(document).ready(function(){
    // 其它 jQuery 代码
})

// 简写语法
$(function(){
    // 其它 jQuery 代码
})

3, select the elements

jQuery can be used to select a particular HTML element, which is similar to CSS selectors, but it made a certain amount of expansion

(1) CSS selectors

This part of the syntax similar to CSS selectors, a common id selector, class selector, etc., not much here for the presentation

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("p").css("font-weight", "bold")
        })
    </script>
</head>
<body>
    <p>Say Hello To Tomorrow</p>
    <p>Say Goodbye To Yesterday</p>
</body>
</html>

(2) expand

Ancestor

  • parent(): Returns the selected element's father element
  • parents(): Returns all of the selected element ancestor
  • parentsUntil(<selector>): Return between selected elements and a given element of all ancestor

Descendant elements

  • children(): Returns all children of the selected element sub-elements
  • find(): Returns all descendant elements of the selected element

Siblings

  • siblings(): Returns all of the selected element siblings
  • next()/ prev(): Returns selected elements of the next / previous sibling
  • nextAll()/ prevAll(): After the return of the selected element / elements in front of all the brothers
  • nextUntil(<selector>)/ prevUntil(<selector>): Returns all between siblings and between selected elements of a given element

Filter elements

  • first(): Returns the first element of the selected element
  • last(): Returns the last element of the selected element
  • eq(<index>): Returns the selected element element with the specified index
  • filter(<selector>): Return the right elements
  • not(<selector>): Return does not meet the conditions of the elements
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素选取</title>
    <style>
        .relationship * {
            display: block;
            color: gray;
            border: 1px solid gray;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#selected").parentsUntil("body").css({
                "color" : "red",
                "border": "1px solid red"
            })
        })
    </script>
</head>
<body class="relationship">
    <div>
        祖父元素
        <div>
            其它元素
            <div>其它元素</div>
            <div>其它元素</div>
        </div>
        <div>
            父亲元素
            <div>之前的兄弟元素</div>
            <div>上一个兄弟元素</div>
            <div id="selected">
                选中元素
                <div>
                    孩子元素
                    <div>孙子元素</div>
                    <div>孙子元素</div>
                </div>
                <div>
                    孩子元素
                    <div>孙子元素</div>
                </div>
            </div>
            <div>下一个兄弟元素</div>
            <div>之后的兄弟元素</div>
        </div>
    </div>
</body>
</html>

4, the operating element

Providing a series of operations jQuery DOM methods for accessing and manipulating the elements and their attributes

(1) access and operating elements

  • text([<text>] | [<function>]): Access or manipulate the contents of the selected text element
  • html([<html>] | [<function>]): Access or manipulate the contents of the selected element
  • val([<value>] | [<function>]): Access or manipulate the value of the form field
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>访问和操作元素</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#set_text").click(function(){
                $("#to_change").text("change into text")
            })
            $("#set_html").click(function(){
                $("#to_change").html("<b>change into html</b>")
            })
        })
    </script>
</head>
<body>
    <p id="to_change">waiting to change</p>
    <button id="set_text">set text</button>
    <button id="set_html">set html</button>
</body>
</html>

(2) to access and manipulate attributes

  • prop(<property>[, <value>] | { <property>: <value>, ... }): Access and manipulate the selected element property

    If the specified property exists, it returns the corresponding value; If no attribute is an empty string

  • attr(<attribute>[, <value>] | { <attribute>: <value>, ... }): Access and manipulate the selected element property

    If the specified property exists, it returns the corresponding value; if not specified attribute, returning undefined

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>访问和操作属性</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        function selectAll(checkbox) {
            // 注意，这里不能使用 attr，否则会有错误
            // 因为使用 attr 将会返回 undefined
            let isAll = $(checkbox).attr("checked")
            $("input[name='fruit']").prop("checked", isAll)
        }
    </script>
</head>
<body>
    <p>What fruit do you like to eat?</p>
    <p><input type="checkbox" name="fruit" value="all" onclick="selectAll(this)" />All</p>
    <p><input type="checkbox" name="fruit" value="apple" />Apple</p>
    <p><input type="checkbox" name="fruit" value="banana" />Banana</p>
    <p><input type="checkbox" name="fruit" value="cherry" />Cherry</p>
</body>
</html>

(3) add an element

  • append(<text>|<html>): Adding content in the selected element ending (still belong to the elements)
  • prepend(<text>|<html>): Adding content at the beginning of the selected element (still belong to the elements)
  • after(<text>|<html>): Add content behind the selected element (not part of the element)
  • before(<text>|<html>): Adding content in front of the selected element (not part of the element)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加元素</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        // 在添加文本后，请打开控制台看看 DOM 结构，比较它们之间的区别
        $(function(){
            $("#add_text").click(function(){
                $("#origin_text").before("<p>before oringin text</p>")
                $("#origin_text").prepend("<p>prepend to oringin text</p>")
                $("#origin_text").append("<p>append to oringin text</p>")
                $("#origin_text").after("<p>after oringin text</p>")
            })
        })
    </script>
</head>
<body>
    <p id="origin_text">origin text</p>
    <button id="add_text">add text</button>
</body>
</html>

(4) remove elements

  • remove(): Delete the selected element and its descendant elements
  • empty(): Delete the selected element descendant elements
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        // 在删除元素后，请打开控制台看看 DOM 结构，比较它们之间的区别
        $(function(){
            $("#remove_elem").click(function(){
                $("#to_remove").remove()
            })
            $("#empty_elem").click(function(){
                $("#to_empty").empty()
            })
        })
    </script>
</head>
<body>
    <div id="to_remove">
        waiting to remove
        <p>la la la</p>
        <p>bla bla bla</p>
    </div>
    <button id="remove_elem">remove element</button>
    <br/><br/>
    <div id="to_empty">
        waiting to empty
        <p>la la la</p>
        <p>bla bla bla</p>
    </div>
    <button id="empty_elem">empty element</button>
</body>
</html>

5, style settings

jQuery also provides a method of operating style, style and class settings for elements

（1）class

  • addClass(<class>): Add class to the selected element, you can add one or more
  • removeClass(<class>): Delete the selected element from the class, you can delete one or more
  • toggleClass(<class>): The selected elements add / delete class switching operations
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作 class</title>
    <style>
        .rectangle {
            width: 100px;
            height: 80px;
            cursor: pointer;
        }
        .red-color {
            background-color: rgb(255, 0, 0);
        }
        .green-color {
            background-color: rgb(0, 255, 0);
        }
        .blue-color {
            background-color: rgb(0, 0, 255);
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            let currColorIndex = 0
            let nextColorIndex = 1
            let indexColorMapping = {
                0: "red-color",
                1: "green-color",
                2: "blue-color",
            }
            let colorNum = Object.keys(indexColorMapping).length
            $("#primary_color").click(function(){
                $("#primary_color").removeClass(indexColorMapping[currColorIndex])
                $("#primary_color").addClass(indexColorMapping[nextColorIndex])
                currColorIndex = nextColorIndex
                nextColorIndex = (nextColorIndex + 1) % colorNum
            })
        })
    </script>
</head>
<body>
    <div id="primary_color" class="rectangle red-color"></div>
</body>
</html>

（2）style

  • css(<property>[, <value>] | { <property>: <value>, ... }): Style or access the selected set of elements
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作 style</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            let interval = 10
            $("#larger").click(function(){
                let font_size_string = $("#para").css("font-size").trim("px")
                let font_size_number = parseInt(font_size_string)
                let larger_font_size = (font_size_number + interval) + "px"
                $("#para").css("font-size", larger_font_size)
            })
        })
    </script>
</head>
<body>
    <div id="para" style="font-size: 10px;">这是一段文字</div>
    <br/><br/><button id="larger">larger</button>
</body>
</html>

（3）size

  • width(): Get or set the element width (width)
  • height(): Access or set the element's height (height)
  • innerWidth(): Get or set the width of the element (width + padding)
  • innerHeight(): Get or set the height of the element (height + padding)
  • outerWidth(): Get or set the width of the outer element (width + padding + border)
  • outerHeight(): Get or set the height of the outer element (height + padding + border)
  • outerWidth(true): Get or set the width of the outer element (width + padding + border + margin)
  • outerHeight(true): Get or set the height of the outer element (height + padding + border + margin)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作 size</title>
    <style>
        .rectangle {
            display: block;
            width: 100px;
            height: 80px;
            margin: 20px 30px;
            padding: 20px 30px;
            border: 5px solid deeppink;
            background-color: cornflowerblue;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#rectangle_width").text(function(index, oldText){
                return oldText + $(".rectangle").width() + "px"
            })
            $("#rectangle_height").text(function(index, oldText){
                return oldText + $(".rectangle").height() + "px"
            })
            $("#rectangle_inner_width").text(function(index, oldText){
                return oldText + $(".rectangle").innerWidth() + "px"
            })
            $("#rectangle_inner_height").text(function(index, oldText){
                return oldText + $(".rectangle").innerHeight() + "px"
            })
            $("#rectangle_outer_width").text(function(index, oldText){
                return oldText + $(".rectangle").outerWidth() + "px"
            })
            $("#rectangle_outer_height").text(function(index, oldText){
                return oldText + $(".rectangle").outerHeight() + "px"
            })
            $("#rectangle_outer_width_true").text(function(index, oldText){
                return oldText + $(".rectangle").outerWidth(true) + "px"
            })
            $("#rectangle_outer_height_true").text(function(index, oldText){
                return oldText + $(".rectangle").outerHeight(true) + "px"
            })
        })
    </script>
</head>
<body>
    <div class="rectangle"></div>
    <p id="rectangle_width">rectangle width: </p>
    <p id="rectangle_height">rectangle height: </p>
    <p id="rectangle_inner_width">rectangle inner width: </p>
    <p id="rectangle_inner_height">rectangle inner height: </p>
    <p id="rectangle_outer_width">rectangle outer width: </p>
    <p id="rectangle_outer_height">rectangle outer height: </p>
    <p id="rectangle_outer_width_true">rectangle outer width true: </p>
    <p id="rectangle_outer_height_true">rectangle outer height true: </p>
</body>
</html>

6, event operations

In jQuery, for most of the event operation has an equivalent method of jQuery

(1) mouse event

  • click(<callback>): Click on the selected element
  • dbclick(<callback>): Double-click the selected element
  • mouseenter(<callback>): Move the mouse to select elements
  • mouseleave(<callback>): Mouse out of the selected element
  • hover(<mouseenter>[, <mouseleave>]): Hover selected element
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style>
        .wrapper {
            width: 260px;
            height: 80px;
            background-color: black;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .content {
            width: 240px;
            height: 60px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $(".content").css({
                "color": "ghostwhite",
                "border": "1px solid rgba(255, 255, 255, 0.5)"
            }).mouseenter(function(){
                $(".content").css({
                    "color": "white",
                    "text-shadow": "1px 1px 2px ghostwhite",
                    "border": "1px solid rgba(255, 255, 255, 1)",
                    "box-shadow": "5px 5px 50px rgba(255, 255, 255, 0.4) inset"
                })
            }).mouseleave(function(){
                $(".content").css({
                    "color": "ghostwhite",
                    "text-shadow": "none",
                    "border": "1px solid rgba(255, 255, 255, 0.5)",
                    "box-shadow": "none"
                })
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="content">Hello World</div>
    </div>
</body>
</html>

(2) keyboard events

  • keypress(<callback>): Press a key of the keyboard, and generates a trigger character
  • keydown(<callback>): When you press a button to trigger the keyboard
  • keyup(<callback>): When you release the keys of a keyboard trigger

(3) form events

  • submit(<callback>):submit Form
  • change(<callback>): The value of the element is changed elected
  • focus(<callback>): Get elected elements in focus
  • blur(<callback>): Elected to the element loses focus

(4) Document / window events

  • resize(<callback>): Resize the browser window size
  • scroll(<callback>): Scroll specified element

7, transition and animation

In jQuery, it can also handle the transition and animation effects

(1) Show hidden

  • hide([<speed>[, <callback>]]): Hide the selected element
  • show([<speed>[, <callback>]]): Display the selected element
  • toggle([<speed>[, <callback>]]): Switch hide()and show()methods to hide or display the selected element
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#show_or_hide").click(function(){
                $("#para").toggle()
            })
        })
    </script>
</head>
<body>
    <p id="para">这是一段文本</p>
    <button id="show_or_hide">Show / Hide</button>
</body>
</html>

(2) Fade

  • fadeIn([<speed>[, <callback>]]): Fade Hidden selected element
  • fadeOut([<speed>[, <callback>]]): Fade visible selected element
  • fadeToggle([<speed>[, <callback>]]): Switch fadeIn()and fadeOut()methods fade in or out the selected element
  • fadeTo(<speed>, <opacity>[, <callback>]): Opacity is set to the specified element
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: cornflowerblue;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            setInterval(function(){
                $(".circle").fadeIn(1000).fadeOut(500)
            }, 1500)
        })
    </script>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

(3) Sliding

  • slideDown(<speed>[, <callback>]): Slide down the selected element
  • slideUp(<speed>[, <callback>]): Swipe up selected element
  • slideToggle(<speed>[, <callback>]): Switching slideDown()and slideUp()methods selected element slides downward or upward
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滑动</title>
    <style>
        .announcement {
            width: 200px;
            height: 20px;
            background-color: deepskyblue;
            text-align: center;
            cursor: pointer;
        }
        .content {
            width: 200px;
            height: 80px;
            background-color: lightskyblue;
            display: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $(".announcement").click(function(){
                $(".content").slideToggle(750)
            })
        })
    </script>
</head>
<body>
    <div class="announcement">announcement</div>
    <div class="content"></div>
</body>
</html>

(4) Animation

  • animate({<property>: <value>, ...}[, <speed>[, <callback>]]): Set custom animation for the selected element
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .circle {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: cornflowerblue;
            font-size: 20px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#announcement").click(function(){
                $("#announcement").animate({
                    "width": "250px",
                    "height": "250px",
                    "border-radius": "125px"
                }).animate({
                    "font-size": "25px"
                })
            })
        })
    </script>
</head>
<body>
    <div id="announcement" class="circle">announcement</div>
</body>
</html>

8、AJAX

  • load(<URL>, <data>, <callback>): Load data from the server, and the return of data into the selected element
  • get(<URL>, <callback>): Request data from a specified resource
  • post(<URL>, <data>, <callback>): Submit data to the specified resource
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#get_data").click(function(){
                $.post("http://www.httpbin.org/post", {
                    "username": "admin",
                    "password": "123456"
                }, function(data, status){
                    console.log(data)
                    $("#response_status").text(function(index, oldText){
                        return oldText + status
                    })
                })
            })
        })
    </script>
</head>
<body>
    <button id="get_data">get data</button>
    <p id="response_status">response status: </p>
</body>
</html>

[Read More JavaScript series of articles, look at JavaScript study notes ]

Guess you like

Origin www.cnblogs.com/wsmrzx/p/11855961.html
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com