jQuery技术实例(对象访问,属性,CSS 类,核心函数)

最新推荐文章于 2022-03-24 17:18:22 发布
最新推荐文章于 2022-03-24 17:18:22 发布
阅读量1k 收藏
点赞数
分类专栏： JavaWeb开发技术 Java从入门到高级编程 文章标签： jquery java 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuosixiaonengshou/article/details/63250625
版权

随着对jQuery的学习的慢慢深入，今天写点jQuery中的常用方法和属性

one.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术实例</title>
    <style type="text/css">
    	div {
				width: 150px;
				height: 100px;
				margin: 5px;
				border: 2px solid blue; 
			}	
    </style>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
    <script type="text/javascript">
    	/*
    		jQuery的调用框架:
    		$(function(){
    		...........//在内部写操作代码..
    		});
    	*/
    	$(function(){
    		//1. 设置css样式
    		var div=$("div:first");
    		div.css({"border":"1px solid red","width":"200px","heigth":"100px","background":"#00ff00"});
    		//$("div:eq(1)").css({"border":"1px solid blue"}).html("hello,你好!").css({"width":"100px","height":"50px"});
    		$("div").eq(1).css({"border":"1px solid gray"}).html("你好啊").css({"width":"100px","height":"50px"});
    		
    		//2. 设置或读取页面元素的内容 ----html() text() val() 如果是空参则是读取文本内容，否则就是设置内容
    		$("#xx").text("<input type='text' value='text' />");//设置的是一个纯文本即参数内容
    		$("#yy").html("<input type='text' value='html'/>");//设置的是一个input组件(参数信息被解析)
    		//alert($("#xx").text);
    		//alert($("#yy").html);
    		
    		//3. 设置或读取元素属性----attr() ,prop()  ----如果只有一个参数，则是读取属性，如果是两个参数则是设置属性
    		//alert($("#name").attr("value"));
    		//alert($("#name").attr("type"));
    		//alert($("#name").prop("type"));
    		//alert($("#name").prop("value"));
    		$("#btn1").click(function(){
    			//$("#name").attr("type","button");
    			$("#name").prop("type","button");
    			//$("#name").attr("disabled","disabled");
    			$("#name").prop("disabled","disabled");
    			
    			$("#name").prop("a","123");
    			//alert($("#name").attr("a"));//undefined
    			//alert($("#name").prop("a"));//123
    			
    			//$("#name").attr("b","abc");
    			//alert($("#name").attr("b"));//abc
    			//alert($("#name").prop("b"));//undefined
    			
    		});
	    	$("#btn2").click(function(){
	    		$("#name").removeAttr("disabled");//移除属性，都可以删除
	    		//$("#name").removeProp("disabled");//只能移除prop()创建的属性，而且window或dom内置的对象，不让删除
	    		
	    		alert($("#name").prop("a"));
	    		$("#name").removeProp("a");//只能移除prop()创建的属性
	    		alert($("#name").prop("a"));
	    	});
    	});
    </script>
  </head>
  
  <body>
    <button id="btn1">--按钮1--</button><br>
    <button id="btn2">--按钮2--</button><br>
    <div>11111111</div><br>
    <div>22222222222222</div><br>
    <div id="xx"></div><br>
    <div id="yy"></div><br>
    <input type="text" id="name" value="Hello jQuery!"/>
  </body>
</html>


 

按下按钮1触发事件将type为text改为button，同时设为不可用

 

tow.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术实例</title>
    <style type="text/css">
    	div {
				width: 150px;
				height: 100px;
				margin: 5px;
				border: 2px solid blue; 
			}	
		.bg{
			background: blue;
			}
		.bg0{
			background: gray;
		}
		.bg1{
			background: green;
		}	
		.bg2{
			background: red;
		}	
    </style>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#btn1").click(function(){
    		/*虽然可以实现两种样式的切换，但是太底层了
    			var boo=$("#d1").hasClass("bg");
    			if(boo){
    				$("#d1").removeClass("bg");
    			}else{
    				$("#d1").addClass("bg");
    			}
    		*/
    		$("#d1").toggleClass("bg");//如果存在（不存在）就删除（添加）一个类。
    		});
    		
    		$("#btn2").click(function(){
    			$("#d1").toggleClass(function(){
    				var r=Math.random();//[0-1]之间的小数
    				r*=3;
    				r=parseInt(r);
    				return "bg"+r;//由内部回调函数的返回值来指定样式
    			});
    		});
    	});
    </script>
  </head>
  
  <body>
    <button id="btn1">--两种样式的切换--</button><br>
    <button id="btn2">--三种样式的切换--</button><br>
    <div id="d1">11111111</div><br>
  </body>
</html>


利用自己写底层或者jQuery提供的方法来事件样式的切换

