Home > Developer > Web Develop
[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?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/
Three search elements (selectors and filters) 3.1 Selector 3.1.1 Basic selector?| 1 | $("*") $("#id") $(".class") $("element") $(".class,p,div") |
| 1 | $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") |
| 1 | $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") |
| 1 | $(‘[id="div1"]‘) $(‘["alex="sb"][id]‘) |
| 1 | $("[type=‘text‘]")----->$(":text") 注意只适用于input标签 : $("input:checked") |
: Enabled :d isabled : Checked : Selected
<body><form> <input type= "checkbox" value= "123" checked> <input type= "checkbox" value= "456" checked> <select> <option value= "1" >Flowers</option> <option value= "2" Selected= "selected" >Gardens</option> <option value= "3" selected= "selected" >trees</option > <option value= "3" selected= "selected" >Trees</option> </select></form>< Script src= "Jquery.min.js" ></script><script> //Console.log ($ ("input:checked"). length); 2 //Console.log ($ ("option:selected"). length); Only one is selected by default, so you can only lenth:1 $ ("input:checked"). each (function () { Console.log ($ (this). Val ()) }) </ Script></body>| 1 | $("li").eq(2) $("li").first() $("ul li").hasclass("test") |
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 ()
| 12 | ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。$(document).ready(function(){}) -----------> $(function(){}) |
Syntax: label object. Events (functions) eg: $ ("P"). Click (function () {})$ (""). 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 switchingHover 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>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 Code<input id= "Chk1" type= "checkbox"/> Visible <input id= "chk2" type= "checkbox" checked= "checked"/> Visible < Script>//uses the Prop method for the intrinsic properties of the HTML element itself, when it is processed. 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//need to use the Prop method to operate in order to get the correct result. $ ("#chk1"). attr ("checked")// undefined// $ ("#chk1"). Prop ("checked")// false// --------- When manually selected, attr () obtains 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>jquery (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
