jquery based on the front end

First, what is jquery

[1] jquery was created by American John Resig and has attracted many JavaScript gurus from around the world to join its team.

[2] jquery is a new type of JavaScript library. JQ is written with JS, can be achieved with JQ, with JS can be achieved, jquery API only open to themselves, JQ can not use JS Api,js also can not use the JQ API

[3] It is a lightweight JS library (only 21k after compression), this is not the other JS library, it is compatible with CSS3, but also compatible with a variety of browsers

[4] jquery is a fast, concise JavaScript library that makes it easier for users to handle htmldocuments, events, animate, and easily provide Ajax interactivity to websites.

[5] The big advantage of jquery is that its documentation is full, and that the various applications are detailed, as well as a number of mature plugins to choose from.

Ii. jquery Objects

' JQuery   jquery packaging domjquery   object is   exclusive .   jquery   object ,   Span class= "S5" > Then it can use  jquery  

$ ("#test"). html ()             means: Gets the HTML code within the element with ID test. where HTML () is the method in jquery          This code is equivalent to using the JS implementation code: document.getElementById ("test"). InnerHTML;          Although jquery objects are generated after the JavaScript object is wrapped, jquery cannot use any of the DOM object's methods, nor can JS objects use the methods in jquery. Random use will         error var $variable =  JQuery Object var variable = dom (JS) object $variable[0]:jquery object to DOM object      $ ("#msg"). html (); $ ("#msg ") [0].innerhtml

JQ object and JS (DOM) object conversion:

//Js-->jquery        varOBox = document.getElementById ("box"); Obox.innerhtml= "888";
$ (oBox). HTML ("888")        //Jq-->js        var$p = $ ("#box p"); $p. HTML ("11111"); $p [0].innerhtml ("111"); $p. Get (2). InnerHTML = "111"; //JQ---> Specific JQ        var$p = $ ("#box p"); $p. HTML ("333"); $p. EQ (1). HTML ("888");

Three, JQ selectors and filters

The basic selector      $ ("*") $ ("#id") $ (". Class") $ ("element") $ ("  . Class,p,div")is: all, ID, class, label, multi-select level selector   $(". Outer div") $ (". Outer>div") $ (". Outer+div") $ (  ".  Outer~div") The following are: Descendants, descendants, neighbors, sibling attribute selectors $(' [id= ' Div1 "] ')   $ (' [" alex= "SB"][id] ') are: Select the form selector for the defined properties      $ ("[ Type= ' text '] ")----->$ (": Text ")         note applies only to the input tag  : $ (" input:checked ")

Form selector:

    : Enabled    :d isabled    : Checked    : Selected

Basic filters:

Basic Filters         = $ ("Li:first")    // take first         console.log (a        )= $ ("Li:eq (2)")    // take the one with index 2         Console.log (b)        = $ ("Li:even")     // Fetch first         one Console.log (c)        = $ ("LI:GT (3)")    // several re-fetch        Console.log (d)    

Filter Mode two:

$ ("li"). EQ (2)  $ ("Li"). First ()  $ ("ul Li"). Hasclass ("test")

Relationship Filter

        //Hasclass checks whether the current element contains a particular class, if any, returns true. otherwise false        //children find a son, can not pass parameters        //Find the default not to find, pass the argument to find the corresponding parameter descendants        //Parent is looking for parents, B does not require arguments        //parents (". Show") found an ancestor named show        //sibings do not pass the argument, find the corresponding parameters of the brother        //Alert ($ ("P"). Hasclass ("Box2") FalseConsole.log ($ ("#box"). Children ("P")); Console.log ($ ("#box"). Children ()); Console.log ($ ("#box"). Find ("P"))

Cases:

