jquery-Basic Knowledge

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)

Back to the top of what is a 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 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.

Back to TopWhat is a jQuery object?

The jquery object is the object that is generated after wrapping the DOM object through jquery. jquery objects are unique to jquery . if an object is a jquery object , then it can use the method in jquery : $ ( "#test"). html ();

            This 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 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 converted to DOM object      $ ("#msg"). html (); $ ("#msg") [0].innerhtml

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

Reference: http://jquery.cuishifeng.cn/

Back to top three looking for elements (selectors and filters) 3.1 Selector 3.1.1 Basic selector

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

3.1.2-level Selector

1	$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3.1.3 Basic Filter

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

3.1.4 Property Selector

1	$(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)

3.1.5 Form Selector

1	$("[type=‘text‘]")----->$(":text")         注意只适用于input标签  : $("input:checked")

3.1.6 Form Property Selector

    : Enabled    :d isabled    : Checked    : Selected

View Code3.2 Filter 3.2.1 Filter Filter

1	$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

3.2.2 Find Filters

Find child Tags:         $ ("div"). Children (". Test")      $ ("div"). Find (". Test")                                  looks down on 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 ()  
               Find parent Tag:         $ (". Test"). Parent ()              $ (". Test"). Parents ()     
                    

Back to top four action elements (properties, CSS, document handling) 4.1 Events page loading

12	ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。$(document).ready(function(){}) -----------> $(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>$ ("ul Li"). Click (function () {alert (123function () { var $ele =$ ("<li> // $ ("ul"). On ("Click", "Li", function () {// alert (456) // })  $ ("#off"). Click ( () {$ ("ul Li"   

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

View Code4.2 Property Operations

--------------------------CSS Class $ (""). AddClass (CLASS|FN) $ (""). Removeclass ([CLASS|FN])
--------------------------Property $ (""). attr (); $ (""). Removeattr (); $ (""). Prop (); $ (""). Removeprop ();
--------------------------HTML code/text/value $ (""). HTML ([VAL|FN]) $ (""). Text ([VAL|FN]) $ (""). Val ([Val|fn|arr])
---------------------------$ ("#c1"). CSS ({"Color": "Red", "fontSize": "35px"})

The Attr method uses:

View Code4.3 Each loop

We know

1	$("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:

Way One

Format: $.each (OBJ,FN)

li=[10,20,30,40];d ic={name: "Yuan", Sex: "Male"};$.each (Li,function(i,x) {Console.log    (i,x )});

Way Two

Format: $ (""). each (FN)

$ ("tr"). each (function() {    Console.log ($ (this). html ())})   

Where the $ (this) refers to the current loop label.

Each extensionView Code4.4 Document Node Processing

//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]]) 

4.5 animation effects Show hiddenView CodeSlidingView CodeFade in and fadeView Codecallback functionView Code4.6 CSS Action CSS position operation

        $ (""). Offset ([coordinates])        $ (""). Position ()        $ (""). ScrollTop ([Val])        $ (""). ScrollLeft ([Val])

Example 1:

View Code

Example 2:

View Code

Example 3:

View CodeDimension operation

        $ (""). Height ([VAL|FN])        $ (""). Width ([VAL|FN]) $ (""). Innerheight () $ (""        ). Innerwidth ()        $ (""). Outerheight ([soptions])        $ (""). Outerwidth ([options])

Example:

View CodeBack to top extension method (plug-in mechanism) Jquery.extend (object)

Extends the jquery object itself.

Used to add new functions to the jquery namespace.

Add two functions to the jquery namespace:

<Script>Jquery.extend ({min:function(A, B) {ReturnA<B?A:B; }, Max:function (A, b) {return< Span style= "COLOR: #000000" > a > b ?  a:b;}); Jquery.min (2,3// = 2 Jquery.max ( Span style= "COLOR: #000000" >4,5 // = 5</script>         

JQuery.fn.extend (object)

Extend the JQuery element set to provide new methods (usually used to make plugins)

Add two plugin methods:

<Body><InputType= "checkbox"><InputType= "checkbox"><InputType= "checkbox"><ScriptSrc= "Jquery.min.js"></Script><Script>JQuery.fn.extend ({check:function() { $(This). attr ("Checked ",true); }, uncheck: function () {$ ( This "checked< Span style= "COLOR: #000000" > ",false); } }); $ ( ":checkbox:gt (0) " Span style= "COLOR: #000000" >). Check () </script></body>              

Jquery-Basics