Java web之jQuery

最新推荐文章于 2021-09-03 21:05:25 发布

淡薄明志，宁静致远

最新推荐文章于 2021-09-03 21:05:25 发布

阅读量90

点赞数

分类专栏： JAVA 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43554526/article/details/109246511

版权

JAVA 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里写目录标题

一、jQuery常见问题

1、 jQuery 中的$到底是什么？ 答案： 它是一个函数
2、怎么为按钮添加点击响应函数的？ 答案：
			（1）使用 jQuery 查询到标签对象
			（2）使用标签对象.click( function(){} );
3.jQuery在HTML上可以用，在jsp上用不了
			（1）jQuery的function前面的$与JSP页面的JSTL的$冲突了，直接导致不认识此对象方法。
					解决办法：把jQuery代码里面的$全改成jQuery就可以正常使用了！ 
			（2）有<base href="<%=basePath%>">，它会自动的在相对路径前加入basePath变量的值
注：basePath的值为
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";

问题：jQuery 对象的本质是什么？对象的本质是什么？

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

二、jQuery的几种用法

1、传入参数为 [ 函数 ] 时：
表示页面加载完成之后。相当于 window.onload = function(){}

2、传入参数为 [ HTML 字符串 ] 时：
会对我们创建这个 html 标签对象

3、传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

4、传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象

1、传入参数为 [ 函数 ] 时

表示页面加载完成之后。相当于 window.onload = function(){}

<script type="text/javascript">

	//使用$()代替window.onload
	$(function(){
			//弹出Hello
			alert("Hello");
		});
	});

</script>

结果：页面加载完成之后弹出提示框：hello

2.绑定控件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	//使用$()代替window.onload
	$(function(){
		//使用选择器获取按钮对象，随后绑定单击响应函数
		$("#btnId").click(function(){
			//弹出Hello
			alert('Hello');
		});
	});

</script>


</head>
<body>

	<button id="btnId">SayHello</button>

</body>
</html>

结果：点击按钮弹出提示框

3.添加标签

$("标签").appendTo("标签名");

<script type="text/javascript">
    $(function () {
        // alert("页面加载完成之后，自动调用");
        $("    <div>" +
            "        <span>div-span1</span>" +
            "        <span>div-span2</span>" +
            "    </div>").appendTo("body");
    });
</script>

四、jQuery 选择器

4.1基本选择器

#ID 	选择器：根据 id 查找标签对象
.class 	选择器：根据 class 查找标签对象
element 选择器：根据标签名查找标签对象
* 		选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
				//1.选择 id 为 one 的元素 "background-color","#bbffaa"
				
				//2.选择 class 为 mini 的所有元素
	

				//3.选择 元素名是 div 的所有元素 


				//4.选择所有的元素 


				//5.选择所有的 span 元素和id为two的元素   
	
	
	
			
		</script>
	</head>
	<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>

4.1.1 id 选择器

				//1.选择 id 为 one 的元素 "background-color","#bbffaa"
				$(function(){
					$("#btn1").click(function(){
						$("#one").css("background", "#E8E8FF");
					})
				});

4.1.2 class 选择器

				//2.选择 class 为 mini 的所有元素
				$(function(){
					$("#btn2").click(function(){
						$(".mini").css("background","#E8E8FF");
					});
				});

4.1.3 标签选择器

				//3.选择 元素名是 div 的所有元素 
				$(function(){
					$("#btn3").click(function(){
						$("div").css("background","#E8E8FF");
					});
				});

4.1.4 选择所有

				//4.选择所有的元素 
				$(function(){
					$("#btn4").click(function(){
						$("*").css("background","#E8E8FF");
					});
				});

4.1.5 组合使用

				//5.选择所有的 span 元素和id为two的元素   
					$(function(){
					$("#btn5").click(function(){
						$("span,#two").css("background","#E8E8FF");
					});
				});

4.2 层级选择器

ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1.选择 body 内的所有 div 元素 
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one + div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two ~ div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>

4.2.1 给定父元素的所有后代元素

				//1.选择 body 内的所有 div 元素 
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

4.2.2 给定父元素的所有子元素

				//2.在 body 内, 选择div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

4.2.2 选择 id （可以是class…）为 one 的下一个 div 元素

				//3.选择 id 为 one 的下一个 div 元素 
				$("#btn3").click(function(){
					$("#one + div").css("background", "#bbffaa");
				});

4.2.3选择 id 为 two 的元素后面的所有 div 兄弟元素

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two ~ div").css("background", "#bbffaa");
				});

五.过滤器

5.1基本过滤器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$().css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$().css("background", "#bbffaa");
				});

				//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$().css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$().css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$().css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$().css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$().css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$().css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$().css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
<!-- 	<div>
	:first 			
	:last 			
	:not(selector) 	
	:even 			
	:odd 			
	:eq(index)		 
	:gt(index) 		
	:lt(index) 		
	:header 		
	:animated 		
	</div> -->
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择最后一个 div 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
		<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />		
		<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
		
		<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

5.1.1 :first 获取第一个元素

				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

5.1.2 :last 获取最后个元素$("").last()

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div").last().css("background", "#bbffaa");
				});

5.1.3:eq(index) 匹配一个给定索引值的元素

				//选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

5.1.4 选择class不为 one 的所有 div 元素

			//选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(:.one)").css("background", "#bbffaa");
				});

