【原创】Jquery初体验二

王朝学院·作者佚名  2016-08-27  
宽屏版  字体: |||超大  

快速导航一.传统方式生成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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有