JQuary (from native js to jq, jq is easy)

Keywords: Javascript ECMAScript JQuery

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

    https://jquery.com/   Official website
    https://www.jquery123.com/  chinese
    Version below 2.0: version above 2.0 is not compatible with IE
    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>
        // 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
        // Feature 3: Implicit Iteration
       // Feature 5: chain operation $(). CSS (operation 1)

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 () {
$().ready(function () {
    $("div").mouseover(function () {
        console.log("Move in");
    $("div").mouseout(function () {
         window.onload  And $(). ready()
            When the documents and resources are loaded, they will be called.
            Adding more than once will overwrite the previous one
            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
    //$("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

3.jQuery selector

3.1 basic selector

    //ID: $("#id") gets the label of the corresponding ID name
    //Class: $(". Class name") gets the label of the corresponding class name
    //The selector in the element jQuery has no priority, only the order of precedence
    //Grouping elements
    //Add event
        console.log(this); //<li>< / Li > DOM element     $ (this) -- turn to jQuery
        //$(). index("selector"): add subscripts to all child elements of the parent element of the current element

3.2 hierarchy selector

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

3.3 basic filter selector

//: Location
$("li:odd").css("background","red");  //Odd number
$("li:even").css("background","pink"); //even numbers
//: EQ (subscript): start from 0
var index = 3;
//Not (selector): except
//gt(): get subscript greater than n    lt(): get subscript less than n

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")
    //-Get: $(). attr("property name")
    console.log($("div").attr("index")); //1
    //Delete: $(). removeAttr("property name")
    //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

4.2 operation class attribute

//1.$().addClass("class name"): append class
//2.$().removeClass("class name"): delete the corresponding class
//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
}else{ //No,
//4. $().toggleClass("class name"): switch. If the class currently exists, it will be deleted and added

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");
    if(ev.keyCode == 13){
        //2. Get form element content: $(). val()
        var v = $("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")
//2. Write multiple styles $(). css({attribute name ":" attribute value "})
    "width":200,  //If the number of attribute values is a number, number, string (unit to be added)
    "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

Posted by kestasjk on Mon, 22 Nov 2021 18:32:55 -0800