jquery VS Dom(小实例单选-多选-反选)
一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll()"/>
<input type="button" value="取消" onclick="CancleAll()"/>
<input type="button" value="反选" onclick="ReverseAll()"/> <table border="1">
<thead>
<tr>
<th>序 号</th>
<th>用 户</th>
<th>密 码</th>
</tr>
</thead>
<tbody id="i1">
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>11</td> </tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>22</td> </tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>33</td> </tr> </tbody>
</table>
<script src="jquery-3.5.1.js"></script>
<script> function CheckAll() {
//Dom版本
// //根据id找到对应的tbody标签
// var tb = document.getElementById('i1');
// //找到tbody标签下的子类tr,再将其赋值给trs
// var trs = tb.children;
// //对trs内的每个标签进行循环,找到相应的td标签
// for (var i = 0; i < trs.length; i++) {
// //循环体中拿到对应的td标签并对其内容进行检索
// var current_tr = trs[i];
// //利用两次firstElementChild取得标签input
// var ck = current_tr.firstElementChild.firstElementChild;
// ck.checked = true;
// //这里不建议用set或者remove去修改自定义属性,尤其是remove,执行一次后就没法再做其他修改,容易产生bug
// // ck.setAttribute('checked', 'checked');
// } //jquery版本
$('#i1 :checkbox').prop('checked', true);
} function CancleAll() {
/*
var tb = document.getElementById('i1');
var trs = tb.children;
//在trs内循环
for (var i = 0; i < trs.length; i++) { var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
ck.checked = false;
}
*/
//jquery版本
$('#i1 :checkbox').prop('checked', false);
} function ReverseAll() {
/*
var tb = document.getElementById('i1');
var trs = tb.children;
for (var i = 0; i < trs.length; i++) {
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
if (ck.checked) {
ck.checked = false;
// ck.removeAttribute("checked");
} else {
ck.checked = true;
// ck.setAttribute('checked', 'checked'); }
}
*/
$('#i1 :checkbox').each(function (i) {
//this 当前循环的运行的标签
if ($(this).prop('checked')) {
$(this).prop('checked', false);
} else {
$(this).prop('checked', true); }
}) } </script>
</body>
</html>
重点关注中间函数部分,注释掉的使用Dom写的,没注释的是用了神器Jquery。没有对比就没有伤害,一个的一大段被简单的一行就替代了,心好累。。。。。
当然,不能排斥Dom,因为Jquery也是用Dom封装的,所以我们可以用简单的方式实现功能,但还是得回到其根本上探究其原理,而且,在某些特定环境下并不推荐使用Jquery,
例如用户流量加载的情况下,什么都没运行之前先得加载一个插件,确实有点奢侈呀!!!!
jquery VS Dom(小实例单选-多选-反选)的更多相关文章
- jquery-1 jquery几个小实例
jquery-1 jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
- python: DOM 小实例
一.全选 全部取消 反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...
- jQuery 与js判断是否单选复选选中
js判断复选:这段代码昨天网上查看的资料没保存出处,抱歉 var obj=document.getElementsByName("diseaseSet"); //选择所有name= ...
- jQuery的DOM操作实例(3)——创建节点&&编写一个弹窗
一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- jQuery的DOM操作实例(1)——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- JS基础(一)dom小实例
DOM的新增示例 <script language="JavaScript"> window.onload = function(){ //createDocument ...
- 微信小程序单选/多选框样式重新
/* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: ...
- JQuery 更改属性 JQ对象循环 each 全选反选 三元运算
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 2019-2020-1 20199325《Linux内核原理与分析》第十一周作业
实验简介: Set-UID 是 Unix 系统中的一个重要的安全机制.当一个 Set-UID 程序运行的时候,它被假设为具有拥有者的权限.例如,如果程序的拥有者是root,那么任何人运行这个程序时都会 ...
- docker 搭建一个wordpress 博客系统(4)
安装lnmp ()下载镜像 [root@server ~]# docker pull mysql:latest #下载mysql镜像 [root@server ~]# docker pull rich ...
- docker(1)
什么是Docker? Docker 最初是dotCloud公司创始人Solomon Hykes在法国期间发起的一个公司内部项目,它是基于dotCloud公司多年云服务技术的一次革新. Docker使用 ...
- Unity 极简UI框架
写ui的时候一般追求控制逻辑和显示逻辑分离,经典的类似于MVC,其余大多都是这个模式的衍生,实际上书写的时候M是在整个游戏的底层,我更倾向于将它称之为D(Data)而不是M(Model),而C(Ctr ...
- javascript SDK开发之webpack中eslint的配置
eslint的好处就不多说了.代码检查,代码报错, 智能提示,让开发人员更规范的撸代码等等. 1.安装依赖 npm install --save-dev eslint eslint-friendly- ...
- Aurora: 来自 Amazon 的高性能的企业级关系数据库,兼容 MySQL
近日,在美国召开的AWS re:Invent云计算大会上,Amazon高级副总裁安迪·杰西发布了企业级关系数据库Aurora.Aurora是一个面向Amazon RDS(关系数据库服务).兼容MySQ ...
- flutter中使用redux之多界面互动
在上一篇文章,我们介绍了如何在flutter中使用redux.在上一篇文章的例子中,我们使用了单界面集成redux,但是在实际项目中,我们通常涉及多个模块,每个模块涉及多个界面,那么如何使用redux ...
- 如何在Vue项目中优雅的使用swiper插件
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架 ...
- 图像处理之OpenCV - 缩放/旋转/裁剪/加噪声/高斯模糊
Github地址 @ 缩放 void cv::resize ( InputArray src, OutputArray dst, Size dsize, , , int interpolation = ...
- 数学--数论--HDU 5382 GCD?LCM?(详细推导,不懂打我)
Describtion First we define: (1) lcm(a,b), the least common multiple of two integers a and b, is the ...