[Original] Jquery first experience 2: jquery first experience
Quick navigation
1. Traditional Table Generation
Ii. Use the jquery. tmpl plug-in to quickly generate a Table
Iii. Methods for operating class in Jquery
Iv. Cloning in jq
V. Attribute Filter
6. Form element filter
1. Traditional Table GenerationVar slave learr = [{"name": "Liu Huan", "age": 50, "skill": "Start from scratch" },{ "name": "Yang Kun ", "age": 35, "skill": "32 singing Concerts" },{ "name": "Na Ying", "age": 50, "skill ": "Dark during the day" },{ "name": "Faye Wong", "age": 45, "skill": "Compound"}] $ (function () {var $ tbCreate = $ ("<table> </table>") // generate table var $ trTitle = $ ("<tr> </tr> "). append ("<td> NO. </td> "). append ("<td> name </td> "). append ("<td> age </td> "). append ("<td> Skill </td>"); $ tbCreate. append ($ trTitle); // Add the title to the tb array // generates tr for (var I = 0; I <peopleArr. length; I ++) {// generate a tr var $ trCreate =$ ("<tr> <td> <input type = 'checkbox' class = 'chkone'/>" + (I + 1) + "</td> </tr>"); // loop object array, generate other td for (var item in objective learr [I]) {var $ tdCreate = $ ("<td>" + inclulearr [I] [item] + "</td>"); // Add it to tr $ trCreate. append ($ tdCreate);} // Add tr to table $ tbCreate. append ($ trCreate);} // Add table to the body $ (document. body ). append ($ tbCreate );
Ii. Use the jquery. tmpl plug-in to quickly generate a Table
<Script src = "jquery/jquery-1.9.1.js"> </script> <script src = "jquery/jquery. tmpl. min. js"> </script> first introduce this jsIii. Methods for operating class in Jquery
The fields to be displayed are placeholder <script type = "text/x-jquery-tmpl" id = "tmpl01"> <! -- // Prepare the template and use placeholders, property name --> <tr> <td> <input type = "checkbox" class = "chkOne"/> </td> <td >$ {name} </td> <td >$ {age} </td> <td >$ {skill} </td> <a href = "#"> Delete </a> <a href = "#"> edit </a> </td> </tr> </script> <script type = "text/javascript"> var multiple learr = [{"name": "Liu Huan", "age": 50, "skill": "Start from scratch" },{ "name": "Yang Kun", "age": 35, "skill ": "32 singing Concerts" },{ "name": "Na Ying", "age": 50, "skill": "" },{ "name ": "Faye Wong", "age": 45, "skill": "Compound"}] //. tmpl method. Only the import plug-in has a // loop object array. Each object in the array generates a template dom element var $ tmplTr = $ ("# tmpl01 "). tmpl (repeated learr); // The returned result is a jq object. here, the instructor deliberately writes ohyeah $ (function () {$ tbCreate = $ ("<table> </table>") separately "). append ($ tmplTr); // Add the table to the body $ (document. body ). append ($ tbCreate) ;}) </script>
<Html xmlns = "http://www.w3.org/1999/xhtml"> Description in the API: if there is (does not exist), delete (ADD) a class $ ("div "). toggleClass ("black") ;}) $ ("# btnRedAdd "). click (function () {// Add class $ ("div "). addClass ("red") ;}) $ ("# btnRedRemove "). click (function () {// Delete class $ ("div "). removeClass ("red ");})}) </script> Iv. Cloning in jq
Cloning in jq will clone sub-nodes regardless of the depth. The shallow cloning in jq will only clone elements, but the events will not be cloned. The deep cloning in jq will also clone the events.
<Html xmlns = "http://www.w3.org/1999/xhtml"> V. Attribute Filter
<Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> </title> <script src =" jquery/jquery-1.9.1.js "> </script> <script type =" text/javascript "> alert (" wait a moment "); $ (function () {// indicates an element with a certain attribute $ ("li [skill]" ).css ("backgroundColor", "orange "); // indicates that the property is equal to a value $ ("li [skill = noNice]" ).css ("fontSize", "50px "); // indicates that the property is not equal to a value $ ("li [skill! = NoNice] ").css (" color "," # 0094ff "); // attribute filter, which can be used to determine any attribute, including id and class. // applicable range, is a filter of elements $ ("li [class]" ).css ("border", "5px solid # 0094ff "); $ ("li [class = vegetable] [prize = 10]" ).css ("backgroundColor", "green ");}) </script> 6. Form element filter
<Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> </title> <script src =" jquery/jquery-1.9.1.js "> </script> <script type =" text/javascript "> $ (function () {$ ("# btnShowNum "). click (function () {// use the form element filter to obtain the selected checkbox alert ($ ("input [type = checkbox]: checked "). length );})}) </script>
If you feel good after reading this article, click 【Follow] To support the blogger. Thank you!
If you feel good after reading this article, click
[Recommended]
Author:Feng Xiaoyi
QQ: 616931
Source:Http://www.cnblogs.com/fenglingyi
Statement:The copyright of this article is shared by the author and the blog Park. This statement must be retained without the author's consent and the original article connection must be clearly provided on the article page. Otherwise, the legal liability will be retained.
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
