JQuery小结

最新推荐文章于 2025-12-22 19:02:04 发布
原创 最新推荐文章于 2025-12-22 19:02:04 发布 · 184 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #前端 #javascript

本文详细介绍了JQuery在前端开发中的基本操作，包括DOM对象与JQuery对象的转换、选择器的使用、属性与样式的操作以及事件绑定。内容涵盖了选择元素、设置属性、操作样式、内容获取与设置以及事件监听等多个方面，是学习和理解JQuery的实用指南。

　　Jquery是流行已久的前端开发中必须掌握的框架（程序库）。

　　在前端开发中，常见操作无非就是选择对象和操作对象，JQuery提供了相当便利的语法。

　　1、dom对象、JQuery对象

        dom对象:通过JavaScript获取的对象，无返回null。
        JQuery对象:通过JQuery获取的对象，无则返回空。
　　2、dom对象和JQuery对象的转换

　　dom对象转JQuery对象

		var checkboxArray=document.getElementsByName("motto");//dom对象
		// var jqueryMotto=jQuery(checkboxArray);//转换为JQuery对象

　　JQuery对象转dom对象

		var jqueryMotto=$(checkboxArray);JQuery对象
		//⑴、将JQuery对象转换为dom对象
		var checkbox000=jqueryMotto[0];
		//⑵、通过遍历将JQuery对象转换为dom对象
		$(jqueryMotto).each(function(){
			if(this.id=='demo1'){ this.checked="checked"; }
		});
		//⑶、通过for循环将JQuery对象转换为dom对象
		for(var i=0;i<jqueryMotto.length;i++){
			if(i==3){ jqueryMotto[i].checked="checked"; }
		}

　　3、选择

		//⑴基础选择
		$("#demo4").prop("checked",true);//通过id选择,如果有多个同名ID则选择第一个
		$(".rowTitleColorSet").css("color","#d70008");//通过类名进行选择
		$("span").css("color","#cccccc");//通过标签进行选择
		$("input[type=radio]")[0].checked=true;//通过元素名进行选择
		console.log( $(":radio,:checkbox,#radio5A") ) ;//组合选择(共16个)，多的不重复累加，相当于交集
		//⑵层次选择
		console.log($("#txl div"));//输出#txl下的所有div（5个）
		console.log($("#txl >div"));//输出#txl下的所有div子元素（3个）
		console.log($("#title ~div"));//输出#title的同辈div元素（2个）
		console.log($("#PSP +div"));//输出#PSP的相邻div元素（1个）,注意：必须相邻而且不能隔着其他元素
		//⑶表单选择
		$(":radio")[2].checked=true;//通过表单进行选择，元素可以有:input、:text、:checkbox、:radio、:password、:submit、:image、:button、:file(文件域)、reset(重置)

　　4、操作

		//⑴获取属性
		console.log($("input[type='checkbox']")[1].checked);//输出checked属性
		var checkboxList=$("input[type='checkbox']");
		checkboxList.each(function(index,el){
			console.log( $(el).prop('checked') );//输出checked属性
			console.log( $(el).attr('id') );//输出id属性
		});		
		//⑵设置属性
		//固有的属性使用attr和prop都可以
		//自定义属性使用attr
		//true和false的属性使用prop(返回true和false)
		$("#demo4").prop("checked",false);//设置属性
		$("#demo2").attr("data","123");//设置自定义属性
		console.log($("#demo2").attr("data"));//输出自定义属性		
		//⑶获取和设置样式
		console.log( $("#student5").attr("style") ) ;//输出style样式
		$("#student5").css("background","#ccc");//设置属性
		$("#student5").css("font-size","18px");//设置属性
		$("#student1").css( {"background":"#999","font-size":"15px","font-family":"楷体","color":"#d70008"} );//设置属性		
		$("#student3").addClass("focusRowColorSet");//增加样式名称(原来的样式仍然存在)
		$("#focusID").attr("class","focusRowColorSet");//设置行的属性(替换掉原来的)
		$("#student3").removeClass("focusRowColorSet");//去除样式
		//⑷设置和获取内容
		console.log($("#focusID").html());//输出(非表单)元素的html内容
		console.log($("#xm").html());//输出(非表单)元素的html内容		
		$("#xm").html("<div style='color:#123456'>姓名</div>");//设置		
		console.log($("#xb").text());//输出(非表单)元素的text内容		
		$("#xb").text("<h1>性别</h1>");//设置
		console.log($("#student2").val()) ;//获取表单域的值
		$("#student2").val("小小宋");//设置表单域的值

