HTML Day 8 Summary

1.jQuery Introduction

1.1 JavaScript vs. jQuery

js:
1. There is only one entry function, window.onload
2. Browser compatibility: Very frustrating, for example, textContent is a standard method but only supports browsers above IE8+.
3. DOM is complex and difficult to achieve simple results
4. Poor code fault tolerance, resulting in subsequent code not executing

jQuery:
1. Market share rises steadily with fewer codes and powerful functions
2. DOM is more powerful and event handling completely solves the compatibility problem of browser
3. ajax operation (better)

1.2 What is jQuery

1. jQuery is a JavaScript function library.
2. jQuery is a lightweight JavaScript library that writes less and does more.
3. The jQuery library contains the following functions: HTML element selection, HTML element operation, CSS operation, HTML event function, JavaScript special effects, HTML DOM traversal and modification.

1.3 Why use jQuery

1. There are a large number of open source JS libraries on the network at present, but jQuery is the most popular JS library at present, and it provides a large number of extensions.
2. Many large companies are using jQuery, such as Google, Microsoft, IBM, Netflix.
3. Currently jQuery is compatible with all major browsers, including Internet Explorer 6!

2.jQuery Installation

1. From   jquery.com   Download jQuery Library

The jQuery library is a JavaScript file that you can reference using the HTML <script>tag:

<head> 

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

</head>

2. Load jQuery from CDN, such as from Google

<head> 

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 

</head>

3.jQuery syntax

3.1 Basic Grammar

1. Dollar symbol definition jQuery
2. selector "Query" and "Find" HTML elements
3. jQuery's action() performs operations on elements.

3.2 Example

1. You may have noticed that all jQuery functions in our instance are in a document read function:

