Basic knowledge of jquery

Source: Internet
Author: User
Tags tagname

Jquery

I. Introduction of jquery
1. jquery is a lightweight, browser-compatible JavaScript library

2. jquery makes it easier for users to work with HTML Document, Events, animate effects,
The convenience of Ajax interaction, which greatly simplifies JavaScript programming, is designed to:
Write less, does more.

Ii. jquery Objects
The jquery object is the object that is created after wrapping the DOM object through jquery, and the jquery object is the jquery unique
If an object is a jquery object, then it can use the method in jquery: For example, $ ("#il"). HTML ()
$ ("#il"). html () means: Gets the HTML code of an element with an ID value of I1, where HTML () is the method in jquery

Equivalent to: document.getElementById ("I1"). InnerHTML;
Although a jquery object is produced after wrapping a DOM object, the jquery object cannot use any of the DOM object's methods.
Similarly, DOM objects cannot use the methods in jquery.

A convention, when declaring a jquery object variable, precede the variable name with $:
var $variable = jquery Object
var variable = dom Object
$variable [0]//jquery object to DOM object

$ ("I1"). html (); jquery objects can use the jquery method
$ ("I1") [0].innerhtml; DOM objects using the DOM method

Iii. the basic syntax of jquery
$ (selector). Action ()

1. Find tags
Selector:
ID selector:
$ ("id")
Tag Selector:
$ ("TagName")
Class selector:
$ (". ClassName") in conjunction with $ ("div.c1")//Find div tags with c1.class class
All element selectors:
$("*")
Combo selector:
$ ("#id,. Classname,tagname")
Hierarchy selector:
X and y can be any selector
$ ("x y"); All descendants of X Y (descendants)
$ ("x > Y"); All sons of X Y (son)
$ ("x + y"); Find all the y immediately following the X
$ ("x ~ y"); X after all the brothers Y

Basic filters:
: First//One
: Last//FINAL
: EQ (Index)//index equals that element of index
: even//matches all elements with an even number of index values, counting from 0
: Odd//matches all elements with an odd index value, counting from 0
: GT (Index)//matches all elements greater than the given index value
: LT (index)//matches all elements less than the given index value
: not (element selector)//Remove all labels that meet not criteria
: Has (element selector)//Select all tags containing one or more tags (referring to the descendant elements)

Example:
$ ("Div:has (H1)")//Find div tags with h1 tags in all descendants
$ ("Div:has (. C1)")//Find DIV tags with C1 style classes in all descendants
$ ("Li:not (. C1)")//Find all Li tags that do not contain C1 style classes
$ ("Li:not (: Has (a)) ')//Find all descendants of the Li label that do not contain a tag

Form Common filters:
: Text
:p Assword
: File
: Radio
: checkbox
: Submit
: RESET
: button

Example:
$ (": checkbox")//Find All checkboxes

Form Object Properties:
: Enabled
:d isabled
: Checked
: Selected

Example:
<form>
<input name= "Email" disabled= "disabled"/>
<input name= "id"/>
</form>

$ ("input:enabled")//Find available Input tags

<select id= "S1" >
<option value= "Beijing" > Beijing </option>
<option value= "Shanghai" > Shanghai </option>
<option value= "Guagnzhou" > Guangzhou </option>
<option value= "Shenzhen" > Shenzhen </option>
</select>



Basic knowledge of jquery

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.