Java Web03：jQuery

2024-01-24 08:58
文章标签 java javascript jquery frontend web03

本文主要是介绍Java Web03：jQuery，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Java Web03

文章目录

  • Java Web03
    • jQuery介绍
    • jQuery的初体验
    • jQuery核心函数
    • jQuery对象和dom对象区分
      • DOM对象
      • jQuery对象
        • jQuery对象的本质
      • jQuery对象和Dom对象使用区别
      • Dom对象和jQuery对象互转
        • dom对象转化为jQuery对象
        • jQuery对象转为dom对象
    • jQuery选择器
      • 基本选择器
      • 层级选择器
      • 过滤选择器
        • 基本过滤器
        • 内容过滤器
        • 属性过滤器
      • 表单过滤器
        • 表单对象属性过滤器
      • 元素筛选

jQuery介绍

  • jQuery：是JavaScript和Query(查询)，它就是辅助JavaScript开发的js类库
  • jQuery核心思想：write less,do more，所以它实现了很多浏览器的兼容问题
  • jQuery好处：jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

jQuery的初体验

  • 需求：使用jQuery给一个按钮绑定单击事件
<!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 () {// 	var btnObj = document.getElementById("btnId");// 	//alter(btnObj);//[object HTMLButtonElement]   ===>>> dom对象// 	btnObj.onclick = function () {// 		alert("js 原生的单击事件");// 	};// };$(function () {// 表示页面加载完成之后 ， 相当于 window.onload = function() {}var $btnObj = $("#btnId"); // 表示按id查询对象$btnObj.click(function () {// 绑定单机事件alert("jQuery 单击事件")});});</script>
</head>
<body><button id="btnId">SayHello</button></body>
</html>

常见问题：

  • 使用jQuery一定要引入jQuery库吗？

    • 是的

  • jQuery中的$到底是什么？

    • 它是一个函数

  • 怎么为按钮添加点击响应函数的

    • 使用jQuery查询到标签对象
    • 使用标签对象.click(function() {});

jQuery核心函数

  • 是 j Q u e r y 的 核 心 函 数 ， 能 完 成 j Q u e r y 的 很 多 功 能 。 是jQuery的核心函数，能完成jQuery的很多功能。 是jQuery的核心函数，能完成jQuery的很多功能。()就是调用$这个函数

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

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

    • 传入参数为[选择器 字符串]时：

      • $("#id 属性值")：id选择器，根据id查询标签对象
      • $(“标签名”)：标签名选择器，根据指定的标签名查询标签对象
      • $(".class属性值")：类型选择器，可以根据class属性查询标签对象

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

jQuery对象和dom对象区分

DOM对象

  • 通过getElementById()查询出来的标签对象是Dom对象

  • 通过getElementByName()查询出来的标签对象是Dom对象

  • 通过getElementByTagName()查询出来的标签对象是Dom对象

  • 通过createElement()方法创建的对象是Dom对象

  • 对DOM对象进行alert的效果是：[object HTML标签名Element]

jQuery对象

  • 通过jQuery提供的API创建的对象是jQuery对象
  • 通过jQuery包装的Dom对象是jQuery对象
  • 通过jQuery提供的API查询到的对象是jQuery对象
  • 对jQuery对象进行alert的效果是：[object object]
jQuery对象的本质
  • jQuery对象是dom对象的数组 + jQuery提供的一系列功能函数

jQuery对象和Dom对象使用区别

  • jQuery对象不能使用DOM对象的属性和方法
  • DOM对象也不能使用jQuery对象的属性和方法

Dom对象和jQuery对象互转

dom对象转化为jQuery对象

1.先有dom对象

2.${DOM 对象}就可以转换成为jQuery对象

jQuery对象转为dom对象

1.先有jQuery对象

2.jQuery对象[下标]取出相应的DOM对象

img

jQuery选择器

基本选择器

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

p.myClass

表示标签名必须是p标签，而且class类型是myClass

<!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">$(function () {//1.选择 id 为 one 的元素 "background-color","#bbffaa"$("#btn1").click(function () {// css () 方法 可以设置和获取样式$("#one").css("background-color", "#bbffaa");});//2.选择 class 为 mini 的所有元素$("#btn2").click(function () {$(".mini").css("background-color", "#bbffaa");});//3.选择 元素名是 div 的所有元素$("#btn3").click(function () {$("div").css("background-color", "#bbffaa");});//4.选择所有的元素$("#btn4").click(function () {$("*").css("background-color", "#bbffaa");});//5.选择所有的 span 元素和id为two的元素$("#btn5").click(function () {$("span,#two").css("background-color", "#bbffaa");})});</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>

层级选择器

  • ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
  • parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
  • prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素
  • prev ~ siblings 之后的兄弟元素选择器：匹配prev元素之后的所有sibling元素
<!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>

过滤选择器

基本过滤器

  • :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(){$("div:last").css("background", "#bbffaa");});//3.选择class不为 one 的所有 div 元素$("#btn3").click(function(){$("div:not(.one)").css("background", "#bbffaa");});//4.选择索引值为偶数的 div 元素$("#btn4").click(function(){$("div:even").css("background", "#bbffaa");});//5.选择索引值为奇数的 div 元素$("#btn5").click(function(){$("div:odd").css("background", "#bbffaa");});//6.选择索引值为大于 3 的 div 元素$("#btn6").click(function(){$("div:gt(3)").css("background", "#bbffaa");});//7.选择索引值为等于 3 的 div 元素$("#btn7").click(function(){$("div:eq(3)").css("background", "#bbffaa");});//8.选择索引值为小于 3 的 div 元素$("#btn8").click(function(){$("div:lt(3)").css("background", "#bbffaa");});//9.选择所有的标题元素$("#btn9").click(function(){$(":header").css("background", "#bbffaa");});//10.选择当前正在执行动画的所有元素$("#btn10").click(function(){$(":animated").css("background", "#bbffaa");});//11.选择没有执行动画的最后一个div$("#btn10").click(function(){$("div:not(:animated):last").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>
