【原创】Jquery初体验二
快速导航
一.传统方式生成Table
var peopleArr = [
{ "name": "刘欢", "age": , "skill": "从头再来" },
{ "name": "杨坤", "age": , "skill": "32唱演唱会" },
{ "name": "那英", "age": , "skill": "白天不懂夜的黑" },
{ "name": "王菲", "age": , "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 = ; i < peopleArr.length; i++) {
//每循环一次生成一个tr
var $trCreate = $("<tr><td><input type='checkbox' class='chkOne'/>" + (i + ) + "</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);
二.使用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">
var peopleArr = [
{ "name": "刘欢", "age": , "skill": "从头再来" },
{ "name": "杨坤", "age": , "skill": "32唱演唱会" },
{ "name": "那英", "age": , "skill": "白天不懂夜的黑" },
{ "name": "王菲", "age": , "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的几个方法
<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里面的浅克隆,只是克隆元素,事件不克隆，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="">西兰花</li>
<li class="vegetable" prize="">秋葵</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>
【原创】Jquery初体验二的更多相关文章
- jquery.fn.extend与jquery.extend--（初体验二）
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- [原创]vscode初体验
这段时间,在网上看见很多从.net转java的,为什么会造成这样的情况,我感觉有几点 1． 微软在中国的生态不好,死要钱,很多公司都不想花这部分钱 2． 做.net开发人,工资普遍较低 前言 闲聊 ...
- JQuery初体验
虽然做b/s也有一年半了,但是还没怎么认真的去看JQuery,趁自己生病的这几天,恶补一下JQuery方面的知识,保持学习的态度,内容很简单,聊以自慰一下>_<.废话不多说,直接上代码了. ...
- Jquery初体验一
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Ruby on rails初体验(二)
体验一中添加了一个最基本的支架和一个简单的数据迁移,实现了一个基本的增删改查的功能列表.体验二中要在次功能上继续丰满一下功能.实现如下效果: 在每个公司中都包含有不同的部门,按照体验一中的方法,添加一 ...
- Spring Cloud Alibaba 初体验(二) Nacos 服务注册与发现 + 集成 Spring Cloud Gateway
一.服务注册 添加依赖: <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>s ...
- JSON初体验(二):Gson解析
今天,我们来介绍一下Gson的jar包的用法. JSON解析之Gson 特点:编码简介,谷歌官方推荐 数据之间的转换: 1.将json格式的字符串{}转换成为java对象 API: <T> ...
- node初体验(二)
1.静态资源访问,需要设置路由和响应标头 2.url模块.path模块.querystring模块 Url { protocol: null, slashes: null, auth: null, h ...
- jQuery---jQuery初体验
jQuery初体验 1. 引入jquery文件 2. 入口函数标准 jQuery优点总结 (对应的就是js的缺点): 查找元素的方法多种多样,非常灵活 拥有隐式迭代特性,因此不需要手写for循环 完全 ...
随机推荐
- Redis集群的主从切换研究
目录 目录 1 1. 前言 1 2. slave发起选举 2 3. master响应选举 5 4. 选举示例 5 5. 哈希槽传播方式 6 6. 一次主从切换记录1 6 6.1. 相关参数 6 6.2 ...
- Android自定义视图二：如何绘制内容
这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...
- Python 错误和异常小结[转]
原文链接 http://blog.csdn.net/sinchb/article/details/8392827 事先说明哦,这不是一篇关于Python异常的全面介绍的文章,这只是在学习Pyth ...
- 个人理解的int数组和char数组
char数组中不论是一维还是二维的,在程序执行时每一块的分离依据都是以提供的起始地址到'\0'为一个处理的字符串.所以关于char[]的函数都是只提供相应起始地址作为形参就可以. char[]互相交换 ...
- 软件工程课堂练习&课下作业
题目:返回一个整数数组中最大子数组的和.一.设计思路按顺序定义子数组的和,如果为负,则选下一位数为子数组的和,反之则两个相加为子数组的和.二.源代码 package test;import java. ...
- 关于jdbc连接MySQL数据问题
1.解压MySQL后配置环境变量 MYSQL_HOME:D:\win7\Program Files(x86)\mysql-5.6.21-win32(mysql根目录) 添加path:%MYSQL_HO ...
- HDU2159_二维完全背包问题
HDU2159_二维完全背包问题 输入有:经验,忍耐度,怪物种数,限制杀怪数 每一种怪物对应获得的经验值和消耗的耐久值 输出:剩下的最大忍耐度 限制:忍耐度,杀怪个数 在这里把忍耐度看成背包的容量,杀 ...
- [php-dom] php-dom使用注意事项
/* 注意事项: 1. 在loadHTML之前,应该将内容转义为UTF-8编码的,这样子避免出现entity等等的报错: 2. 已经使用了php函数htmlspecialchars()转换的html实 ...
- Delphi FastReport报表常用方法
Delphi FastReport报表常用方法 作者及来源: EasyPass - 博客园 收藏到→_→: 摘要: Delphi FastReport报表常用方法 点击这里! ...
- 【洛谷4587】 [FJOI2016]神秘数（主席树）
传送门 BZOJ 然而是权限题 洛谷 Solution 发现题目给出的一些规律,emm,如果我们新凑出来的一个数,那么后面一个数一定是\(sum+1\). 于是就可以主席树随便维护了! 代码实现 #i ...