Home > Developer > Web Develop
jquery is a very good JS framework. Is the use of JS in the more commonly used methods to encapsulate the underlying. The slogan is "Write Less,do more".
Second, how to use jquery? (The whole idea of using jquery)1. After the page has finished loading
2. Find objects
3. Perform the event you want
4. Declaring an event (function ())
5, complete the contents of the event
Third, the first jquery programNote: 1. When the jquery file is introduced, the jquery file is placed before the JS file (the page is executed from top to bottom).
2, $ The role of one is page loading there is a jquery object to find
1<!DOCTYPE HTML>2<HTMLxmlns= "http://www.w3.org/1999/xhtml">3<Head>4<Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>5<title>First jquery Applet</title>6<Scriptsrc= "Js/jquery-1.10.2.min.js"></Script>7<Scriptsrc= "Js/demo.js"></Script>8</Head>9<Body>Ten<inputtype= "button"value= "First jquery applet"ID= "BTN"/> One</Body> A</HTML>
The jquery code is as follows:
// /<reference path= "_references.js"/>2 $ (function// page load 3 // found JQ object execution Event 4 function/ Declaration event 5 alert ("First jquery"); content within the execution event 6 }7 ); 8});JS Method Realization Click Time (DOM object)
// /<reference path= "_references.js"/ $ (function () {// page load // $ ("#btn"). Click ( // function () { // alert ("first jquery"); // ) ; document.getElementById ("btn"). onclick = function using DOM object to achieve click Effect" Summary: jquery objects can only be used with the jquery method. Dom objects can only be used with the JS method. There is no confusion between the two.
jquery objects and Dom objects are transferred to each other
// /<reference path= "_references.js"/>$ (function// page load // JQ Object goto DOM Object function () { alert ("JQ object goes to DOM object needs to add" 0 ");} });// /<reference path= "_references.js"/>$ (function// page load // DOM object to jquery object $ (document.getElementById ("BTN")). Click ( function () { alert (" Dom object to jquery object "); } );Select the second when creating a new Web Form:
Delete the extra folders generated by the system, leaving only scripts and Web. config:
Rename the Scripts folder to our familiar JS (also can not change, only recommend change), and create new folder CSS and image, and add pages in the corresponding location, HTML, CSS, JS
Drag the. min.js file that your mouse refers to in the HTML, and drag your new JS file underneath it.
* The relationship between the upper and lower positions do not eat, min.js must be on the top.
Drag the first JS file (_references.js) in the script folder to the top of your new JS file,
* This step function: Let JQ display smart tips, easy to write code.
Complete the above steps to begin normal program writing.
v. JQ selector notation (different from JS notation):"Example" declares an event on the button and pops up "AAAA" when clicked:
JS notation:
HTML: <input type= "button" value= "I am a button" onclick= "A ()"/>//appears a Click event A () js in:
function A ()
//
Declare the action of event A ()
{
//
popup box, display AAAA
}
JQ notation:
HTML: <input type= "button" value= "I am a button" id= "btn"/>//Set an ID selector with the name btn JS: $ (function() { // load the page, execute JQ after loading (to use JQ it is necessary to write this sentence first, this is a fixed statement, the internal write is the JQ content) $ ("#btn"). Clic K (function// find to ID selector btn, perform a click on it event, the event is declared with function, the content is: Alert (" AAAA "); ///popup box, display AAAA }) ;* Equivalent to JS is to spread the whole thing into the HTML and JS to write, only use this time, JQ is similar to CSS set a selector, and then the selector for the event settings, can be used many times.
Summarize:
(1) JS and JQ can be converted to each other.
(2) The JQ execution process is divided into the following 5 steps:
2.1. Load the page: $ (function () {});
2.2. Locate the object, such as ID tag: $ ("#btn")
2.3, execute the object corresponding event: click ();
2.4. Declaring the event: function () {}
2.5, the implementation of the event content: alert ();
(3) Priority issue: When the CSS and JQ in the same style, followed by the nearest principle, at this time the JQ notation, similar to the HTML tag in a style to write, so priority JQ.
six, ID selector: $ ("#btn")Like CSS, first declare an ID selector in HTML: id= "BTN", and then find this ID selector in the JS page: $ ("#btn"), and then perform an event operation on it.
Vii. class selector: $ (". Btn")First declare a class selector in HTML: class= "BTN", then find this ID selector in the JS page: $ (". Btn"), and then perform an event operation on it.
Eight, Tag selector: $ ("tr")The tag selector is found in the JS page based on the label written in the HTML, such as TR, TD, and the event action on it.
Nine, parity selector: odd (even), even (odd)$ ("tr:odd"), select All < tr > marks in the even line
$ ("Tr:even"), select All < tr > marks in odd lines
"Example" Alternate color table:
$ (function() {$ ("tr:odd"). CSS ("Background", "#f8f3d2"); The background color of the//even rows is #f8f3d2$ ("Tr:even"). CSS ("Background", "#ffcdcd"); /// odd rows with a background color of #ffcdcd});You can also write $ ("x") for the n+1 x tag of the x tag. EQ (n).
such as: $ ("tr"). EQ (2) refers to the third line.
11,nth-child(n) selector: $ ("X:nth-child (n)")Select the nth x label for the x tag.
such as: $ ("Td:nth-child (3)") means the 3rd column; $ ("Li:nth-child (4)"), which is the 4th Li tag.
"Supplemental" EQ (n) differs from Nth-child (n):
EQ (n): Select the n+1 x tag that all x tags are sorted in order, but only one x tag is selected on the whole page.
Nth-child (n): For all x tags will be sub-parent, child, grandchild, each level in order to arrange the nth label, all of them selected, you can select more than one label.
12, child element selector: $ ("Li>a")$ ("Li>a"), returns all child elements of the <li> tag <a>, but does not include the grandchild tag.
"Example" finds all child tags under li A, the text color is red:
<ul> <Li> <ahref= "#" >XXXX</a> <div><a href= "#">YYYY</a></Div> <ahref="#">Xxxx</a> <ahref="#"></a> </Li></ul>$ ("Li>a"). CSS ("Color", "red");
Effect: Only xxxx is red, yyyy is not changed, because YYYY is the Sun tag for Li (li>div>a).
13. Function function Prefix:
$.trim (s); Remove the front and back spaces of the S string.
"Example" removes the middle space in the string: (Turns the string into a character array and then replaces the space with none)
var s= "Das das"; var achar=s.split (""); // to change a string into a character array for (var i=0; i<achar.length;i++) { if(achar[i]== "") // when a character is encountered as a space { s=s.replace ("", ""); // Replace this space with none (the space is not replaced by a hyphen) }}alert (s); // print s$ ("A tag [a property]"): Select a tag with a certain attribute. Such as:
(1) $ ("A[target]") Select a tag with the target attribute;
(2) $ ("a[href= ' b.html ')" selects a tag with href= ' b.html ' attribute;
(3) $ ("a[href^=http://]") Select a tag that begins with http://;
(4) $ ("a[href$=html]") Select a tag ending in HTML
(5) $ ("a[href*=bbb]") to elect a label containing BBB
15. Include selector$ ("A tag: has (a property)"): Selects all the tags that contain a property. such as: $ ("Li:has (A)") contains all Li tags for hyperlinks
16. Position selector$ ("A tag: a location"): Select a tag in a particular location. Such as:
(1) $ ("P:first") select the first P label in the page
(2) $ ("P:last") select the last P label in the page
(3) $ ("P:first-child") selects all P tags, and these p tags are the first tag of their parent tag.
(4) $ ("P:last-child") selects all P tags, and these p tags are the last tag of their parent tag.
(5) $ ("P:nth-child (Odd)"). AddClass ("MyClass") selects all P tags, and these p-tags are even rows of their parent tags.
(6) $ ("p:odd"). AddClass ("MyClass") an even line P tag for the entire page
(7) $ ("P:eq (4)"). AddClass ("MyClass") Fifth P mark
(8) $ ("P:GT (N)"). AddClass ("MyClass") nth (starting from 0, excluding n itself) all P tags after the p tag, that is, starting from the first n+2 mark, such as $ ("P:GT (2)") is starting from fourth p.
17. Filter selector* Note: $ (": File") equivalent to $ ("input[type=file]")
$ (": Button") |
All buttons |
$ (": checkbox") |
All check boxes, equivalent to $ ("input[type= ' checkbox ']") |
$ ("Div:contains (' foo ')") |
All elements that contain the text "foo" |
$ (":d isable") |
All disabled elements (this is a problem, instead of the notation: $ ("input[disabled=disabled]"). attr ("value", "AAA");) |
$ (": Enable") |
All elements that are not disabled |
$ (": File") |
All upload controls |
$ (": input") |
All form elements |
$ (": Selected") |
Selected items in all drop-down menus |
$ (": visible") |
All visible elements |
$ (": Submit") |
All Submit button |
$ ("tag: not (: a property)"): Selects any label that does not have a property.
Filter out all tags that contain "one attribute" and leave other tags that do not have the attribute.
For example: $ ("A:not (: Target)"), which means to select all a tags that do not write target.
Jquery First Lesson (JQ selector: ID, class, label, parity, EQ, nth-child, child element, attribute, include, position, filter)
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
