Day (08/15) jquery operation elements (attributes, CSS, document processing)

Source: Internet
Author: User

Four action elements (attributes, CSS, document processing) 4.1 Event 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>
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 extension
/*  function f () {for (Var i=0;i<4;i++) {if (i==2) {  return} console.log (i)}} f (); This example should not be a problem for everyone!!!    -----------------------------------------------------------------------li=[11,22,33,44];   $.each (Li,function (i,v) {if (v==33) {return;            = = = Try a return false what? } console.log (v)});//------------------------------------------//Think again: return in function only ends the current function and does not affect the execution of the subsequent function//this is not a problem, but because there are a lot of situations in our demand: we do not matter when we loop to the first function, once return,//hope that the subsequent function is no longer executed! Based on this, jquery adds another step in the $.each: for (             var i in obj) {ret=func (i,obj[i]);             if (Ret==false) {return; }}//This is very flexible://<1> If you want to return after the following loop function continues to execute, then directly write return or return TRUE//<2> if you do not want to return after the following loop function Continue, then write the return false//---------------------------------------------------------------------
4.4 Document Node Processing
Create a Label object    $ ("<p>")//Inside Insert    $ (""). 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) {return a < b? a:b;},      max:function (A, b) {return a > B? A:B; }});    Jquery.min (2,3); = 2    Jquery.max (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><input type= "checkbox" ><input type= "checkbox" ><input type= "checkbox" ><script src= "Jquery.min.js" ></script><script>    jQuery.fn.extend ({      check:function () {         $ (this). attr ("Checked", true);      },      uncheck:function () {         $ (this). attr ("checked", false);      }    );    $ (": checkbox:gt (0)"). Check () </script></body>

Http://www.cnblogs.com/yuanchenqi/articles/6936986.html Detailed reference Teacher Blog

Day (08/15) jquery operation elements (attributes, CSS, document processing)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.