JQuery introduction

JQuery is a fast and concise JavaScript framework, which is another excellent JavaScript code base (or JavaScript framework) after Prototype. The purpose of jQuery design is "write Less, Do More", that is to advocate writing less code and doing more. It encapsulates common JavaScript function code, provides a simple JavaScript Design pattern, optimizes HTML document operation, event processing, animation design and Ajax interaction.
You can see that JQuery requires a basic knowledge of JavaScript.

Three selectors

//Get elements from element id
 var btn=$("#btn");
//Get elements from element class
var btn=$(".btn");
//Get element from element label
var btn=$(button);
//Select all labels
var all=$("*");

See jQuery objects who array objects

JQuery object methods and properties

            var divhtml=$("#div1").html(); / / get the sub character node value

            //If only text is used for text operation, html is used for style operation
            console.log(divhtml);
            //$("div1").html("modify");
            var divtext=$("#div1").text(" modify ");
            console.log(divtext)

            var btn=$("#btn");
            //The attr() function takes one parameter to get other properties.
            //The attr() function takes two parameters to modify the property.
            console.log(btn.attr("type"));
            console.log(btn.attr("value","No more?"));
            //console.log(btn.attr("style","color:pink;"));
            //The css() function takes one parameter to get other properties.
            //The css() function has two parameters to modify the properties.
            btn.css("font-size");
            btn.css("font-size","30px");
            //Modify multiple
            btn.css({"color":"#dddddd","background":"blue"});

            //There are three types of attributes for JQuery label objects
            //1.val()/text():html()
            //2.attr()
            //3.css()


            //The array object traversed by $. each() generates the primitive dom object
            var divs=$("div");
            divs.css("color","red");
            divs.removeClass();//Delete style
            divs.addClass("bb");//Chain structure can be used
            divs.each(function () {
                console.log(this.innerHTML);

            })
        }