5.2 内容过滤器

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

				//1.选择 含有文本 'di' 的 div 元素
				$("#btn1").click(function(){
					$("div:contains('di')").css("background", "#bbffaa");
				});

5.3属性过滤器

[attribute]					 		匹配包含给定属性的元素。
[attribute=value] 					匹配给定的属性是某个特定值的元素
[attribute!=value] 					匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 					匹配给定的属性是以某些值开始的元素
[attribute$=value]					匹配给定的属性是以某些值结尾的元素
[attribute*=value] 					匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 		复合属性选择器，需要同时满足多个条件时使用。

5.3.1 匹配包含给定属性的元素。

		//1.选取含有 属性title 的div元素
		$("#btn1").click(function() {
			$("div[title]").css("background", "#bbffaa");
		});

5.3.2 匹配给定的属性是某个特定值的元素

		//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title='test']").css("background", "#bbffaa");
		});

5.3.4 复合属性选择器，需要同时满足多个条件时使用。

		//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*='es']").css("background", "#bbffaa");
		});

5.4 表单过滤器

:input		匹配所有 input, textarea, select 和 button 元素
:text		匹配所有 文本输入框
:password	匹配所有的密码输入框
:radio		 匹配所有的单选框
:checkbox 	匹配所有的复选框
:submit 	匹配所有提交按钮
:image 		匹配所有 img 标签
:reset 		匹配所有重置按钮
:button 	匹配所有 input type=button <button>按钮
:file 		匹配所有 input type=file 文件上传
:hidden 	匹配所有不可见元素 display:none 或 input type=hidden

表单属性过滤器

:enabled 	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked 	的匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
:selected 	的匹配所有选中的 option

5.4.1 对表单内可用input 赋值操作

				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					$("input:enabled").val("New Value");
				});

六、元素筛选

eq() 			获取给定索引的元素 						功能跟:eq() 一样
first() 		获取第一个元素 							功能跟:first 一样
last() 			获取最后一个元素 						功能跟:last 一样
filter(exp) 	留下匹配的元素
is(exp) 		判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp) 		返回包含有匹配选择器的元素的元素 		功能跟 :has 一样
not(exp) 		删除匹配选择器的元素 					功能跟 :not 一样
children(exp) 	返回匹配给定选择器的子元素 				功能跟 parent>child 一样
find(exp) 		返回匹配给定选择器的后代元素 			功能跟 ancestor descendant 一样
next() 			返回当前元素的下一个兄弟元素 			功能跟 prev + next 功能一样
nextAll() 		返回当前元素后面所有的兄弟元素 			功能跟 prev ~ siblings 功能一样
nextUntil() 	返回当前元素到指定匹配的元素为止的后面元素
parent() 		返回父元素
prev(exp) 		返回当前元素的上一个兄弟元素
prevAll() 		返回当前元素前面所有的兄弟元素
prevUnit(exp) 	返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 	返回所有兄弟元素
add() 			把 add 匹配的选择器的元素添加到当前 jquery 对象中

七、jQuery的属性操作

html() 		它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
text() 		它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
val() 		它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            // 不传参数，是获取，传递参数是设置
            // alert( $("div").html() );// 获取
            // $("div").html("<h1>我是div中的标题 1</h1>");// 设置

            // 不传参数，是获取，传递参数是设置
            // alert( $("div").text() ); // 获取
            // $("div").text("<h1>我是div中的标题 1</h1>"); // 设置

            // 不传参数，是获取，传递参数是设置
            $("button").click(function () {
                alert($("#username").val());//获取
                $("#username").val("超级程序猿");// 设置
            });


        });

    </script>
</head>
<body>
    <div>我是div标签 <span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>
</body>
</html>

7.1 html()

             alert( $("div").html() );// 获取
             $("div").html("<h1>我是div中的标题 1</h1>");// 设置

页面加载完成后：
在这里插入图片描述
点击确认后：

7.2 test()

            // alert( $("div").text() ); // 获取
            // $("div").text("<h1>我是div中的标题 1</h1>"); // 设置

在这里插入图片描述

7.3 val()

            $("button").click(function () {
                alert($("#username").val());//获取
                $("#username").val("超级程序猿");// 设置
            });

在这里插入图片描述

7.4其他

attr() 		可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
attr 		方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 		可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

八、DOM 的增删改

内部插入：
appendTo() 		a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
prependTo() 	a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素
外部插入：
insertAfter() 	a.insertAfter(b) 得到 ba
insertBefore() 	a.insertBefore(b) 得到 ab
替换:
replaceWith()	a.replaceWith(b) 用 b 替换掉 a
replaceAll() 	a.replaceAll(b) 用 a 替换掉所有 b
删除：
remove() 		a.remove(); 删除 a 标签
empty() 		a.empty(); 清空 a 标签里的内容

淡薄明志，宁静致远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java web之jQuery

一、jQuery常见问题1、 jQuery 中的$到底是什么？答案：它是一个函数2、怎么为按钮添加点击响应函数的？答案：（1）使用 jQuery 查询到标签对象（2）使用标签对象.click( function(){} );3.jQuery在HTML上可以用，在jsp上用不了（1）jQuery的function前面的$与JSP页面的JSTL的$冲突了，直接导致不认识此对象方法。解决办法：把jQuery代码里面的$全改成jQuery就可以正常使用了！（
复制链接

扫一扫