November 8 Morning jquery basic syntax, picking elements, manipulating elements, adding events, hanging events, and removing events

Last Update:2016-11-10 Source: Internet

Author: User

Tags tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Basic knowledge of jquery

1.jquery file Introduction, all the JS code to be written below the code below.

<src= ".. /jquery-1.11.2.min.js "></script><!-- introduced jquery must be on top of the , but also on other jquery files that are introduced--

2. Where to write jquery code

Like JS, the jquery code is also written between the <script> start and end tags.

<type= "Text/javascript"></script>

jquery Select elements

1. Find Elements by ID

First write a <div> in <body>

<id= "A1"></div>

(1) Use JS to find, take the specific elements.

var a = document.getElementById ("a1"); alert (a);

(2) Use jquery to find the jquery object.

var b = $ ("#a1"); // use jquery to find the elements of the notation, #也是代表根据id找.  alert (b); alert (b[0]); // take an element from inside an object

2. Find elements based on class

First of all, write 2 <div> in <body>

<class= "AA"></div><   class= "AA"></div>

(1) Use JS to find

var a = Document.getelementsbyclassname ("AA"); alert (a);

(2) Use jquery to find

var b = $ (". AA")//alert (b); // alert (b[0]);//Take the first Div // alert (b[1]);//Take the second Divalert (b.eq (0)); // take the jquery object with EQ () and take the element itself with [].

3. Take elements based on tag name

(1) Use JS to find

var a = document.getElementsByTagName ("div");

(2) Use jquery to find

var b = $ ("div"); alert (b);

4. According to the name, take

First of all, write 1 <div> in <body>

<name= "CC"></div>

(1) Use JS to find

var a = Document.getelementsbyname ("cc");

(2) Use jquery to find

var b = $ ("[NAME=CC]"); // Filter by attribute, as long as it is a property, can be found.  //alert (b); Alert (b[0]);

jquery Action Elements

1. Operation Contents

(1) Non-form elements

<id= "A1"></div>

var a = document.getElementById ("a1");//a.innertext = "Hello"; a.innerhtml = " <  style= ' color:red '>World</span> ";

(2) Form elements

<type= "text"  ID= "P1"/>

var a = document.getElementById ("P1"); A.value= "Hello";

2. Operating elements

(1) Non-form elements

Assignment value:

<id= "A1"></div>

var b = $ ("#a1"); B.text ("AAA")//b.html ("AAA" )

(2) Form elements

Assign value

var b = $ ("#a1"); B.val ("AAA")

Take value

var b = $ ("#a1"); B.val ();

3. Operation Properties

JS Operation Properties

A.setattribute ("", ""); A.setattribute (""); A.removeattribute ("");

jquery Action Properties

var b = $ ("#a1"); B.attr ("BS", "1"); // Add b.attr ("BS"); // gets the value of the BS attribute b.removeattr ("BS"); // Remove BS attribute

4. Operation Style

(1) JS operation style

JS cannot get inline properties, only get inline.

A.style.color = red;

(2) jquery operation style

jquery can get, set inline, external, inline styles.

Alert (b.css ("width")); // Gets the style b.css ("Font-size", "50px"); // Set Style

Hide the 3 div practice

<styletype= "Text/css">. AA{width:100px;Height:100px;Background-color:#0F0}<!--write properties in inline mode--</style>

<class= "AA"></div><   class= "AA"></div><  class = "AA" ></ Div >

(1) JS notation

var a = Document.getelementsbyclassname ("AA");  for (var i=0;i<a.length;i++) {    = "None";}

(2) The wording of jquery

$ (". AA"). CSS ("display", "none");

jquery events, hanging events, removing events

<DivID= "A1">11</Div><Divclass= "AA"BS= "1">Aaa</Div><Divclass= "AA"BS= "2">Bbb</Div><Divclass= "AA"BS= "3">Ccc</Div><inputtype= "text"ID= "P1" /><inputtype= "button"ID= "B1"value= "Hang Event" /><inputtype= "button"ID= "B2"value= "Remove Event" />

//jquery plus Events$ (document). Ready (function(e) {//Execute event After page load is complete        //Add a click to A1        /*$ ("#a1"). Click (function () {alert (' AA ');            })//For all elements of Class AA plus event $ (". AA"). Click (function () {//alert (' BB '); Alert (This). text ());//Take text value. This selects which//alert ($ (this). attr ("BS"));//Take the property value $ (". AA"). CSS ("Background-color", "#0F0 *//First let all the colors change to the original color $ (this). CSS ("Background-color", "Red");//click on which background color to change to red})*/                //The second way of hanging events$ ("#b1"). Click (function(){//Anonymous Functions                $("#a1"). Bind ("click",function(){//bind indicates a hang eventAlert ("I was hanging on the event"); })                    $("#b2"). Click (function(){                        $("#a1"). Unbind ("click");//Unbind removing events                    })                        })            });

November 8 Morning jquery basic syntax, picking elements, manipulating elements, adding events, hanging events, and removing events

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More