1. Introduction to jquery

jQuery is an excellent JavaScript library that enables more functionality with minimal code

• characteristic:

  1. Powerful selector function  $ ("selector")
  2. Introduction to grammar  $ ("selector").action()
  3. Implicit iteration  $ ("div").click();    // Five div will automatically add click events in a loop
   4. Chain operation  $ (""). Operation 1 (). Operation 2 (). Operation 3 ()
  5. Good compatibility

2. Use

2.1 introduction

Download:
    https://jquery.com/   Official website
    https://www.jquery123.com/  chinese
 edition:
    Version below 2.0: version above 2.0 is not compatible with IE
 introduce:
    Download the jQuery file locally
    jQuery files on online CDN

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<!-- Import downloaded local jQuery -->
    <!-- <script src="./js/jquery-3.6.0.js"></script> -->
​
<!-- Introduction of Online  CDN:Content distribution network-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
        // Feature 1: syntax introduction $("selector"). Method ();
        // Feature 2: powerful selector function. Selectors can be used in all css and jQuery
        // Feature 4: simplified html document operation, animation effect, ajax, event
        $(".box").css({"width":100,"height":100,"background":"red"});
        // Feature 3: Implicit Iteration
       $(".box").click(function(){
       // Feature 5: chain operation $(). CSS (operation 1)
      $(this).css({"background":"teal"}).siblings().css({"background":"red"})
});
</script>

2.2 the role of $

jQuery.js file    A jQuery object is created, and various methods are encapsulated on this object
window.jQuery = window.$ = jQuery

2.3 jQuery loading method

// When files and resources are loaded, they are called.
// window.onload = function () {
//     var oDiv = document.getElementsByTagName("div")[0];
//     oDiv.onclick = function () {
//          alert("click");
//     }
// }
// window.onload = function () {
//     var oDiv = document.getElementsByTagName("div")[0];
//     oDiv.onmouseover = function () {
//          alert("move in");
//     }
// }
​
​
//Loading method of jQuery
$(document).ready(function () {
    $("div").click(function () {
        console.log("click");
    })
});
​
$().ready(function () {
    $("div").mouseover(function () {
        console.log("Move in");
    })
});
​
$(function(){
    $("div").mouseout(function () {
        console.log("Remove");
    })
});
​
/* 
         window.onload  And $(). ready()
         window.onload 
            When the documents and resources are loaded, they will be called.
            Adding more than once will overwrite the previous one
         $().ready()
            When the document is loaded, it will be called.
            If you add it multiple times, it will be superimposed
        */

Note the difference between window.onload and $(). ready()

2.4 relationship between jQuery object and DOM object

• Can coexist

  //jQuery and js can coexist
  $("div").css({ "width": 200, "height": 200, "background": "gold" });
  var oDiv = document.getElementsByTagName("div")[0];
  oDiv.style.background = "teal";

• Can not be mixed

  //Can not be mixed
  //oDiv.css({"width":100});
  //$("div").style.width = "100px";

• Can be converted to each other

  //Can be converted to each other
  console.log(oDiv);  //DOM object label element collection node list
  console.log($("div")); //jQuery object
  ​
  //DOM object ---- jQuery object   $ (DOM)
  console.log($(oDiv)); //jQuery.fn.init [div]
  ​
  //jQuery object ---- convert to DOM object
  console.log($("div")[0]);

3.jQuery selector

3.1 basic selector

$(function(){
    //ID: $("#id") gets the label of the corresponding ID name
    $("#middle").css({"background":"pink"});
​
    //Class: $(". Class name") gets the label of the corresponding class name
    $(".box").css({"background":"teal"});
​
    //The selector in the element jQuery has no priority, only the order of precedence
    $("li").css({"background":"orange"});
​
    //Grouping elements
    $("p,span").css({"color":"green"});
​
​
    //Add event
    $("li").click(function(){
        console.log(this); //<li>< / Li > DOM element     $ (this) -- turn to jQuery
        $(this).css({"background":"teal"});
        //$(). index("selector"): add subscripts to all child elements of the parent element of the current element
        console.log($(this).index());;
        console.log($(this).index("li"));;
    });
});

3.2 hierarchy selector

//Descendant Selectors  
$("div span").css({"color":"red"});
​
//Progeny selector
$("div>span").css({"color":"teal"});
​
//+: adjacent sibling selector
$("p+span").css({"color":"orange"});
//~: all behind
$("p~span").css({"color":"orange"});

3.3 basic filter selector

//: Location
$("li:first").css("background","red");
$("li:last").css("background","red");
$("li:nth-child(2n)").css("background","red");
$("li:nth-child(2n+1)").css("background","pink");
$("li:odd").css("background","red");  //Odd number
$("li:even").css("background","pink"); //even numbers
​
//: EQ (subscript): start from 0
$("li:eq(2)").css("background","red");
var index = 3;
$("li").eq(index).css("background","pink");
​
//Not (selector): except
$("li:not(.box)").css("background","pink");
$("li").not(".box").css("background","pink");
​
​
//gt(): get subscript greater than n    lt(): get subscript less than n
$("li:lt(3)").css("background","red");
$("li:gt(2)").css("background","#ccc");

