Wpython Learning drip Recording-day15-the front-end basis of jquery

Knowledge Preview

• What is a jquery?
• What is a jquery object?
• Three search elements (selectors and filters)
• Four manipulation elements (attributes, CSS, document processing)
• Extension methods (plug-in mechanism)

What is a jquery? 

jquery is currently the most widely used JavaScript library of functions. According to statistics, the world's top 1 million sites, 46% use jquery, far more than other libraries. Microsoft even took jquery as their official repository. For web developers, it is necessary to learn jquery. Because it allows you to understand the industry's most common technologies, laying the groundwork for learning more advanced libraries in the future, and it's really easy to make many complex effects.

[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 another excellent JavaScript framework following prototype. Its purpose is--write Less,do more!

[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.

What is a jQuery object?

jquery   jquery wrapper dom The object produced after the object. jquery   object is   exclusive .   jquery   object ,   Span class= "S5" > Then it can use  jquery  

 $ ( "  #test   " ). HTML () means: Gets the HTML code within the element with the ID test. where HTML () is the method in jquery this code is equivalent to using the DOM implementation code: document.getElementById (  "  test   " ). InnerHTML; Although jquery objects are created after wrapping a DOM object, jquery cannot use any of the methods of the DOM object, nor does the DOM object use the method in JQuery. The error convention is that if you get a jquery object, you need to precede the variable with $. var $variable  = JQuery object var variable  = DOM object $variable [0]:jquery object to DOM object $ (  "  #msg   "). html (); $ ( "  #msg  "  ) [0].innerhtml 

Basic syntax for jquery:$ (selector). Action ()

Three-look for elements (selectors and filters) 3.1 Selector 3.1.1 Basic selector

$ ("*") $ ("  #id") $ ("   . Class ") ")  $ ("element")  $ (". Class,p,div")

3.1.2-level Selector

$ (". Outer div") $ ("  . Outer>div")   $ (" . Outer+div ")  $ (". Outer~div")

3.1.3 Basic Filter

$ ("li:first")  $ ("li:eq (2)")  $ ("li: Even") $ ("li:gt (1)")

3.1.4 Property Selector

$ ('[id= ' Div1 "]')   $ ('[" alex= "SB"][id])

3.1.5 Form Selector

$ ("[type= ' text ']")----->$ (": Text")         note applies only to the input label  : $ ("input:checked")

3.1.6 Form Property Selector

    : Enabled    :d isabled    : Checked    : Selected

3.2 Filter 3.2.1 Filter Filter

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

3.2.2 Find Filters

Find Child Tags: $ ("div"). Children (". Test") $ ("div"). Find (". Test")

Look down brother Tag: $ (". Test"). Next () $ (". Test"). Nextall ()
$ (". Test"). Nextuntil ()

Look up Sibling Tags: $ ("div"). Prev () $ ("div"). Prevall ()
$ ("div"). Prevuntil ()
Find all Brothers Tags: $ ("div"). Siblings ()

Find parent Tag: $ (". Test"). Parent () $ (". Test"). Parents ()
$ (". Test"). Parentuntil ()

Four action elements (attributes, CSS, document processing) 4.1 Event page loading

Ready (FN)  //-----------> $ (function () {})

Event Bindings

Syntax:  label object. Events (functions)    eg: $ ("P"). Click (function () {})

Event Delegation:

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

<ul> <li>1</li> <li>2</li> <li>3</li></ul>"Add_li">add_li</button><button id="if">off</button><script src="Jquery.min.js"></script><script>    $("ul Li"). Click (function () {alert (123)    }); $("#add_li"). Click (function () {var $ele=$("<li>"); $ele. Text (Math.Round (Math.random ()*10)); $("ul"). Append ($ele)});//    $("ul"). On ("Click","Li", function () {Alert (456)//    })     $("#off"). Click (function () {$ ("ul Li"). Off ()})</script>

Event switching

Hover Event:

A method that mimics the hover event (moving the mouse over an object and moving out of the object). This is a custom method that provides a "keep in" state for frequently used tasks.

Over: The mouse moves to the function to be triggered on the element

Out: The mouse moves out of the element to trigger the function

<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style> *{margin:0;        padding:0;            }. test{width:200px;            height:200px; Background-color:wheat; }    </style>class="Test"></div></body><script src="Jquery.min.js"></script><script>//function Enter () {Console.log ("Enter")//    }//function out () {Console.log (" out")//    }// $(". Test"). Hover (enter,out) $ (". Test"). MouseEnter (function () {Console.log ("Enter")});$(". Test"). MouseLeave (function () {Console.log ("Leave")    });</script>View Code4.2 Property Operations
--------------------------CSS Class $ (""). AddClass (class|FN) $ (""). Removeclass ([class|fn])--------------------------Properties $ (""). attr (); $ (""). Removeattr (); $ (""). Prop (); $ (""). Removeprop ();--------------------------HTML code/text/value of $ (""). HTML ([val|FN]) $(""). text ([val|FN]) $(""). val ([val|fn|arr])---------------------------$("#c1"). CSS ({"Color":"Red","fontSize":"35px"})
The Attr method uses:
<input id="Chk1"Type="checkbox"/>is visible<input id="Chk2"Type="checkbox"Checked="checked"/>is 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---------manually selected attr () get to meaningless undefined-----------//$ ("#chk1"). attr ("checked")//undefined//    $("#chk1"). Prop ("checked")//true Console.log ($ ("#chk1"). Prop ("checked"));//false Console.log ($ ("#chk2"). Prop ("checked"));//true Console.log ($ ("#chk1"). attr ("checked"));//undefined Console.log ($ ("#chk2"). attr ("checked"));//checked</script>
View Code
4.3 Each loop
We know
$("p").css("color","red")
is to add the CSS action to all the labels and maintain a loop internally, but if you do different processing for the selected tag, you need to loop through all the tag arrays.
jquery supports two ways of looping:
Wpython Learning drip Recording-day15-the front-end basis of jquery