jQuery笔记02（附带用jQuery方法实现全选 ）

已于 2022-03-19 11:46:14 修改
阅读量864 收藏
点赞数
分类专栏： jQuery 笔记 文章标签： jquery
于 2022-03-19 11:46:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63692854/article/details/123591684
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery02:$工具方法&属性css</title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.xx {
				border: solid red 5px;
			}
			.aa{
				background-color: #FF0000;
			}
			.bb{
				background-color: aquamarine;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				//1.工具方法
				//$.each()遍历数组、对象的数据
				//定义对象{}
				// var stu={"name":"许杰","age":19};
				//遍历对象
				// console.info(stu.name,stu.age);
				//可以不打印，但必须
				// $.each(stu,function(k,v){//key,value
				// 	console.info(v);
				// })
				//定义数组
				// var names=["许杰","许明扬","许嵩"];
				//遍历数组
				// $.each(names,function(i,n){//下标，元素
				// 	console.info(n);
				// })
				//定义对象数组[{},{}]
				// var stus=[{"name":"王俊","age":19},{"name":"张嘉倪","age":20,}]
				// $.each(stus,function(i,n){
				// 	// console.info(n.name,n.age)//方式一

				// 	// $.each(n,function(k,v){
				// 	// 	console.info(v);
				// 	// })//方式二


				// })
				// 1.2
				// $.trim()去除前后空格
				// var str=" zking ";
				// console.info($.trim(str).length);
				//1.3
				// $.type()得到数据类型
				// var str="aa";//string
				// var stu={"name":"许杰","age":19};//object
				// var stus=[{"name":"王俊","age":19},{"name":"张嘉倪","age":20,}]//array
				// console.info($.type(stus));
				//1.4
				// $.isFunction()判断是否是函数
				// console.info( $.isFunction(myf));//myf不能为myf(),否则会调用！
				// $.isArray()判断是否是数组
				// var stus=[{"name":"王俊","age":19},{"name":"张嘉倪","age":20,}]//array
				// console.info($.isArray(stus))//ture
				//1.6
				// $.parseJSON()解析json字符串转换为js对象/数组
				// var stustr='{"name":"许杰","age":19}';//对象字符串
				// var stu=$.parseJSON(stustr);
				// console.info($.type(stu));
				// $.each(stu,function(k,v){
				// 	console.info(v);
				// })

				var stus = '[{"name":"王俊","age":19},{"name":"张嘉倪","age":20}]' //array
				//转出js对象数组
				// console.info($.type(stus));
				var stu = $.parseJSON(stus);
				// console.info($.type(stu));
				//遍历对象数组
				// $.each(stu,function(k,v){
				// 	console.info(v.name,v.age)

				// })
				//属性和css
				// 2.1 attr()拿值 设值
				// var mpath= $("#aa").attr("src");
				// console.info(mpath);
				// 设值
				// $("#aa").attr("src","img/dd_arrow_down.jpg");
				// $("#aa").attr("width","200px");
				// 2.2 removeAttr()移除属性值
				// $("#aa").removeAttr("src");
				//2.3 动态增加样式addClass()
				// $("#aa").addClass("xx");
				//attr与addClass区别 前者是会xx覆盖yy，后者会xx与yy叠加
				// $("#aa").attr("class","xx");
				// 2.4 removeClass()删除样式
				// $("#aa").removeClass("xx");
				//给图片增加name值
				// $("#aa").attr("name","xx");
				// $("#aa").prop("name","xx");
				//prop与attr区别 属性值是boolean时
				// $("#ok").click(function(){
				// 	$(".abc").attr("checked",true);
				// })
				// $("#ok").click(function(){
				// 	$(".abc").attr("checked",false);
				// })
				$("#ok").click(function() {
					$(".abc").prop("checked", true);

				})
				$("#nook").click(function() {
					$(".abc").prop("checked", false);

				})
				//优化表格隔行换色
				// $("table tr:even").addClass("aa");
				// $("table tr:odd").addClass("bb");
				//2.6 html()与text()区别
				// var a=$("p").html();
				// console.info(a);
				// var b=$("p").text();
				// console.info(b);
				//2.7
				// val() 拿值
				//  var tetx=$("#tex").val();
				// console.info(text);
				//赋值
				 // var tex=$("#tex").val("哈哈哈");
				 //css
				 // 设置值
				 // $("p").css("background","red");//单
				  // $("p").css("background","rgb(25,132,243)");//单rgb 三原色
				  // $("p").css("background","rgba(255,0,0,0.5)");//单 rgba a：透明度
				  $("p").css("background","#E25574");//单
				 // $("p").css({"background":"yellow","color":"red"});//多
				 // 拿值
				 // var a=$("p").css("background");
				 // console.info(a);
				 
				 
			})



			function myf() {
				alert("1");
			}
		</script>
	</head>
	<body>
		<p>心痛<span>only one</span></p>
		<img src="img/advpic.jpg" width="300px" id="aa" class="yy">
		<hr>
		<input type="button" name="" id="ok" value="全选" />
		<input type="button" name="" id="nook" value="取消全选" />
		<input type="checkbox" class="abc" value="牛马" />牛马
		<input type="checkbox" class="abc" value="牛" />牛
		<hr>
		<table border="1" width="50%" >
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		<input type="text" name="" id="tex" value="" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			$("#all").click(function(){//先以全选id设点击事件
				
				if ($("#all").is(":checked")) {//对象.checked得到的是空值，所以用.is()方法来判断其状态
					$(".al").prop("checked",true);//使复选与全选状态保持一致；
				} else{
					$(".al").prop("checked",false);
				}
				
			});
			//假设法
			// for
			// $(".al").click(function(){
			// 	var f=true;
			// 	for(var i=0;i<$(".al").length;i++){
			// 		if ($(".al")[i].checked == false) {
			// 			f=false;
			// 		}
			// 	}
			// 	$("#all").prop("checked",f);
			// })
			//.each()
			$(".al").click(function(){//
				var f=true;
				$.each($(".al"),function(k,v){
					if ($(".al")[k].checked==false) {
						f=false;
					}
				})
				$("#all").prop("checked",f);
			})
			// // .length
			// $(".al").click(function(){//拿到复选的点击事件
			// 	if ($(".al:checked").length!=$(".al").length) {//复选的选中与未选中时长度不同
			// 		$("#all").prop("checked",false);//以此设置全选的状态
			// 	} else{
			// 		$("#all").prop("checked",true);
			// 	}
			// })
		})
			
			
			
			
		</script>
	</head>
	<body>
		<input  type="checkbox" id="all" src="" />全选<br>
		<input  type="checkbox" class="al" src="" />
		<input  type="checkbox" class="al" src="" />
		<input  type="checkbox" class="al" src="" />

	</body>