3.4 attribute filter selector

//E[attr]: match the e tag with attr attribute
$("div[class]").css("background", "pink");
​
//E[attr=value]: matches the e tag with attr attribute and value bit value
$("div[class=box2]").css("background", "red");
​
//E[attr!=value]: matches the e tag with attr attribute and value other than value
$("div[class!=box2]").css("background", "teal");
​
//E[attr^=value]: match the e tag with attr attribute and value starting with value
$("div[class^=b]").css("background", "teal");
​
//E[attr$=value]: e tag with attr attribute and value ending with value
$("div[class$=4]").css("background", "orange");
​
//E[attr*=value]: matches the e tag with attr attribute and value
$("div[class*=s]").css("background", "deeppink");

3.5 form selector

//Form selector
console.log( $(":input")); //Get all the form elements    (input button textarea select)
​
// : type of input. Get the specific type of input
console.log($(":text")); //Document box
console.log($(":radio")); //Radio 
​
//: checked: gets the selected label of the selection box
console.log( $(":checkbox:checked"));
console.log( $(":checkbox:checked").length);

Note that common selectors: id, element, class, grouping, descendant, descendant and eq must be mastered

4.jQuery operation tag attribute

4.1 operation label properties

• Native js operation tag attribute: tag. Attribute name = "attribute value"“

• DOM operation label properties:

  • Setting: label. setAttribute("attribute name", "attribute value")

  • Get: tag. getAttribute("attribute name")

  • Delete: tag. removeAttribute("attribute name")

• jQuery action label properties

  • $(). attr(): operation of custom attributes (generally used, both custom and inherent can be operated)

    -Setting: $(). attr("attribute name", "attribute value") (js value assignment)

    -Get: $(). attr("property name")

    -Delete: $(). removeAttr("property name")

  • $(). prop(): Operation intrinsic attribute (if checked attribute of input tag, prop must be used)

    -Setting: $(). prop("property name", "property value") (js value assignment)

    -Get: $(). prop("property name")

    -Delete: $(). removeProp("property name")

  //-Setting: $(). attr("property name", "property value")
  $("div").attr("id","active");
  ​
  //-Get: $(). attr("property name")
  console.log($("div").attr("index")); //1
  ​
  //Delete: $(). removeAttr("property name")
  $("div").removeAttr("class");
  ​
  ​
  //Difference: if the attribute value is true or false, use prop to operate the attribute
  console.log($("input").attr("checked")); //checked  undefined
  console.log($("input").prop("checked")); //true false
  $("input").prop("checked",false);

4.2 operation class attribute

//1.$().addClass("class name"): append class
$(this).addClass("active");
​
//2.$().removeClass("class name"): delete the corresponding class
$(this).removeClass("active");
​
//3.$().hasClass("class name"): judge whether there is a class name in the current element, return true if there is one, and return false if there is none
if($(this).hasClass("active")){ //have
    $(this).removeClass("active");
}else{ //No,
    $(this).addClass("active");
}
​
​
//4. $().toggleClass("class name"): switch. If the class currently exists, it will be deleted and added
$(this).toggleClass("active");

5.jQuery operation label content

• Native js

  • Form element: label. value

  • Closed tag: tag. innerHTML/innerText operation closes the tag content, overwrites the original content, innerHTML identifies the tag, innerText does not recognize the tag

• jQuery

  • Form element: $(). val();

  • Closed element: $(). html()/text();

//1. Set form element: $(). val("value")
$("input").val("The Yellow River flows into the sea");
$(window).keydown(function(ev){
    if(ev.keyCode == 13){
        //2. Get form element content: $(). val()
        var v = $("input").val();
        console.log($("input").val());
​
        //3. Get the closed element content $(). html()
        console.log($("div").html()); //   < p> The day is at the end of the mountain</p>
        console.log($("div").text()); //     The day is at the end of the mountain
​
​
        //4. Set the closed element content $(). html();
        //  $("div").html(v); / / will overwrite the previous
        $("div").html($("div").html()+"<p>"+v+"</p>");  //Will overwrite the previous
        //  $("div"). Text ($("div"). Html() + "< p >" + V + "< / P >"); / / will overwrite the previous
    }
})

6. Operation label style

• Native js: tag. style. Attribute name = attribute value

• jQuery: $().css()

 //1. Write a single style $(). css("property name", "property value")
$("div").css("background","pink");
​
//2. Write multiple styles $(). css({attribute name ":" attribute value "})
$("div").css({
    "width":200,  //If the number of attribute values is a number, number, string (unit to be added)
    "height":"200px",
    "margin-top":"200", //Invalid setting
    "height":"hahahah", //If you don't give an error, just don't set the label, it means that this line of code is invalid
    marginLeft:"200px" //The object key can be without quotation marks. If it is a composite attribute, the hump identification is used
})