three.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术实例</title>
    <style type="text/css">
    	div {
				width: 150px;
				height: 100px;
				margin: 5px;
				border: 2px solid blue; 
			}	
		.text{
			background: red;
		}
    </style>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#btn1").click(function(){
    			$("img").each(function(i){//each 以每一个匹配的元素作为上下文来执行一个函数。
					var fileName=(i+1)+".jpg";
					//this.src="<c:url value='/imgs/"+fileName+"' />";//dom方式
					$(this).attr("src","<c:url value='/imgs/"+fileName+"' />");//jquery方式
    			});
    		});
    		
    		//each(callback)
    		$("#btn2").click(function(){
    			//遍历一个数组
    			var ar=[22,9,36,15];
    			$.each(ar,function(idx,val){
    				alert(idx+","+val);//前一个是数组中的序号，第二个是值
    			});
    		});
    		
    		$("#btn3").click(function(){
    			$("div:has(p)").addClass("text");//匹配含有选择器所匹配的元素的元素
    		});
    	});
    </script>
  </head>
  
  <body>
    <button id="btn1">--each技术--</button><br>
    <button id="btn2">--each2--</button><br>
    <button id="btn3">--btn3--</button><br>
    <img alt="" src="" />
    <img alt="" src="" />
    <img alt="" src="" />
    <img alt="" src="" />
    <div ><p>11111111</p></div><br>
    <div >222222</div><br>
  </body>
</html>


利用each()方法来实现for循环，将图片赋上src地址，同时可遍历数组

 

four.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术实例</title>
    <style type="text/css">
    	div {
				width: 250px;
				height: 200px;
				margin: 5px;
				border: 2px solid blue; 
			}	
		.text{
			background: red;
		}
    </style>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#btn1").click(function(){
    			alert($("td:parent").html);
    		});
    		
    		//jQuery核心函数3：jQuery(html,[owerDoc]) ----创建对象
	    	var i=1;
	    	$("#div1").click(function(){
	    		var strBtn="<button>演示按钮"+i+"</button>";
	    		//$(this).append(strBtn);//加在后面
	    		//$(strBtn).appendTo($(this));//$(strBtn)的功能就是用html格式串创建出一个jQuery对象 
	    		//$(this).prepend(strBtn);//加在前面
	    		$(strBtn).prependTo($(this));//$(strBtn)的功能就是用html格式串创建出一个jQuery对象 
	    		i++;
	    	});
    	});
    	
    	
    </script>
  </head>
  
  <body>
    <button id="btn1">--btn1--</button><br>
    <div id="div1">演示添加</div><br>
    <table>
    	<tr><td>value1</td><td></td></tr>
    	<tr><td>value2</td><td></td></tr>
    </table>
  </body>
</html>


利用jQuery第三个核心函数，给一个html格式串可将其创建出一个jQuery对象

 

five.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery技术实例</title>
    <style type="text/css">
    	div {
				width: 250px;
				height: 200px;
				margin: 5px;
				border: 2px solid blue; 
			}	
		table{
			border: 2px solid blue; 
			background: red;
				width: 250px;
				height: 200px;
		}
		td{
			border: 2px solid blue; 
		}
    </style>
    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#tb1 td").dblclick(function(){//双击事件
    			var text=$(this).text();//把原单元格中的内容读取出来
    			
    			//利用jQuery核心函数3，生成一个编辑框
    			var input=$("<input class='text' type='text' value='"+text+"' />");//注：input要是jQuery对象，这样在下面才能调用focus()、blur()等jQuery中的函数
    			$(this).html(input);
    			 input.focus();//获取光标焦点
    			
    			input.blur(function(){
    				var val=$(this).val();
    				$(this).parent().html(val);
    			});
    			event.stopPropagation();//阻止事件冒泡
    			
    		});
    	});
    	
    	
    </script>
  </head>
  
  <body>
    <div id="div1">演示添加</div><br>
    <table id="tb1">
    	<tr><td>Tom</td><td>18</td></tr>
    	<tr><td>李二</td><td>20</td></tr>
    </table>
  </body>
</html>


一个小小的应用：有表格，点击表格中的内容可以编辑，点击表格外可将编辑后的内容保存