内容过滤器
  • :contains(text)：匹配包含给定文本的元素
  • :empty：匹配所有不包含子元素或者文本的空元素
  • :parent：匹配含有子元素或者文本的元素
  • has(selector)：匹配含有选择器所匹配的元素的元素
<!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();				});/** :contains(text)   :empty 			  :has(selector) 	:parent 			*/$(document).ready(function(){//1.选择 含有文本 'di' 的 div 元素$("#btn1").click(function(){$("div:contains(‘di’)").css("background", "#bbffaa");});//2.选择不包含子元素(或者文本元素) 的 div 空元素$("#btn2").click(function(){$("div:empty").css("background", "#bbffaa");});//3.选择含有 class 为 mini 元素的 div 元素$("#btn3").click(function(){$("div:has(.mini)").css("background", "#bbffaa");});//4.选择含有子元素(或者文本元素)的div元素$("#btn4").click(function(){$("div:parent").css("background", "#bbffaa");});});</script></head><body>		<input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /><input type="button" value="选择含有子元素(或者文本元素)的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><div id="mover">正在执行动画的div元素.</div></body>
</html>
属性过滤器
  • [attribute]：匹配包含给定属性的元素
  • [attribute=value]：匹配给定的属性是某个特定值的元素
  • [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素
  • [attribute^=value]：匹配给定的属性是以某些值开始的元素
  • [attribute$=value]：匹配给定的属性是以某些值结尾的元素
  • [attribute*=value]：匹配给定的属性是以包含某些值的元素
  • [attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用
<!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">/**
[attribute] 			
[attribute=value] 		
[attribute!=value] 		 
[attribute^=value] 		
[attribute$=value] 		
[attribute*=value] 		
[attrSel1][attrSel2][attrSelN]  */$(function() {//1.选取含有 属性title 的div元素$("#btn1").click(function() {$("div[title]").css("background", "#bbffaa");});//2.选取 属性title值等于'test'的div元素$("#btn2").click(function() {$("div[title='test']").css("background", "#bbffaa");});//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)$("#btn3").click(function() {$("div[title!='test']").css("background", "#bbffaa");});//4.选取 属性title值 以'te'开始 的div元素$("#btn4").click(function() {$("div[title^='te']").css("background", "#bbffaa");});//5.选取 属性title值 以'est'结束 的div元素$("#btn5").click(function() {$("div[title$='est']").css("background", "#bbffaa");});//6.选取 属性title值 含有'es'的div元素$("#btn6").click(function() {$("div[title*='es']").css("background", "#bbffaa");});//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素$("#btn7").click(function() {$("div[id][title*='es']").css("background", "#bbffaa");});//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素$("#btn8").click(function() {$("div[title][title!='test']").css("background", "#bbffaa");});});
</script>
</head>
<body><input type="button" value="选取含有 属性title 的div元素." id="btn1" /><input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" /><input type="button"value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" /><input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" /><input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" /><input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" /><input type="button"value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."id="btn7" /><input type="button"value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /><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" value="123456789"size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
</html>

表单过滤器

  • :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
<!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><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){/**:input 		:text 		:password 	:radio 		:checkbox 	:submit 	:image 		:reset 		:button 	:file 		:hidden 	表单对象的属性:enabled 		:disabled 		:checked 		:selected 		*///1.对表单内 可用input 赋值操作$("#btn1").click(function () {// val()可以操作表单项的value属性值// 它可以设置和获取$(":text:enabled").val("New Value");});//2.对表单内 不可用input 赋值操作$("#btn2").click(function(){$(":text:disabled").val("New Value Too");});//3.获取多选框选中的个数$("#btn3").click(function(){alert($(":checkbox:checked").length)});//4.获取多选框，每个选中的value值$("#btn4").click(function () {// 获取全部选中的复选框标签对象var $checkboxes = $(":checkbox:checked");// for (var i = 0; i < $checkboxes.length; i++) {// 	alert($checkboxes[i].value);// }// each方法是jQuery对象提供用来遍历元素的方法// 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象$checkboxes.each(function () {alert(this.value);})});//5.获取下拉框选中的内容  $("#btn5").click(function(){// 获取选中的option标签对象var $options = $("select option:selected");// 遍历，获取option标签中的文本内容$options.each(function () {//在each遍历的function函数中，有一个this对象。这个this对象时当前正在遍历的dom对象alert(this.innerHTML);})});})	</script></head><body><h3>表单对象属性过滤选择器</h3><button id="btn1">对表单内 可用input 赋值操作.</button><button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取多选框选中的内容.</button><br /><br /><button id="btn5">获取下拉框选中的内容.</button><br /><br /><form id="form1" action="#">			可用元素: <input name="add" value="可用文本框1"/><br>不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>可用元素: <input name="che" value="可用文本框2"/><br>不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br><br>多选框: <br><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<br><br>下拉列表1: <br><select name="test" multiple="multiple" style="height: 100px" id="sele1"><option>浙江</option><option selected="selected">辽宁</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select><br><br>下拉列表2: <br><select name="test2"><option>浙江</option><option>辽宁</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select></form>		</body>
</html>

元素筛选

  • eq()：获取给定索引的元素
  • first()：获取第一个元素
  • last()：获取最后一个元素
  • filter(exp)：留下匹配的元素
  • is(exp)：判断是否匹配给定的选择器，只要有一个匹配就返回true
  • has(exp)：返回包含有匹配选择器的元素的元素
  • not(exp)：删除匹配选择器的元素
  • children(exp)：返回匹配给定选择器的子元素
  • find(exp)：返回匹配给定选择器的后代元素
  • next()：返回当前元素的下一个兄弟元素
  • nextAll()：返回当前元素后面所有的兄弟元素
  • nextUntil()：返回当前元素到指定匹配的元素为止的后面元素
  • parent()：返回父元素
  • prev(exp)：返回当前元素的上一个兄弟元素
  • prevAll()：返回当前元素前面所有的兄弟元素
  • prevUnit(exp)：返回当前元素到指定匹配的元素为止的前面元素
  • siblings(exp)：返回所有兄弟元素
  • add()：把add匹配的选择器的元素添加到当前jQuery对象中
<!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>DOM查询</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();/**过滤eq(index|-index) 			first() 					last() 						hasClass(class) 			filter(expr|obj|ele|fn) 	is(expr|obj|ele|fn)1.6* 	has(expr|ele) 				not(expr|ele|fn) 			slice(start,[end]) 			查找children([expr]) 			closest(expr,[con]|obj|ele)1.6*   find(expr|obj|ele) 				next([expr]) 					nextall([expr]) 				nextUntil([exp|ele][,fil])1.6* 	parent([expr]) 					parents([expr]) 				parentsUntil([exp|ele][,fil])1.6*  prev([expr]) 					prevall([expr]) 				prevUntil([exp|ele][,fil])1.6* 	siblings([expr]) 				串联add(expr|ele|html|obj[,con]) 	*///(1)eq()  选择索引值为等于 3 的 div 元素$("#btn1").click(function(){$("div").eq(3).css("background-color","#bfa");});//(2)first()选择第一个 div 元素$("#btn2").click(function(){//first()   选取第一个元素$("div").first().css("background-color","#bfa");});//(3)last()选择最后一个 div 元素$("#btn3").click(function(){//last()  选取最后一个元素$("div").last().css("background-color","#bfa");});//(4)filter()在div中选择索引为偶数的$("#btn4").click(function(){//filter()  过滤   传入的是选择器字符串$("div").filter(":even").css("background-color","#bfa");});//(5)is()判断#one是否为:empty或:parent//is用来检测jq对象是否符合指定的选择器$("#btn5").click(function(){alert($("#one").is(":empty"));});//(6)has()选择div中包含.mini的$("#btn6").click(function(){//has(selector)  选择器字符串    是否包含selector$("div").has(".mini").css("background-color","#bfa");});//(7)not()选择div中class不为one的$("#btn7").click(function(){//not(selector)  选择不是selector的元素$("div").not('.one').css("background-color","#bfa");});//(8)children()在body中选择所有class为one的div子元素$("#btn8").click(function(){//children()  选出所有的子元素$("body").children("div.one").css("background-color","#bfa");});//(9)find()在body中选择所有class为mini的div元素$("#btn9").click(function(){//find()  选出所有的后代元素$("body").find("div.mini").css("background-color","#bfa");});//(10)next() #one的下一个div$("#btn10").click(function(){//next()  选择下一个兄弟元素$("#one").next("div").css("background-color","#bfa");});//(11)nextAll() #one后面所有的span元素$("#btn11").click(function(){//nextAll()   选出后面所有的元素$("#one").nextAll("span").css("background-color","#bfa");});//(12)nextUntil() #one和span之间的元素$("#btn12").click(function(){//$("#one").nextUntil("span").css("background-color","#bfa")});//(13)parent() .mini的父元素$("#btn13").click(function(){$(".mini").parent().css("background-color","#bfa");});//(14)prev() #two的上一个div$("#btn14").click(function(){//prev()  $("#two").prev("div").css("background-color","#bfa")});//(15)prevAll() span前面所有的div$("#btn15").click(function(){//prevAll()   选出前面所有的元素$("span").prevAll("div").css("background-color","#bfa")});//(16)prevUntil() span向前直到#one的元素$("#btn16").click(function(){//prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止$("span").prevUntil("#one").css("background-color","#bfa")});//(17)siblings() #two的所有兄弟元素$("#btn17").click(function(){//siblings()    找到所有的兄弟元素，包括前面的和后面的$("#two").siblings().css("background-color","#bfa")});//(18)add()选择所有的 span 元素和id为two的元素$("#btn18").click(function(){//   $("span,#two,.mini,#one")$("span").add("#two").add("#one").css("background-color","#bfa");});});</script></head><body>		<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" /><input type="button" value="first()选择第一个 div 元素" id="btn2" /><input type="button" value="last()选择最后一个 div 元素" id="btn3" /><input type="button" value="filter()在div中选择索引为偶数的" id="btn4" /><input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" /><input type="button" value="has()选择div中包含.mini的" id="btn6" /><input type="button" value="not()选择div中class不为one的" id="btn7" /><input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" /><input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" /><input type="button" value="next()#one的下一个div" id="btn10" /><input type="button" value="nextAll()#one后面所有的span元素" id="btn11" /><input type="button" value="nextUntil()#one和span之间的元素" id="btn12" /><input type="button" value="parent().mini的父元素" id="btn13" /><input type="button" value="prev()#two的上一个div" id="btn14" /><input type="button" value="prevAll()span前面所有的div" id="btn15" /><input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" /><input type="button" value="siblings()#two的所有兄弟元素" id="btn17" /><input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" /><h3>基本选择器.</h3><br /><br />文本框<input type="text" name="account" disabled="disabled" /><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"><b>class为mini,title为other</b></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><span id="span1">^^span元素 111^^</span><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span2">^^span元素 222^^</span><div id="mover">正在执行动画的div元素.</div></body>
</html>

这篇关于Java Web03：jQuery的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/639162。

相关文章

Spring三级缓存解决循环依赖的解析过程

Spring三级缓存解决循环依赖的解析过程

《Spring三级缓存解决循环依赖的解析过程》：本文主要介绍Spring三级缓存解决循环依赖的解析过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、循环依赖场景二、三级缓存定义三、解决流程（以ServiceA和ServiceB为例）四、关键机制详解五、设计约
阅读更多...
spring IOC的理解之原理和实现过程

spring IOC的理解之原理和实现过程

《springIOC的理解之原理和实现过程》：本文主要介绍springIOC的理解之原理和实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、IoC 核心概念二、核心原理1. 容器架构2. 核心组件3. 工作流程三、关键实现机制1. Bean生命周期2.
阅读更多...
解决tomcat启动时报Junit相关错误java.lang.ClassNotFoundException: org.junit.Test问题

解决tomcat启动时报Junit相关错误java.lang.ClassNotFoundException: org.junit.Test问题

《解决tomcat启动时报Junit相关错误java.lang.ClassNotFoundException:org.junit.Test问题》：本文主要介绍解决tomcat启动时报Junit相... 目录tomcat启动时报Junit相关错误Java.lang.ClassNotFoundException
阅读更多...
Gradle下如何搭建SpringCloud分布式环境

Gradle下如何搭建SpringCloud分布式环境

《Gradle下如何搭建SpringCloud分布式环境》：本文主要介绍Gradle下如何搭建SpringCloud分布式环境问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Gradle下搭建SpringCloud分布式环境1.idea配置好gradle2.创建一个空的gr
阅读更多...
JVM垃圾回收机制之GC解读

JVM垃圾回收机制之GC解读

《JVM垃圾回收机制之GC解读》：本文主要介绍JVM垃圾回收机制之GC,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、死亡对象的判断算法1.1 引用计数算法1.2 可达性分析算法二、垃圾回收算法2.1 标记-清除算法2.2 复制算法2.3 标记-整理算法2.4
阅读更多...
springboot集成Lucene的详细指南

springboot集成Lucene的详细指南

《springboot集成Lucene的详细指南》这篇文章主要为大家详细介绍了springboot集成Lucene的详细指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起... 目录添加依赖创建配置类创建实体类创建索引服务类创建搜索服务类创建控制器类使用示例以下是 Spring
阅读更多...
Java调用Python的四种方法小结

Java调用Python的四种方法小结

《Java调用Python的四种方法小结》在现代开发中,结合不同编程语言的优势往往能达到事半功倍的效果,本文将详细介绍四种在Java中调用Python的方法,并推荐一种最常用且实用的方法,希望对大家有... 目录一、在Java类中直接执行python语句二、在Java中直接调用Python脚本三、使用Run
阅读更多...
Java根据IP地址实现归属地获取

Java根据IP地址实现归属地获取

《Java根据IP地址实现归属地获取》Ip2region是一个离线IP地址定位库和IP定位数据管理框架,这篇文章主要为大家详细介绍了Java如何使用Ip2region实现根据IP地址获取归属地,感兴趣... 目录一、使用Ip2region离线获取1、Ip2region简介2、导包3、下编程载xdb文件4、J
阅读更多...
浅析如何使用xstream实现javaBean与xml互转

浅析如何使用xstream实现javaBean与xml互转

《浅析如何使用xstream实现javaBean与xml互转》XStream是一个用于将Java对象与XML之间进行转换的库,它非常简单易用,下面将详细介绍如何使用XStream实现JavaBean与... 目录1. 引入依赖2. 定义 JavaBean3. JavaBean 转 XML4. XML 转 J
阅读更多...
SpringBoot中四种AOP实战应用场景及代码实现

SpringBoot中四种AOP实战应用场景及代码实现

《SpringBoot中四种AOP实战应用场景及代码实现》面向切面编程(AOP)是Spring框架的核心功能之一,它通过预编译和运行期动态代理实现程序功能的统一维护,在SpringBoot应用中,AO... 目录引言场景一：日志记录与性能监控业务需求实现方案使用示例扩展：MDC实现请求跟踪场景二：权限控制与
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2