Find child Tags:          $ ("div"). Children (". Test")      $ ("div"). Find (". Test")                                  looks down the sibling tag:     $ (". Test"). Next ()               $ (". Test"). Nextall ()                          $ (". Test"). Nextuntil ()                             look up brother tag:     $ ("div"). Prev ()                  $ ("div"). Prevall ()                             $ ("div"). Prevuntil ()    Find all Brothers Tags:     $ ("div"). Siblings ()                 finds the parent tag:          $ (". Test"). Parent ()              $ (". Test"). Parents ()                          $ (

Property manipulation

        //attr set/Get Tag Properties        //removattr () Remove label Properties        //        //AddClass        //removeclass ()        //Pass in the parameter, class, then remove the corresponding class        //If the parameter is not transmitted, remove all        //Toggleclass ()        //there is a class to delete, no increase        //        //JQuery JS        //        //html () InnerHTML        //text () InnerText        //val () value        var$box = $ ("#box"); Alert ($box. attr ("Class") ) $box. attr ("Class", "Little Lady") $box. attr ("Py", "XP"); $box. Removeattr ()

About attr in depth:

<input id= "Chk1" type= "checkbox"/> Visible <input id= "chk2" type= "checkbox" checked= "checked"/> Visible < Script>//for HTML elements that have intrinsic properties, use the Prop method when processing. //for HTML elements our own custom DOM properties, when processing, use the Attr method. //for elements like Checkbox,radio and select, the selected attribute corresponds to "checked" and "selected", which are also intrinsic properties, so//you need to use the Prop method to operate to get the correct results. //$ ("#chk1"). attr ("checked")//undefined//$ ("#chk1"). Prop ("checked")//false//attr () gets a meaningless undefined when---------manually selected-----------//$ ("#chk1"). attr ("checked")//undefined//$ ("#chk1"). Prop ("checked")//trueConsole.log ($ ("#chk1"). Prop ("checked"));//falseConsole.log ($ ("#chk2"). Prop ("checked"));//trueConsole.log ($ ("#chk1"). attr ("checked"));//undefinedConsole.log ($ ("#chk2"). attr ("checked"));//checked</script>

View CodeActions such as document nodes, HTML tags, etc.

//Create a Label object$ ("<p>")//Internal Insertion    $(""). Append (CONTENT|FN)----->$ ("P"). Append ("<b>Hello</b>"); $(""). AppendTo (content)----->$ ("P"). AppendTo ("div").); $(""). Prepend (CONTENT|FN)----->$ ("P"). Prepend ("<b>Hello</b>"); $(""). Prependto (content)----->$ ("P"). Prependto ("#foo");//External Insert    $(""). After (CONTENT|FN)----->$ ("P"). After ("<b>Hello</b>"); $(""). Before (CONTENT|FN)----->$ ("P"). Before ("<b>Hello</b>"); $(""). InsertAfter (content)----->$ ("P"). InsertAfter ("#foo"); $(""). InsertBefore (content)----->$ ("P"). InsertBefore ("#foo");//Replace$ (""). ReplaceWith (CONTENT|FN)----->$ ("P"). ReplaceWith ("<b>paragraph. </b> ");//Delete    $(""). Empty () $ (""). Remove ([expr])//Copy    $(""). Clone ([Even[,deepeven]])

JQ Event:

Event Bindings:

var $box = $ ("box");    $box. Click (function  () {        alert (1)    })

Event delegation, which is another way to bind events, can bind multiple events

Syntax: $ (""). On (EVE,[SELECTOR],[DATA],FN)  //an event handler that is bound to one or more events on the selection element.
Eve: Event Type
fn: function

//On binding order events$ ("Li"). On ("click",function() {alert ($ ( This). Index ())//within JQ index () is your corresponding subscript    })//On binding Multiple events$ ("#box"). On ({"Click":function() {alert (1); },        "Click2":function() {alert (1); },        "Click3":function() {alert (3)        }

Each traversal (loop):

// Method One // format: $.each (OBJ,FN)$ ("#box p"). each (function  (i) {            this. InnerHTML = "I am the first" + i + " A ";            $ (this). HTML ("I am the first" + i + "a");        }) // Method Two // Format: $ (""). each (FN)li=[10,20,30,40];d ic={name: "Yuan", Sex: "Male"};$.each (Li, function (i,x) {    console.log (i,x)});

The CSS operation of JQ:

//CSS Settings Style        //. CSS ()        //The following information is returned for the corresponding        //. Width ()        //. Height ()        //        //innerwidth ()/innerheight will count padding.        //outerwidth ()/Outerheight will count Padding+border.        //        //offset ()        //the object has the Top/left property        //represents the value to the browser        //        //position ()        //the object has the Top/left property        //represents the value to the parent        //var $box = $ ("#box");        //$box. CSS ("height", "200px");        ////OBox.style.height = "200px"; Of course to get Obox        ////$box. CSS ({        ////"width": "400px",        ////"height": "300px",        ////"Background": "Red"        // // }) To multiple Styles        //alert ($box. Width ())        //alert ($box. Height ())

jquery based on the front end