$(document).ready(function(){ 

// Start writing jQuery code...  }

);

2. Simple writing (same as above):

$(function(){ 

// Start writing jQuery code...  

})
<script>
        // js writing overrides
        window.onload=function(){
            console.log(1);
        }
        window.onload=function(){
            console.log(2);
        }

        // var $;
        // var jQuery=$;
        jQuery(document).ready(function(){
            console.log(11);
        });
        jQuery(document).ready(function(){
            console.log(22);
        });
        $(document).ready(function(){
            console.log(13);
        });
        // Short form
        $(function(){
            console.log(14);
        });
    </script>

3.3 Understanding jQuery's $symbol

What is $

In fact, $is a function: $(); Different parameters, different functions

$Several common scenarios:

$(function() {});//Parameter is function, description is entry function
$("#btnSetConent");//The parameter is a string and begins with #and is a label selection looking for an element with id="btnSetContent"
$("div");//Find all div elements
$(document).ready(funciton(){})//Converting a document to a jQuery object

3.4   Differences between jQuery and JavaScript entry functions

  The entry function for jQuery is executed after all the html tags (DOMs) have been loaded.

  The window.onload event for JavaScript is not executed until all content, including files such as external pictures, is loaded.

4.   JQuery Selector

4.1   What is a jQuery selector

1. The jQuery selector allows you to manipulate groups of HTML elements or individual elements.
2. The jQuery selector is a set of methods provided by jQuery to make it easier for us to get the elements on the page. Note: The jQuery selector returns a jQuery object.
3. The jQuery selector finds (or selects) HTML elements based on their id, class, type, attribute, attribute value, and so on. It is based on existing CSS selectors, in addition to some custom selectors.
4. All selectors in jQuery begin with a dollar sign: $().

4.2   Basic selector

Name

usage

describe

ID Selector

$("#id");

Gets the element of the specified ID

Class selector

$(".class");

Gets the elements of the same class

tag chooser

$("div");

Get all elements of the same type of label

Union selector

$("div,p,li");

Separate them with commas as long as one of the criteria is met. Get all div, p, li elements

Intersection selector (label specifier selector)

$("div.redClass");

Notice that there is no space between selector 1 and selector 2, that the class is the div element of redClass, and that descendant selectors are distinguished.

Summary: Same usage as css selector

4.3   Hierarchical selector

Name

usage

describe

Descendant selector

$("ul>li");

Use the > sign to get elements at the son level, note that elements at the grandchild level are not taken

Descendant Selectors

$("ul li");

Use spaces to represent descendant selectors, get all li elements under ul, including grandchildren, etc.

Summary: Same usage as css selector

<script>
    // ID Selector
    $("#ID attribute value ";
    $("btn");
    // Class selector
    $(".class Attribute Value");
    $("dv")
    //tag chooser
    $("Label Name")
    $("div")
    // Intersection selector
    $("Label.class Attribute Value");
    $(div.dv)
    // Union selector
    $("selector,selector,....");
    $("li,a,p")
    // Offspring
    $('selector>selector');
    $('ul>li');
    // Descendants
    $('Selector selector');
    $('ul a');

    // attribute selectors
    // input object with type attribute
    $('input[typr]')
    // input tag object with type attribute value password
    $('input[type="password"]')
    // a tag with href attribute
    $('a[href]')
    // ^Start$End
    // a tag with href attribute and beginning of http
    $('a[href^=http]')
    // Has href attribute and is a label at the end of com
    $('a[href$=com]')
</script>

4.4   Filter selector

usage

describe

:eq(index)

$("li:eq(2)").css("color", "red");

Among the li elements obtained, select the element with index number 2, and index number index starts with 0.

:odd

$("li:odd").css("color", "red");

Select the element whose index number is odd among the li elements you get

:even

$("li:even").css("color", "red");

Select the element whose index number is even among the li elements you get

Summary: These selectors are coloned.

 <script>
        $(function(){
            // css(): Set style
            // 1 can be chained
            // 2 Pass a parameter, if it is an object, to set multiple attributes and values
            // 3 Pass two parameters, the first is an attribute and the second is a value, which sets a single attribute
            // 4 Pass a parameter and return the value of the property if it is a property name. It cannot be called chained

            // Subscript starts at 0
            // Get all the li, then just the third one
            // $("li:eq(2)").css('color','red');

            // Odd odd, even even subscript 0 begins
            // Total quotation marks, -can be written or converted to uppercase, but must be converted to uppercase if not in quotation marks
            // $("li:even").css({
            //     'background-color':'red',
            //     fontSize:'20px'
            // });
            

            // lt less than gt greater than
            $("li:lt(2)").css('color','pink');
            $("li:gt(3)").css('color','green');
        })

    </script>

4.5   Filter Selector (Method)

usage

Explain

children(selector)

$("ul").children("li")

Equivalent to $("ul>li"), subclass selector

find(selector)

$("ul").find("li");

Equivalent to $("ul li"), descendant selector

siblings(selector)

$("#first").siblings("li");

Find sibling nodes, not including yourself.

parent()

$("#first").parent();

Find Father

eq(index)

$("li").eq(2);

Equivalent to $("li:eq(2)"), index starts at 0

next()

$("li").next()

Find the Next Brother

prev()

$("li").prev()

Find your last brother

Index()

$("li").index()

Get the current location (index)

not()

$("p").not(".intro")

Returns all <p>elements without the class name "intro"

Summary: The function of the filter selector is somewhat similar to that of the filter selector, but the usage is different. The filter selector is mainly a method.

<script>
    $(function(){
        // Get all sublabels of div
        // $("div").children().css('color','red');

        // Gets the specified sublabel under div (excluding descendants)
        // $("div").children('span').css('color','red');

        // Get the specified descendant label under div
        // $("div").find('span').css('color','red');

        // Get the second sublabel (starting with subscript 0)
        // $("div").children().eq(1).css('color','red');

        // Get all brothers of h2 (same level, current scope, not self)
        // $('h2').siblings().css('color','red')

        // Next's next brother and sister, nextAll, all of them
        // $('h2').nextAll().css('color','red');

        // prev's last brother, all of prevAll's brothers
        // $('h2').prevAll().css('color','red');

        // Parent Label
        // $('h2').parent().css('color','red');

        // not who
        $('div').children().not('.h,span').css('color','red');

        // Gets the index of the span label's subscript in the div (the first sublabel, the subscript starts at 0)
        // 1
        console.log($('div').children('span').index())
    })
</script>

Tags: css3 html css

Posted on Wed, 24 Nov 2021 13:35:47 -0500 by 87dave87