　　5、事件

        语法1：页面元素.bind("事件名1 事件名2 事件名3",function(){}),为一个页面元素绑定同一个函数
        语法2：页面元素.bind("事件名1,function(){}).bind("事件名2,function(){}),为一个页面元素绑定多个事件及函数，链式写法
        语法3：页面元素.bind( {"事件名1:function(){}),"事件名2":function(){},"事件名3":function(){} }),为一个页面元素绑定多个事件及函数

		$("#demo2").bind("click",function(){
			console.log("点击了demo2");
		});//绑定了点击事件：
		// document.getElementById("demo2").onclick=function(){
		// 	console.log("点选了demo2");
		// }
		$("#demo3").click(function(){
			console.log("点击了demo3");
		});//绑定了点击事件：
		
		$("#student4").bind({
			"click":function(){
				console.log("点击student4");
			},
			"mouseout":function(){
				console.log("移出student4");
			}
		})

　　练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery使用小结</title>
		<style>
			.table tr{
				line-height:200%;
				text-align:center;
			}        
			.table td{
				width: 100px;
				text-align:center;
			}        
			.rowTitleColorSet{background-color: #818080;color: rgb(232, 232, 232);text-align: center;}
			.evenRowColorSet{background-color: #efefef;color: rgb(8, 8, 8);text-align: center}
			.oddRowColorSet{background-color: #f8f8f8;color: rgb(128, 128, 128);text-align: center}
			.focusRowColorSet{background-color: #999;color:#d70008;text-align: center}
		</style>		
	</head>
	<script type="text/javascript" src="jquery-3.6.0.min.js"></script>

	<body>
		<div id="txl">
				<div id="title"><h3>初二（5）班通讯录</h1></div>
				<div>
					<div id="PSP"><h5>HaoR制作</h5></div>
					<div><h5>JQuery小结</h5></div>				
				</div>
				<div><h5>2022年5月16日</h5></div>				
		</div>
		<div class="layui-form">
		  <table class="table">
			<thead>
				    <tr class="rowTitleColorSet">
						<th>学号</th>
						<th><div id="xm"><span>姓名</span></div></th>
						<th><div id="xb"><span>性别</span></div></th>
						<th><input type="checkbox" name="motto" id="demo0"/>选择</th>
					</tr> 
			</thead>
			<tbody>
			  <tr class="oddRowColorSet">
				<td>101</td>
				<td><input type="text" value="小华" id="student1"/></td>
				<td><div><input type="radio" name="radio1" id="radio1A" value="男" checked=true>男</input>  <input type="radio" name="radio1" id="radio1B" value="女">女</input></div></td>
				<td><input  type="checkbox" name="motto" id="demo1"/></td>
			  </tr>
			  <tr class="evenRowColorSet">
				<td>102</td>
				<td><input type="text" value="小宋" id="student2"/></td>
				<td><div><input type="radio" name="radio2" id="radio2A" value="男">男</input>  <input type="radio" name="radio2" id="radio2B" value="女" checked=true>女</input></div></td>
				<td><input  type="checkbox" name="motto" id="demo2"/></td>
			  </tr>
			  <tr class="oddRowColorSet">
				<td>103</td>
				<td><input type="text" value="小丽" id="student3"/></td>
				<td><div><input type="radio" name="radio3" id="radio3A" value="男">男</input>  <input type="radio" name="radio3" id="radio3B" value="女" checked=true>女</input></div></td>
				<td><input  type="checkbox" name="motto" id="demo3"/></td>
			  </tr>
			  <tr class="evenRowColorSet" id="focusID">
				<td>104</td>
				<td><input type="text" value="小明" id="student4"/></td>
				<td><div><input type="radio" name="radio4" id="radio4A" value="男" checked=true>男</input>  <input type="radio" name="radio4" id="radio4B" value="女">女</input></div></td>
				<td><input  type="checkbox" name="motto" id="demo4"/></td>
			  </tr>
			  <tr class="oddRowColorSet">
				<td>105</td>
				<td><input type="text" value="小凯" id="student5" style="font-size:14px;color:green"/></td>
				<td><div><input type="radio" name="radio5" id="radio5A" value="男" checked=true>男</input>  <input type="radio" name="radio5" id="radio5B" value="女">女</input></div></td>
				<td><input  type="checkbox" name="motto" id="demo4"/></td>
			  </tr>			  
			</tbody>
		  </table>
		</div>
		
	<script>
		//1、dom对象、JQuery对象
		//dom对象:通过JavaScript获取的对象，无返回null
		//JQuery对象:通过JQuery获取的对象,无则返回空
		var checkbox0=document.getElementById("demo0");//dom对象
		var checkboxArray=document.getElementsByName("motto");//dom对象
		// var jqueryMotto=jQuery(checkboxArray);//转换为JQuery对象
		var jqueryMotto=$(checkboxArray);//转换为JQuery对象
		//⑴、将JQuery对象转换为dom对象
		var checkbox000=jqueryMotto[0];
		//⑵、通过遍历将JQuery对象转换为dom对象
		$(jqueryMotto).each(function(){
			if(this.id=='demo1'){ this.checked="checked"; }
		});
		//⑶、通过for循环将JQuery对象转换为dom对象
		for(var i=0;i<jqueryMotto.length;i++){
			if(i==3){ jqueryMotto[i].checked="checked"; }
		}
		//2、选择
		//⑴基础选择
		$("#demo4").prop("checked",true);//通过id选择,如果有多个同名ID则选择第一个
		$(".rowTitleColorSet").css("color","#d70008");//通过类名进行选择
		$("span").css("color","#cccccc");//通过标签进行选择
		$("input[type=radio]")[0].checked=true;//通过元素名进行选择
		console.log( $(":radio,:checkbox,#radio5A") ) ;//组合选择(共16个)，多的不重复累加，相当于交集
		//⑵层次选择
		console.log($("#txl div"));//输出#txl下的所有div（5个）
		console.log($("#txl >div"));//输出#txl下的所有div子元素（3个）
		console.log($("#title ~div"));//输出#title的同辈div元素（2个）
		console.log($("#PSP +div"));//输出#PSP的相邻div元素（1个）,注意：必须相邻而且不能隔着其他元素
		//⑶表单选择
		$(":radio")[2].checked=true;//通过表单进行选择，元素可以有:input、:text、:checkbox、:radio、:password、:submit、:image、:button、:file(文件域)、reset(重置)
		//3、操作
		//⑴获取属性
		console.log($("input[type='checkbox']")[1].checked);//输出checked属性
		var checkboxList=$("input[type='checkbox']");
		checkboxList.each(function(index,el){
			console.log( $(el).prop('checked') );//输出checked属性
			console.log( $(el).attr('id') );//输出id属性
		});		
		//⑵设置属性
		//固有的属性使用attr和prop都可以
		//自定义属性使用attr
		//true和false的属性使用prop(返回true和false)
		$("#demo4").prop("checked",false);//设置属性
		$("#demo2").attr("data","123");//设置自定义属性
		console.log($("#demo2").attr("data"));//输出自定义属性		
		//⑶获取和设置样式
		console.log( $("#student5").attr("style") ) ;//输出style样式
		$("#student5").css("background","#ccc");//设置属性
		$("#student5").css("font-size","18px");//设置属性
		$("#student1").css( {"background":"#999","font-size":"15px","font-family":"楷体","color":"#d70008"} );//设置属性		
		$("#student3").addClass("focusRowColorSet");//增加样式名称(原来的样式仍然存在)
		$("#focusID").attr("class","focusRowColorSet");//设置行的属性(替换掉原来的)
		$("#student3").removeClass("focusRowColorSet");//去除样式
		//⑷设置和获取内容
		console.log($("#focusID").html());//输出(非表单)元素的html内容
		console.log($("#xm").html());//输出(非表单)元素的html内容		
		$("#xm").html("<div style='color:#123456'>姓名</div>");//设置		
		console.log($("#xb").text());//输出(非表单)元素的text内容		
		$("#xb").text("<h1>性别</h1>");//设置
		console.log($("#student2").val()) ;//获取表单域的值
		$("#student2").val("小小宋");//设置表单域的值
		//事件
		//页面元素.bind("事件名1 事件名2 事件名3",function(){}),为一个页面元素绑定同一个函数
		//页面元素.bind("事件名1,function(){}).bind("事件名2,function(){}),为一个页面元素绑定多个事件及函数，链式写法
		//页面元素.bind( {"事件名1:function(){}),"事件名2":function(){},"事件名3":function(){} }),为一个页面元素绑定多个事件及函数
		$("#demo2").bind("click",function(){
			console.log("点击了demo2");
		});//绑定了点击事件：
		// document.getElementById("demo2").onclick=function(){
		// 	console.log("点选了demo2");
		// }
		$("#demo3").click(function(){
			console.log("点击了demo3");
		});//绑定了点击事件：
		
		$("#student4").bind({
			"click":function(){
				console.log("点击student4");
			},
			"mouseout":function(){
				console.log("移出student4");
			}
		})
	</script>
	</body>
</html>

　　结果图：

 

jQuery（二）jQuery 效果、toggle()、fadeToggle()、fadeTo() 、slideToggle() 、animate()驼峰表示、动画队列、链(Chaining)
qq_43456781的博客
08-18 1065
jQuery（二）jQuery 效果、toggle()、fadeToggle()、fadeTo() 、slideToggle() 、animate()驼峰表示、动画队列、链(Chaining) 文章目录jQuery（二）jQuery 效果、toggle()、fadeToggle()、fadeTo() 、slideToggle() 、animate()驼峰表示、动画队列、链(Chaining)1. 隐藏和显示jQuery hide() 和 show()jQuery toggle()2. 淡入淡出jQuery
jQuery小结.rar
09-04
《jQuery小结》 在Web开发领域，jQuery是一款极为重要的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。本篇文章将深入探讨jQuery的核心知识点，包括选择器与筛选方法、样式操作、效果展示、DOM...
Jquery小结
08-19 1445
学习过了javascript，了解到它是类似于VB的一种脚本语言。那我们都知道VB都有自己封装好的API函数库。作为一种网页中的脚本语言javascript也与众不同，拥有属于自己的javascript库—JQuery。下面就来让我们揭开这层神秘的面纱吧！                什么是JQuery？      WHAT      是一个JavaScript库，极大的简化了ja
jquery小结
PathError的博客
07-17 289
一、简介 1.1、概述 随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。 jQuery是继proto...
jquery使用经验小结
10-24
在本文中，作者通过个人使用jQuery的实践经验，总结出了五个重要知识点，让我们一起来探讨一下这些知识点的具体内容。 1. jQuery对象与原生DOM对象的互转...希望本文作者的经验小结，能为你的jQuery学习之旅带来便利。
jQuery 技巧小结
12-12
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...
jQuery基础知识小结
12-09
1、基础  jquery对象集：  $()：jquery对象集合  获取jquery对象集中的... 使用jquery的eq方法获取jquery对象集中的jquery对象元素：  $(‘img[alt]’).eq(0)  $(‘img[alt]’).first()  $(‘img[alt]’).last
JQuery基础语法小结
12-08
JQuery是一种广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在本篇文章中，我们将重点讨论JQuery的基础语法，包括文档加载、选择器、事件处理、DOM对象与JQuery对象的转换以及...
jQuery
water7_melon7的博客
06-03 233
jQuery
JQuery基础 复学 -＞（个人学习记录笔记）
slience_me的博客
04-10 320
JQuery 基础： 1. 概念 概念： 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 JavaScri
jquery知识点总结
xgb的博客
05-25 9846
一：认识jqueryjquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库二：初始化jquery监听页面加载完成                                                              ...
jQuery的个人总结
林的博客
08-31 1101
jQuery的个人总结 了解什么是jQuery 了解jQuery优点 hello jQuery jQuery三种工厂方法 jQuery属性写法 jQuery事件写法 jQuery方法写法 console.log() 7.事件处理程序 ======================================================= 1.想要使用jQuery，我们要先引...
jquery总结
石顺麟
07-12 1526
04-jquery jquery版本 //1.xxx 支持IE6 7 8 //2.2.XXX 不支持IE6 7 8 //3.xxx 不支持IE6 7 8 $ //jQuery === $,就是一个函数，可以获取元素，创建元素 使用jquery的步骤 /*引入jquery文件*/ /*入口函数*/ $(function(){...}) jQuery(fun...
【jQuery】jQuery小结
韩丽萍
02-02 2659
前言    jQuery是个什么啊？是个框架。利用css选择器查找DOM对象,对其操作，操作样式或者增删方法等等。拥有强大的插件机制，可以使我们write less, do more。细数家珍（一）框架认识示例：//找到button按钮，注册事件 $("#verifyButton").click(function(){ //1.获取文本框的内容 var userName = $("#
jQuery 知识总结
RAINY223的博客
09-16 1168
jQuery 知识总结
vue + iview + vue-i18n中英翻译
最新发布
pingguocu3的博客
12-22 94
)星期一:'mon',星期二:'tue',星期三:'wed',星期四:'thu',星期五:'fri',星期六:'sat',星期日:'sun',©著作权归作者所有,转载或内容合作请联系作者平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
vue2/vue3前端创建脚手架并引入RBAC权限模型
demotang的博客
12-18 216
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
jQuery语法精要：元素引用与对象转换
"jQuery语法小结(超实用)" jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。本小结将深入探讨jQuery的核心语法，帮助开发者更好地理解和运用jQuery。 1、页面元素的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值