【原创】Jquery初体验二
快速导航一.传统方式生成Table
二.使用jquery.tmpl插件快速生成Table
三.Jquery中的操作class的几个方法
四:jq里面的克隆
五:属性过滤器
六:表单元素过滤器
一.传统方式生成TablevarpeopleArr =[
{"name":"刘欢","age":50,"skill":"从头再来"},
{"name":"杨坤","age":35,"skill":"32唱演唱会"},
{"name":"那英","age":50,"skill":"白天不懂夜的黑"},
{"name":"王菲","age":45,"skill":"复合"}
]
$(function () {var$tbCreate = $("<table></table>")//生成tablevar$trTitle = $("<tr></tr>").append("<td>序号</td>").append("<td>姓名</td>").append("<td>年龄</td>").append("<td>技能</td>");
$tbCreate.append($trTitle);//将标题加到tb中//循环数组,生成trfor(vari =0; i < peopleArr.length; i++) {//每循环一次生成一个trvar$trCreate = $("<tr><td><input type='checkbox' class='chkOne'/>"+ (i +1) +"</td></tr>");//循环对象数组,生成其他tdfor(variteminpeopleArr[i]) {var$tdCreate = $("<td>"+ peopleArr[i][item] +"</td>");//加到tr里面$trCreate.append($tdCreate);
}//将tr加到table里面$tbCreate.append($trCreate);
}//将table加到body里面$(document.body).append($tbCreate);
二.使用jquery.tmpl插件快速生成Table<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">varpeopleArr =[
{"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>
三.Jquery中的操作class的几个方法<htmlxmlns="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里面的浅克隆,只是克隆元素,事件不克隆,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>
<liclass="noGoodLook">百香果</li>
<li skill="noNice">榴莲</li>
<liclass="vegetable"prize="5">西兰花</li>
<liclass="vegetable"prize="10">秋葵</li>
<li id="smile">开心果</li>
<liclass="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 () {//使用表单元素过滤器 获取选中的checkboxalert($("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>