Chapter 72 Foundations of jquery

Keywords: Oracle JQuery Attribute

Catalog

Introduction of jQuery

Guide reading

JQuery
 jq is the js tool library, a collection of functions
 The internal syntax of jq is native js
 How to build a jq environment: Introduce JQuery.js file into html that needs to use jq
 Local import (import of good files)

<script src="js/jquery-3.4.1.min.js"></script>

cdn import (linking external resources - online files: jquery CDN)

jq selector
 Using $('\ id') will go getelementbyid
 Use $('. class') // / to go queryselectorall

Transforming jq object into js object
 // The jq object is an array that takes values by index
 Transforming js object into jq object
 // throw js objects directly into $() and convert them into jq objects

jq incident
 Click on the object, get the object, and then bind the event 
1.$('.box').click(fn)
2.$('box').on('click', fn)
fn: function () {}
Do not use $("box"). on ('click', () => {}); // Get window

* As long as it is a value, it can be returned with a function.

jq operation content
let $inp = $('.inp')
let $div = $('.div')
1. $inp. val (do not write | new value | FN (index, old value))
2.$div.text()
3.$.html()
Change title
 Uppercase () string capitalization

jq style operation
let $div = $('.div')
1.$div.css('attribute value')
2.$div.css("attribute name", "attribute value")
3.$div.css({})
4.$div.addClass()
5.$div.removeClass()
6.$div.hasClass()

let $box = $('.box');
$box.click(function () {
    let e
})

1.jq API

http://jquery.cuishifeng.cn/

2.jq initial knowledge

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq initial</title>
</head>
<body>
    <h1>jQuery Namely js Tool library - A collection of functions</h1>
    <h2>jq Internal grammar is native. js</h2>
    <h2>jq How to Build Environment - In need of use jq Of html Introduce in jquery.js that will do</h2>
    <h2>jq Is to optimize the original js Logic of Fish Page Interaction</h2>
</body>

<!-- CDN Connecting external resources -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->

<script src="js/jquery-3.4.1.js"></script>
<script>
    // jQuery object
    console.log(jQuery);
    console.log($);
    console.log(Owen);

    console.log($('h1'));
    $('h1').click(function () {
        $('h1').css('color', 'red')
    })
</script>
</html>

2. jq selector

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <div id="d" class="box"></div>
    <input type="text" id="d2" class="box" />
    <h3 class="h3"></h3>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // jq selector: $('css selector syntax')
    let $div = $('#d');
    console.log($div);

    let $boxs = $('.box');
    console.log($boxs);

    // How jq objects are converted to js objects - jq objects can be understood as arrays containing js objects
    // That's to say, it takes values by index.
    let div = $div[0];
    console.log(div);

    console.log(document.getElementsByClassName('box')[0]);
    console.log(document.querySelectorAll('.box')[0]);
    console.log($div[0]);
    console.log($boxs[0]);
    console.log($boxs[1]);

    // How to convert js into jq objects
    let $newDiv = $(div);
    console.log($newDiv);

</script>
</html>

III. jq Events

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq Event</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let $box = $('.box');
    // $box.click(function () {
    //     // this is the tag clicked - js object
    //     console.log(this);
    //     console.log($(this));
    // });

    // jq objects can complete batch binding of events
    $box.on('click', function () {
        console.log(this);
        console.log(this.innerText);
        console.log($(this));
    });

    // js must be manually cyclically bound
    // let boxs = document.querySelectorAll('.box');
    // for (box of boxs) {
    //     box.onclick = function () {
    //         console.log(this);
    //         console.log($(this));
    //     }
    // }

</script>
</html>

4. jq content operation

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq Content manipulation</title>
</head>
<body>
    <h1 class="title">Title</h1>
    <input type="text" class="title">
    <button class="btn">Change title</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // js - jsObj.value | jsObj.innerText | jsObj.innerHTML
    // jq - jqObj.val() | jqObj.text() | jqObj.html()
    // Value: jqObj.text() | jqObj.text('new value') | jqObj.text(fn)

    let $btn = $('.btn');
    let $inp = $('input.title');
    let $h1 = $('h1.title');

    $btn.click(function () {
        let val = $inp.val();
        if (val) {
            // $h1.text(val);
            $h1.html(val);
            $inp.val(function (index, oldValue) {
                // return oldValue.toUpperCase()
                return ''
            })
        }
    })
</script>
</html>

5. jq style operation

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq Style operation</title>
    <style>
        .box {
            /*width: 200px;*/
            height: 200px;
            background-color: pink;
        }
        .sup-box {
            /*width: 400px;*/
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            line-height: 100px;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 600px">text</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let $box = $('.box');

    $box.click(function () {
        // Obtain
        let width = $box.css('width');
        console.log(width);

        // Single setup
        $box.css('background-color', function (index, oldvalue) {
            console.log(oldvalue);
            return 'red'
        });

        // Multiple settings
        $box.css({
            width: '100px',
            height: '100px',
            backgroundColor: 'blue',
        });

        if ($box.hasClass('sup-box')) {
            $box.removeClass('sup-box')
        } else {
            $box.addClass(function (index, oldvalue) {
                console.log(index, oldvalue);
                return 'sup-box'
            })
        }
    })
    
</script>
<script>
    // localStorage['name'] = 'owen';
    // sessionStorage['age'] = 18;
</script>
</html>

Posted by DapperDanMan on Mon, 07 Oct 2019 06:47:47 -0700