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 ...
随机推荐
- 深入理解TCP建立和关闭连接
建立连接: 理解:窗口和滑动窗口TCP的流量控制TCP使用窗口机制进行流量控制什么是窗口?连接建立时,各端分配一块缓冲区用来存储接收的数据,并将缓冲区的尺寸发送给另一端 接收方发送的确认信息中包含了自 ...
- 防cc攻击利器之Httpgrard
一.httpgrard介绍 HttpGuard是基于openresty,以lua脚本语言开发的防cc攻击软件.而openresty是集成了高性能web服务器Nginx,以及一系列的Nginx模块,这其 ...
- eclipse 创建maven项目失败
问题描述: eclipse 初次创建maven项目报错 可能是maven-archetype-quickstart:1.1.jar 包失效了或者没有? 有人说把这个jar包放在maven本地仓库里 我 ...
- 【集群实战】NFS网络文件共享服务2-mount挂载(参数,优化)
1. NFS客户端挂载深入 1.1 NFS客户端挂载参数说明 在NFS服务端,可以通过cat /var/lib/nfs/etab查看NFS服务器端配置参数的细节. 在NFS客户端,可以通过cat /p ...
- Python爬虫---爬取抖音短视频
目录 前言 抖音爬虫制作 选定网页 分析网页 提取id构造网址 拼接数据包链接 获取视频地址 下载视频 全部代码 实现结果 待解决的问题 前言 最近一直想要写一个抖音爬虫来批量下载抖音的短视频,但是经 ...
- 简单搜索 kuangbin C D
C - Catch That Cow POJ - 3278 我心态崩了,现在来回顾很早之前写的简单搜索,好难啊,我怎么写不出来. 我开始把这个写成了dfs,还写搓了... 慢慢来吧. 这个题目很明显是 ...
- 自定义比较器(IComparer接口的实现)
class FileNameSort : IComparer { [System.Runtime.InteropServices.DllImport("Shlwapi.dll", ...
- python gdal 写GeoTiff文件
1.gdal数据类型 (1)GDT_Byte(int8) (2)GDT_UInt16 (3)GDT_Int16 (4)GDT_UInt32 (5)GDT_Int32 (6)GDT_Float3 ...
- Programmatically add an application to Windows Firewall
Programmatically add an application to Windows Firewall 回答1 Not sure if this is the best way, but ...
- DotNet:Socket Server 异步套接字服务端实现
异步服务器套接字示例 From https://msdn.microsoft.com/zh-cn/library/fx6588te(v=vs.110).aspx 下面的示例程序创建接收来自客户端的连接 ...