一.傳統方式生成Table
二.使用jquery.tmpl插件快速生成Table
三.Jquery中的操作class的幾個方法
四：jq里面的克隆
五：屬性過濾器
六：表單元素過濾器
var peopleArr = [ { "name": "劉歡", "age": 50, "skill": "從頭再來" }, { "name": "楊坤", "age": 35, "skill": "32唱演唱會" }, { "name": "那英", "age": 50, "skill": "白天不懂夜的黑" }, { "name": "王菲", "age": 45, "skill": "復合" } ] $(function () { var $tbCreate = $("<table></table>")//生成table var $trTitle = $("<tr></tr>").append("<td>序號</td>").append("<td>姓名</td>").append("<td>年齡</td>").append("<td>技能</td>"); $tbCreate.append($trTitle);//將標題加到tb中 //循環數組,生成tr for (var i = 0; i < peopleArr.length; i++) { //每循環一次生成一個tr var $trCreate = $("<tr><td><input type='checkbox' class='chkOne'/>" + (i + 1) + "</td></tr>"); //循環對象數組,生成其他td for (var item in peopleArr[i]) { var $tdCreate = $("<td>" + peopleArr[i][item] + "</td>"); //加到tr里面 $trCreate.append($tdCreate); } //將tr加到table里面 $tbCreate.append($trCreate); } //將table加到body里面 $(document.body).append($tbCreate);
<script src="jquery/jquery-1.9.1.js"></script> <script src="jquery/jquery.tmpl.min.js"></script>首先要引入這個js
需要顯示的字段在這里先占位 <script type="text/x-jquery-tmpl" id="tmpl01"> <!--//準備模板,使用占位符,屬性名--> <tr> <td><input type="checkbox" class="chkOne" /></td> <td>${name}</td> <td>${age}</td> <td>${skill}</td> <td><a href="#">刪除</a> <a href="#">編輯</a></td> </tr> </script> <script type="text/javascript"> var peopleArr = [ { "name": "劉歡", "age": 50, "skill": "從頭再來" }, { "name": "楊坤", "age": 35, "skill": "32唱演唱會" }, { "name": "那英", "age": 50, "skill": "白天不懂夜的黑" }, { "name": "王菲", "age": 45, "skill": "復合" } ] //.tmpl方法,只有導入插件才有 //循環對象數組,數組里面的每一個對象,都會生成一個模板dom元素 var $tmplTr = $("#tmpl01").tmpl(peopleArr);//返回的是jq對象.這里是老師故意分開寫 ohyeah $(function () { $tbCreate = $("<table></table>").append($tmplTr); //將table加到body里面去 $(document.body).append($tbCreate); }) </script>
<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> <style type="text/CSS"> div { border: 1px solid #0094ff; height: 100px; width: 100px; } .red { background-color: red; } .black { background-color: black; } </style> <script type="text/Javascript"> $(function () { $("#btnChange").click(function () { //切換class//toggleClass 會判斷 是否有這個class 如果有 刪除,如果沒有,就添加
API中的說明：如果存在（不存在）就刪除（添加）一個類 $("div").toggleClass("black"); }) $("#btnRedAdd").click(function () { //增加class $("div").addClass("red"); }) $("#btnRedRemove").click(function () { //刪除class $("div").removeClass("red"); }) }) </script></head><body> <input type="button" value="黑白切換" id="btnChange" /> <input type="button" value="增加redclass" id="btnRedAdd" /> <input type="button" value="移除redclass" id="btnRedRemove" /> <div></div> <div></div> <div></div></body></html>
jq里面的克隆,不管深淺,都會克隆子節點，jq里面的淺克隆,只是克隆元素,事件不克隆，jq里面的深克隆,事件一并克隆了
<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"> var $button = $("<input type='button' value='點擊刪除自己' onclick='$(this).remove();'/>"); //為button設置點擊事件 //使用jq的方法為dom元素增加事件,當這個dom元素從dom樹里面移除,事件也沒有了 //如果要實現,將dom元素從dom樹里面移除,事件還在,可以將事件寫道dom元素的 事件屬性里面 $(function () { $("#btnAdd").click(function () { //將 按鈕 追加到body里面去 $(document.body).append($button); }); }) </script></head><body> <input type="button" id="btnAdd" value="增加按鈕" /></body></html>
<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("稍等一會"); $(function () { //表示擁有某種屬性的元素 $("li[skill]").css("backgroundColor", "orange"); //表示屬性等于某個值 $("li[skill=noNice]").css("fontSize", "50px"); //表示屬性不等于某個值 $("li[skill!=noNice]").css("color", "#0094ff"); //屬性過濾器,可以判斷任意屬性-包括id,class等 //適用范圍,就是對于元素的一個過濾 $("li[class]").css("border", "5px solid #0094ff"); $("li[class=vegetable][PRize=10]").css("backgroundColor", "green"); }) </script></head><body> <ol> <li skill="noSwim">惡魔果實</li> <li class="noGoodLook">百香果</li> <li skill="noNice">榴蓮</li> <li class="vegetable" prize="5">西蘭花</li> <li class="vegetable" prize="10">秋葵</li> <li id="smile">開心果</li> <li class="noDelicious">韭菜月餅</li> </ol></body></html>
<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 () { //使用表單元素過濾器 獲取選中的checkbox alert($("input[type=checkbox]:checked").length); }) }) </script></head><body> <input type="checkbox" /><label>籃球</label> <input type="checkbox" /><label>足球</label> <input type="checkbox" /><label>排球</label> <input type="checkbox" /><label>曲棍球</label> <br /> <input type="radio" name="male" /><label>男</label> <input type="radio" name="male" /><label>女</label> <input type="button" value="顯示選中個數" id="btnShowNum" /></body></html>
新聞熱點
疑難解答