</html>

不想余生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery学习笔记——表格全选反选功能实例
weixin_41306215的博客
04-26 283
效果： 点击最上面的全选按钮，下面4个checkbox被选中 下面四个按钮都选了则上面的全选按钮自动选上，下面只有一个没选，全选按钮都不选 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi...
jQuery权限范围单选全选取消代码.zip
11-02
本资源“jQuery权限范围单选全选取消代码.zip”聚焦于利用jQuery实现一种功能，即在网页中实现权限范围内的单选、全选和取消选择的功能，这对于构建具有用户交互性的表单或者数据列表是非常有用的。下面我们将详细...
jquery all
04-16
http://code.jquery.com/jquery-1.7.2.min.js (minified, production) http://code.jquery.com/jquery-1.7.2.js (unminified, debug) jQuery CDN (via Media Temple) http://code.jquery.com/jquery-1.7.2.min.js Minified version http://code.jquery.com/jquery-1.7.2.js Development (Full) version jQuery 1.6.3 Minified jQuery 1.6.3 Uncompressed jQuery Minified (for production) jQuery Regular (for development and testing) \ jQuery 1.6.1 Minified and Gzipped (Use in production) jQuery 1.6.1 Uncompressed (Use for testing)
jQuery之getAll()和cleanData()
weixin_33885253的博客
04-15 396
前言： 看 jQuery 源码的一个痛点就是调用一个函数时，里面会调用 N 个其他函数，然后这 N 个函数里面又会调用 M 个其他其他函数。。 本篇文章主要是对上篇文章—jQuery源码解析之detach()/empty()/remove()/unwrap() 中两个函数 getAll和cleanData() 进行解析。 一、getAll(context, tag) 作用： 用来获取 cont...
jQuery选择器、jQuery关系选择器、jQuery伪选择器
u014644574的博客
03-30 828
一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：children(selector) 4、后代元素：find(selector) 5、前一个兄弟元素：prev(selector) 6、之前所有兄弟元素：prevAll(selector) 7、后一个兄弟元素：next(selecto...
jQuery的nextAll()与prevAll()
qq_41083450的博客
11-09 308
<table> <tr id="next"> <th>id</th> <th>ch</th> </tr> <tr> <td>1</td> <td>a</td> </tr> &lt...
jQuery笔记
qq_46214241的博客
03-09 1856
（1）显示隐藏 show()、hide()、toggle()1)没有动画效果// })// })2)有动画效果 给show 或 hide 传递参数，毫秒值 / slow | fast// 主要是控制标签的宽度 高度 透明度 最后dispay为none// 动画结束就执行functionconsole.log("显示标签的动画完成")});})})// 原状态是显示的，调用这个api就隐藏；否则反之})
JQuery checkedBox全选和全部选
超级大洋葱的博客
01-17 551
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!-- 1. 导入JQ的包 2. 文档加载完成函数: 页面初始化 3. 获得所有的行 :
jQuery 笔记day02
qq_41672159的博客
02-21 83
学习目标： 能够操作 jQuery 属性 能够操作 jQuery 元素能够操作 jQuery 元素尺寸、位置 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。 语法 ​ 注意：prop() 除了普通属性操作，更..
jQuery笔记 06：jQuery 对象（插件和静态方法）
Alice_Lee_Lee的博客
11-13 236
扩展插件 扩展 $ 的方法 (function () { jQuery.extend({ min: function (a, b) { return a < b ? a : b; }, max: function (a, b) { return a > b ? a : b; }, leftTrim: function (str) { return str.replace(/^\s+/, ""); },
支持单选多选全选的jQuery房屋楼层选择代码.zip
09-21
标题中的“支持单选多选全选的jQuery房屋楼层选择代码”表明这是一个使用jQuery实现的交互式房屋楼层选择器，它具有单选、多选和全选功能。这个选择器可能用于房地产网站或者任何需要用户从一系列房屋或楼层中进行...
jquery在项目中做复选框时遇到的一些问题笔记
12-10
在你的代码片段中，使用`prop()`方法来处理全选和取消全选的功能： ```javascript $(document).ready(function() { $('#main-manage').on('click', '#selectAll', function(event) { $('#xunTable').find('input'...
jQuery下拉框树形结构菜单选择代码.zip
11-02
使用jQuery创建下拉框树形结构菜单可以大大减少开发时间和复杂度。 在CSS特效方面，我们需要为树形结构菜单定义样式，包括但不限于展开/折叠的箭头图标、节点间的层次间距、选中状态的高亮显示等。CSS3的伪类和过渡...
jQuery学习笔记（2）基本使用方法
DTCloud
04-24 962
文章目录引入jQuery文件jQuery 入口函数常用的API隐式迭代jQuery 里面的排他思想 引入jQuery文件 方式一：本地引用 通过访问jQuery官方网站：https://jquery.com/ 即可下载jQuery的最新版本。点击下载图标就能够跳转到详情页。 可以通过下载到本地的方式引用 <script src="jQuery路径"></script> <script> //jquery代码块 </script> 提示：由于页面从上到下加载
1111111111111111111111
08-13
1111111111111111
javascript笔试题参考整理(答案)(可编辑修改word版).docx
08-13
javascript笔试题参考整理(答案)(可编辑修改word版)
财务收支表-公式计算查询.xlsx
最新发布
08-13
工资表，财务报表，对账表，付款申请，财务报告，费用支出表，财务收支 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
jquery实现全选和反选
05-18
可以使用以下代码实现全选和反选的功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 反选 $("#checkReverse").click(function(){ $("input[type='checkbox']").each(function(){ $(this).prop("checked", !$(this).prop("checked")); }); }); ``` 其中，`#checkAll` 和 `#checkReverse` 分别为全选和反选的按钮的 ID，`$("input[type='checkbox']")` 选择所有类型为 checkbox 的 input 元素。在全选的事件处理函数中，将所有的复选框的 checked 属性设置为 true，在反选的事件处理函数中，将每个复选框的 checked 属性取反即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不想余生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值