D灿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery实战
01-09
《jQuery实战》全面介绍jQuery知识，展示如何遍历HTML文档、处理事件、执行动画以及给网页添加Ajax。书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery是目前最受欢迎的JavaScript/Ajax库之一，能用最少的代码实现最多的功能。《jQuery实战》适合各层次Web开发人员。
jQuery对象的length属性用法实例
12-02
`length`属性是jQuery对象的一个核心特性，它用于获取jQuery选择器匹配到的DOM元素的数量。这个属性可以直接访问，无需调用任何函数。当我们在jQuery对象上调用`length`时，它会返回一个整数值，表示集合中的元素个...
jquery实战训练
ITDragon博客
11-15 1万+
JQuery实战训练，1.5秒返回页面，2.鼠标滑过显示内容，3.轮展图，4.返回顶部，5.右击显示菜单，6.内容编辑，7.购物车结算，实时更新。
jQuery练习实例（四）
iteye_8029的博客
10-10 149
最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果 有兴趣的同学可以参考一下，这幅效果，个人觉得挺不错的 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC...
jQuery实战_360导航效果（节点操作练习）
大脸猫~
06-25 262
HTML结构： 我们想要的效果： 鼠标移上去的时候，会显示出一个”百度一下，你就知道”的提示框 可以直接写在原html中，为了练习jQuery的节点操作，我们动态生成。 JS： 效果图： 移上去的时候： 注意点： &amp;amp;nbsp;&amp;amp;nbsp;在使用链式链接后，当用了children(‘div’)，那么后面的操作都是对div操作，如果想回到对父元素的操作，必须用pa...
jquery之对象访问
空谷残声
01-05 379
jquery之对象访问 一、    $.each()与each()方法的作用及区别 $.each()和each()都是用来遍历对象集合和数组的，不同的是each()方法多用来遍历DOM节点，执行DOM操作。而$.each()多用于对象和数组的操作。 1)      each()方法 each()方法传递一个匿名函数，匿名函数同时传递俩个参数，第一个返回被遍历
jquery选择器和属性对象的操作实例分析
10-15
本篇文章将深入探讨jQuery中的选择器和属性对象的操作，通过实例分析来帮助开发者更好地理解和应用这些功能。 首先，jQuery选择器是用于选取HTML元素的强大工具。它们基于CSS选择器，并提供了一些额外的功能。以下...
jquery表单对象属性过滤选择器实例分析
10-24
在本例中，我们关注的是jQuery中的表单对象属性过滤选择器，这些选择器专门用于筛选表单元素，如输入(input)、复选框(checkbox)、单选按钮(radio)以及下拉列表(select)的选项(option)。以下是对这些选择器的详细说明...
CSS3结合jQuery实现动画效果及回调函数的实例
10-18
下面小编就为大家分享一篇CSS3结合jQuery实现动画效果及回调函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Jquery使用css方法改变样式实例
12-10
在jQuery中，`css()`方法用于获取或设置一个或多个CSS属性值。它有两种形式： 1. **设置样式**：当你向`css()`方法传入两个参数时，第一个参数是CSS属性名，第二个参数是属性值。例如： ```javascript $("#...
JQuery练习题1
05-10
jQuery练习题1
jQuery常用案例练习
南北极之间
07-02 1222
jQuery操作css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="../../js/tool/jquery-1.12.4.js">&...
JQuery：视频+实战总结
热门推荐
通往精英的成长之路
01-30 2万+
【前言】 整理总结完CSS后，便一鼓作气进入JQuery的世界；由于有了js的基础，所以直接晋级JQuery实战。早就听闻大名鼎鼎的JQuery，这次领教后果然名不虚传。 【菜鸟初始JQuery】 ·学习材料：《JQuery实战视频教程》——王兴奎； ·内容:六讲视频（第一讲：概述、环境和入门实例；后五讲：四个实战）； ·宏观图： ...
Javascript读写CSS属性
weixin_34122604的博客
06-26 49
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>脚本操作CSS</title> <style type="text/css"> *{margi...
＜%@ taglib prefix=“c“ uri=“http://java.sun.com/jsp/jstl/core“ %＞中uri是红色的
Flychuer的专栏
08-09 6149
近日，在使用idea创建maven管理的项目时，发现taglib标签出现异常，异常情况为： <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 正常情况下应该是： <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 这个情况，不影响程序正常运行，但是在使用jstl标签库中的标签时，标签也是红色...
jsp 文件中的＜%@ taglib uri=““ prefix=““%＞
qq_45566354的博客
10-25 2597
常常都是这样写的 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 作用：为jsp文件引入标签库使jsp页面看上去更加简洁易读（隐藏java代码），上面这行代码是引入了常用的jstl标签库。 详解： prefix=“c”：为标签库起一个别名为c <c:forEach> 实现代码 </c:forEach> uri ：标签库的路径（用于找到资源库） 扩展： URI：统一资源标识符（
IDEA使用 ＜%@ taglib uri=“http://java.sun.com/jsp/jstl/core“ prefix=“c“%＞报错问题
爱喝牛奶的甜玉米
03-24 4145
在IDEA软件中引入taglibs-standard-impl.jar、taglibs-standard-spec.jar、jstl.jar、standard.jar
IDEA中＜%@ taglib uri=“http://java.sun.com/jsp/jstl/core“ prefix=“c“%＞报错
klittle的博客
05-13 1960
问题 解决 依次点击：File→Project Structure→Modules→Dependencies→点击右侧加号→点击JARs and driectories 在D:\apache-tomcat-8.5.65\webapps\examples\WEB-INF\lib目录下找到两个jar包，点击OK添加 点击OK 问题解决 ...
博客使用方法
justwaityou1314的博客
06-09 1575
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
SpringMVC几个核心类(控制器核心类,加载配置文件核心类,处理url影射核心类,处理视图资源核心类,方法动态调用核心类)
~~~~~~~~~~~~
01-08 9053
核心类 制器核心类： •org.springframework.web.servlet.DispatcherServlet  － 配置web.xml   加载配置文件核心类： •org.springframework.web.context.ContextLoaderListener – spring的配置文件   处理url影射核心类： •org.springframework.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值