JavaWeb jQuery
1. jQuery 介绍
2 jQuery 的初体验
需求:使用 jQuery 给一个按钮绑定单击事件?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1-按钮绑定单击事件</title><!-- 使用 jQuery 一定要引入 jQuery 库 --><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">// window.onload = function (ev) {// var btnId = document.getElementById("btnId");// btnId.onclick = function () {// alert("js 原生的单击事件");// };// }$(function () { // 表示页面加载完成 之后,相当 window.onload = function () {}var $btnId = $("#btnId"); // 表示按 id 查询标签对象$btnId.click(function () { //绑定单击事件alert("JQuery单击事件");});});</script>
</head>
<body><button id="btnId">SayHello</button>
</body>
</html>
3. jQuery 核心函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2-jQuery核心函数</title><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">//1、传入参数为 [ 函数 ] 时://表示页面加载完成之后。相当于 window.onload = function(){}$(function () { //页面加载完之后会自动调用//2、传入参数为 [ HTML 字符串 ] 时://会对我们创建这个 html 标签对象var $1 = $("<div>\n" +" <div>\n" +" <span>div-div-span</span>\n" +" </div>\n" +"</div>");$1.appendTo("body");//3、传入参数为 [ 选择器字符串 ] 时://$(“#id 属性值”);// id 选择器,根据 id 查询标签对象//$(“标签名”);// 标签名选择器,根据指定的标签名查询标签对象//$(“.class 属性值”);// 类型选择器,可以根据 class 属性查询标签对象alert($("button").length); //3//4、传入参数为 [ DOM 对象 ] 时:// 会把这个 dom 对象转换为 jQuery 对象var btn01 = document.getElementById("btn01");alert(btn01); //[object HTMLButtonElement]alert($(btn01)); // [object Object]});</script>
</head>
<body>
<button id="btn01">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>
4. jQuery 对象和 dom 对象区分
4.1 什么是 jQuery 对象,什么是 dom 对象
4.1.1 Dom 对象
4.1.2 jQuery 对象
4.2、jQuery 对象的本质
4.3 jQuery 对象和 Dom 对象使用区别
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3-jQuery对象和Dom对象使用区别</title><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {//这是dom对象属性和方法document.getElementById("span").innerHTML = "你好世界";//jQuery 对象不能使用 DOM 对象的属性和方法// var span2 = $("span").innerHTML = "你好世界";//这是jQuery对象对象的属性和方法$("#button").click(function () {alert("这是jQuery对象对象的属性和方法")});// DOM 对象也不能使用 jQuery 对象的属性和方法// document.getElementById("button").click(function () {// alert("这是dom对象对象的属性和方法")// });});</script>
</head>
<body>
<span id="span">hello world</span><br/>
<button id="button">按钮</button>
</body>
</html>
4.4、Dom 对象和 jQuery 对象互转
5.选择器
5.1 基本选择器
5.1.1 id选择器
$("#id")
概述
根据给定的ID匹配一个元素。
如果选择器中包含特殊字符,可以用两个斜杠转义。参见示例。
参数
id
用于搜索的,通过元素的 id 属性中给定的值
示例
描述:
查找 ID 为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:
[ <div id="myDiv">id="myDiv"</div> ]
描述:
查找含有特殊字符的元素
HTML 代码:
<span id="foo:bar"></span> <span id="foo[bar]"></span> <span id="foo.bar"></span>
jQuery 代码:
#foo\\:bar #foo\\[bar\\] #foo\\.bar
5.1.2 element选择器
$("element")
概述
根据给定的元素名匹配所有元素
参数
element
一个用于搜索的元素。指向 DOM 节点的标签名。
示例
描述:
查找一个 DIV 元素。
HTML 代码:
<div>DIV1</div> <div>DIV2</div> <span>SPAN</span>
jQuery 代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
5.1.3 class选择器
$(".class")
概述
根据给定的类匹配元素。
参数
classString
一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。
示例
描述:
查找所有类是 "myClass" 的元素.
HTML 代码:
<div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
5.1.4 *选择器
$(" * ")
概述
匹配所有元素
多用于结合上下文来搜索。
示例
描述:
找到每一个元素
HTML 代码:
<div>DIV</div> <span>SPAN</span> <p>P</p>
jQuery 代码:
$("*")
结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
5.1.5 组合选择器
$(" selector1,selector2,selectorN ")
概述
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
参数:
selector1
一个有效的选择器
selector2
另一个有效的选择器
selectorN
任意多个有效选择器
示例
描述:
找到匹配任意一个类的元素。
HTML 代码:
<div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p .myClass")
结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
5.1.6 小结
#ID选择器:根据 id 查找标签对象.class 选择器:根据 class 查找标签对象element 选择器:根据标签名查找标签对象*选择器:表示任意的,所有的元素selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回
5.1.7 练习
<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="../JQuery类库/jquery-1.7.2.min.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","blue");});//3.选择 元素名是 div 的所有元素$("#btn3").click(function () {$("div").css("background-color","greenyellow");});//4.选择所有的元素$("#btn4").click(function () {$("*").css("background-color","#bbffaa");});//5.选择所有的 span 元素和id为two的元素$("#btn5").click(function () {$("span,#two").css("background-color","red");});});</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>
效果:
5.2 层级选择器
5.2.1 ancestor descendant选择器
$(" ancestor descendant ")
概述
在给定的祖先元素下匹配所有的后代元素
参数
ancestor
任何有效选择器
descendant
用以匹配元素的选择器,并且它是第一个选择器的后代元素
示例
描述:
找到表单中所有的 input 元素
HTML 代码:
<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset> </form> <input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
5.2.2 parent > child 选择器
$(" parent > child ")
概述
在给定的父元素下匹配所有的子元素
参数
parent
任何有效选择器
child
用以匹配元素的选择器,并且它是第一个选择器的子元素
示例
描述:
匹配表单中所有的子级input元素。
HTML 代码:
<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset> </form> <input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
5.2.3 prev + next 选择器
$( " prev + next ")
概述
匹配所有紧接在 prev 元素后的 next 元素
参数
prev
任何有效选择器
next
一个有效选择器并且紧接着第一个选择器
示例
描述:
匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset> </form> <input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
5.2.4 prev ~ siblings 选择器
$(" prev ~ siblings ")
概述
匹配 prev 元素之后的所有 siblings 元素
参数
prev
任何有效选择器
siblings
一个选择器,并且它作为第一个选择器的同辈
示例
描述:
找到所有与表单同辈的 input 元素
HTML 代码:
<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset> </form> <input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]
5.2.5 小结
ancestor descendant 后代选择器 : 在给定的祖先元素下匹配所有的后代元素parent > child 子元素选择器:在给定的父元素下匹配所有的子元素(不包含孙子元素)prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素
5.2.6 练习
<!DOCTYPE HTML >
<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="../JQuery类库/jquery-1.7.2.min.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>
效果:
5.3 过滤选择器
5.3.1 基本过滤器
:first 获取第一个元素:last 获取最后个元素:not(selector) 去除所有与给定选择器匹配的元素:even 匹配所有索引值为偶数的元素,从 0 开始计数:odd 匹配所有索引值为奇数的元素,从 0 开始计数:eq(index) 匹配一个给定索引值的元素:gt(index) 匹配所有大于给定索引值的元素:lt(index) 匹配所有小于给定索引值的元素:header 匹配如 h1, h2, h3 之类的标题元素:animated 匹配所有正在执行动画效果的元素
代码示例:
<!DOCTYPE HTML>
<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="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});$(document).ready(function(){ //为$(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$("#btn11").click(function(){$("div:not(:animated):last").css("background", "#bbffaa");});});</script>
</head>
<body>
<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.3.2 属性过滤器:
<!DOCTYPE HTML >
<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="../JQuery类库/jquery-1.7.2.min.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>
效果:
5.3.3 表单过滤器
: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="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function(){/**:input:text:password:radio:checkbox:submit:image:reset:button:file:hidden表单对象的属性:enabled:disabled:checked:selected*///1.对表单内 可用 文本框 进行赋值操作$("#btn1").click(function(){// val()可以操作表单项的value属性值// 它可以设置和获取 有参数表示赋值,无参数表示获取$(":text:enabled").val("我是可用文本框");});//2.对表单内 不可用input 赋值操作$("#btn2").click(function(){$(":text:disabled").val("我是不可用文本框")});//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数$("#btn3").click(function(){alert($(":checkbox:checked").size());});//4.获取多选框,每个选中的value值$("#btn4").click(function(){// 获取全部选中的复选框标签对象var $checkbox = $(":checkbox:checked");// 老式遍历// for (var i = 0; i < $checkbox.length; i++) {// alert($checkbox[i].value)// }// each方法是jQuery对象提供用来遍历元素的方法// 在遍历的function函数中,有一个this对象,这个this对象,就是当前遍历到的dom对象$checkbox.each(function () {alert(this.value);});});//5.获取下拉框选中的内容$("#btn5").click(function(){// 遍历,获取option标签中的文本内容// 获取选中的option标签对象$("select option:selected").each(function () {alert(this.innerHTML);});});})</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 文本框 进行赋值操作.</button>
<button id="btn2">对表单内 不可用文本框 进行赋值操作.</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>
5.3.4 内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:parent 匹配含有子元素或者文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:contains(text) 匹配包含给定文本的元素
查找所有包含 "John" 的 div 元素
HTML 代码:
<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn
jQuery 代码:
$("div:contains('John')")
结果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
:empty 匹配所有不包含子元素或者文本的空元素
查找所有不包含子元素或者文本的空元素
HTML 代码:
<table><tr><td>Value 1</td><td></td></tr><tr><td>Value 2</td><td></td></tr> </table>
jQuery 代码:
$("td:empty")
结果:
[ <td></td>, <td></td> ]
:has(selector) 匹配含有选择器所匹配的元素的元素
给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
<div><p>Hello</p></div> <div>Hello again!</div>
jQuery 代码:
$("div:has(p)").addClass("test");
结果:
[ <div class="test"><p>Hello</p></div> ]
:parent 匹配含有子元素或者文本的元素
查找所有含有子元素或者文本的 td 元素
HTML 代码:
<table><tr><td>Value 1</td><td></td></tr><tr><td>Value 2</td><td></td></tr> </table>
jQuery 代码:
$("td:parent")
结果:
[ <td>Value 1</td>, <td>Value 2</td> ]
代码示例:
<!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="../JQuery类库/jquery-1.7.2.min.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>
5.3.5 可见性过滤选择器
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素
查找隐藏的 tr
HTML 代码:
<table><tr style="display:none"><td>Value 1</td></tr><tr><td>Value 2</td></tr> </table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
匹配type为hidden的元素
HTML 代码:
<form><input type="text" name="email" /><input type="hidden" name="id" /> </form>
jQuery 代码:
$("input:hidden")
结果:
[ <input type="hidden" name="id" /> ]
查找所有可见的 tr 元素
HTML 代码:
<table><tr style="display:none"><td>Value 1</td></tr><tr><td>Value 2</td></tr> </table>
jQuery 代码:
$("tr:visible")
结果:
[ <tr><td>Value 2</td></tr> ]
6. jQuery 元素筛选
使用格式:jq对象.方法名()
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 对象中
对于add():
add(expr|ele|html|obj[,con])
概述
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
jQuery 1.4 中, .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序,而不再是简单的添加。
参数
expr
一个用于匹配元素的选择器字符串。
elementsDOMElementV1.0
DOM元素。
html
HTML片段添加到匹配的元素。
jQuery object
一个jqeruy对象增加到匹配的元素
expr,context
expr:用于匹配元素并添加的表达式字符串,或者用于动态生成的HTML代码,如果是一个字符串数组则返回多个元素
context:作为待查找的 DOM 元素集、文档或 jQuery 对象。
示例
描述:
添加一个新元素到一组匹配的元素中,并且这个新元素能匹配给定的表达式。
HTML 代码:
<p>Hello</p><span>Hello Again</span>
jQuery 代码:
$("p").add("span")
结果:
[ <p>Hello</p>, <span>Hello Again</span> ]
描述:
动态生成一个元素并添加至匹配的元素中
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").add("<span>Again</span>")
结果:
[ <p>Hello</p>, <span>Hello Again</span> ]
描述:
为匹配的元素添加一个或者多个元素
HTML 代码:
<p>Hello</p><p><span id="a">Hello Again</span></p>
jQuery 代码:
$("p").add(document.getElementById("a"))
结果:
[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]
代码示例:
<!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="../JQuery类库/jquery-1.7.2.min.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() 选择下一个兄弟元素$("div[id=one]").next().css("background-color", "#bfa");});//(11)nextAll() #one后面所有的span元素$("#btn11").click(function () {//nextAll() 选出后面所有的元素$("div[id=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").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>
7. jQuery DOM属性操作
html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样attr() 可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled等等 attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbjprop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等等
7.1 html()
html([val|fn])
概述
设置和获取起始标签和结束标签中的内容。
参数
val
用于设定HTML内容的值
示例
无参数 描述:
返回p元素的内容。
jQuery 代码:
$('p').html();
参数val 描述:
设置所有 p 元素的内容
jQuery 代码:
$("p").html("Hello <b>world</b>!");
7.2 text()
text([val|fn])
概述
设置和获取起始标签和结束标签中的文本。
参数
val
用于设置元素内容的文本
示例
无参数 描述:
返回p元素的文本内容。
jQuery 代码:
$('p').text();
参数val 描述:
设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");
7.3 val()
val([val|fn|arr])
概述
设置和获取表单项的 value 属性值。
参数
val
要设置的值。
array
用于 check/select 的值
示例
无参数 描述:
获取文本框中的值
jQuery 代码:
$("input").val();
参数val 描述:
设定文本框的值
jQuery 代码:
$("input").val("hello world!");
参数array 描述:
html代码:
单选:<input name="radio" type="radio" value="radio1"/>radio1<input name="radio" type="radio" value="radio2"/>radio2<br/>多选<input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2<input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3<br/>下拉框多选<select multiple="mutiple" size="4"><option value="mul1">mul1</option><option value="mul2">mul2</option><option value="mul3">mul3</option><option value="mul4">mul4</option></select>
jquery代码:
<script type="text/javascript">$(function () {//参数为数组//操作单选// $(":radio").val(["radio1"]); //将value值为radio1设置为默认选中// //批量操作多选// $(":checkbox").val(["checkbox1","checkbox3"]);// //批量操作多选下拉框// $("select").val(["mul1", "mul3"]);//批量操作 check/select 的值$(":radio,:checkbox,select").val(["radio1","checkbox1","checkbox3","mul1", "mul3"])});</script>
结果:
7.4 attr() 与prop()
attr() 可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled等等 attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbjprop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等等
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1-val方法</title><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {//attr 可以设置和获取属性的值 不推荐操作 checked、readOnly、selected、disabled//获取 一个参数alert($(":checkbox:first").attr("name")); //checkbox//赋值 两个参数$(":checkbox:first").attr("name","checkbox01");alert($(":checkbox:first").attr("name"));//checkbox01//attr可以自定义非官方标准的属性$(":checkbox:first").attr("abc", "abcValue");alert($(":checkbox:first").attr("abc")); //abcValue//attr 不推荐操作 checked、readOnly、selected、disabledalert($(":checkbox:first").attr("checked"));//undefined 官方认为undefined是一个错误//prop() 可以设置和获取属性的值 只推荐操作 checked、readOnly、selected、disabledalert($(":checkbox:first").prop("checked")); //false$(":checkbox:first").prop("checked",true);alert($(":checkbox:first").prop("checked")); //true});</script>
</head>
<body>多选<input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2<input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3<br/>
</body>
</html>
7.5 全选,全不选,反选练习
需求:1.点击全选按钮,以上全部复选框全部选中,点击全不选按钮反之
2.点击反选,已选中的变为未选中,未选中的变为已选中
3.点击全选/全不选复选框,会出现对应全选或全不选
4.当点击中间4个复选框时,全选/全不选复选框 不同步对应
5.点击提交按钮,会将选中的爱好用警告框显示出来
<!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="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {//全选按钮$("#checkedAllBtn").click(function () {$(":checkbox").each(function () {this.checked = true;});});//全不选按钮$("#checkedNoBtn").click(function () {$(":checkbox").each(function () {this.checked = false;});});//反选按钮var items = $("[name=items]");$("#checkedRevBtn").click(function () {items.each(function () {this.checked = !this.checked;});var flag = $("[name='items']:checked").length == 4;$("#checkedAllBox").prop("checked", flag)});//提交按钮$("#sendBtn").click(function () {$("[name='items']:checked").each(function () {alert(this.value)});});//全选/全不选复选框$("#checkedAllBox").click(function () {items.attr("checked", this.checked);});//全选/全不选复选框同步items.click(function () {var flag = $("[name='items']:checked").length == 4;$("#checkedAllBox").prop("checked", flag)});});</script>
</head>
<body><form method="post" action="">你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选<br/><input type="checkbox" name="items" value="足球"/>足球<input type="checkbox" name="items" value="篮球"/>篮球<input type="checkbox" name="items" value="羽毛球"/>羽毛球<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/><input type="button" id="checkedAllBtn" value="全 选"/><input type="button" id="checkedNoBtn" value="全不选"/><input type="button" id="checkedRevBtn" value="反 选"/><input type="button" id="sendBtn" value="提 交"/>
</form></body>
</html>
8.DOM 的增删改
内部插入:appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾,成为最后一个子元素prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面,成为第一个子元素外部插入:insertAfter() a.insertAfter(b) 得到 bainsertBefore() a.insertBefore(b) 得到 ab替换 :replaceWith() a.replaceWith(b) 用 b 替换掉 areplaceAll() a.replaceAll(b) 用 a 替换掉所有 b删除:remove() a.remove(); 删除 a 标签empty() a.empty(); 清空 a 标签里的内容
8.1 方法代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4-DOM 的增删改</title><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {//appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾,成为最后一个子元素$("<span>world</span>").appendTo($("#div01"));//prependTo() a.prependTo(b) 把 a 插到 b 所有子元素前面,成为第一个子元素$("<span>hello</span>").prependTo($("#div02"));//insertAfter() a.insertAfter(b) 得到 ba$("<span>world</span>").insertAfter($("#div03"));//insertBefore() a.insertBefore(b) 得到 ab$("<span>hello</span>").insertBefore($("#div04"));//replaceWith() a.replaceWith(b) 用 b 替换掉 a$("[title=span01]").replaceWith("<span>replaceWith</span>");//replaceAll() a.replaceAll(b) 用 a 替换掉所有 b$("<span>replaceAll</span>").replaceAll($("[title=span02]"));// remove() a.remove(); 删除 a 标签$("#div05").remove();// empty() a.empty(); 清空 a 标签里的内容$("#div06").empty();});</script>
</head>
<body>内部插入<div id="div01"> hello </div><div id="div02"> world </div><hr/>外部插入<div id="div03"> hello </div><div id="div04"> world </div><hr/>替换<br/><span title="span01"> hello </span><br/><span title="span01"> world </span><br/><span title="span02"> hello </span><br/><span title="span02"> world </span><br/><hr/>删除<div id="div05"><div>div05</div></div><div id="div06"><div>div06</div></div></body>
</html>
原来:
结果:
8.2 练习
8.2.1 从左到右,从右到左练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>5-左右移动练习</title><title>Insert title here</title><style type="text/css"> select {width: 100px;height: 140px;}div {width: 130px;float: left;text-align: center;}</style><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {// 第一个按钮 【选中添加到右边】$("button:eq(0)").click(function () {$("select:eq(0) option:selected").appendTo($("select:eq(1)"));});// 第二个按钮 【全部添加到右边】$("button:eq(1)").click(function () {$("select:eq(0) option").appendTo($("select:eq(1)"));});// 第三个按钮 【选中删除到左边】$("button:eq(2)").click(function () {$("select:eq(1) option:selected").appendTo($("select:eq(0)"));});// 第四个按钮 【全部删除到左边】$("button:eq(3)").click(function () {$("select:eq(1) option").appendTo($("select:eq(0)"));});});</script>
</head>
<body>
<div id="left"><select multiple="multiple" name="sel01"><option value="opt01">选项 1</option><option value="opt02">选项 2</option><option value="opt03">选项 3</option><option value="opt04">选项 4</option><option value="opt05">选项 5</option><option value="opt06">选项 6</option><option value="opt07">选项 7</option><option value="opt08">选项 8</option></select><button>选中添加到右边</button><button>全部添加到右边</button>
</div><div id="rigth"><select multiple="multiple" name="sel02"></select><button>选中删除到左边</button><button>全部删除到左边</button>
</div>
</body>
</html>
8.2.2 动态添加、删除表格记录
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>6-动态添加删除表格记录</title><style type="text/css">#employeeTable, #employeeTable tr,#employeeTable th, #employeeTable td {border: 1px gray solid;border-collapse: collapse;text-align: center;}</style><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {// 创建一个用于复用的删除的 function 函数function deleteFun(){// 在事件响应的 function 函数中,有一个 this 对象。这个 this 对象是当前正在响应事件的 dom 对象。var tr = $(this).parent().parent();var name = tr.find("td:first").text();/*** confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么,* 它就提示什么<br/>* 当用户点击了确定,就返回 true。当用户点击了取消,就返回 false**/if(confirm("你确定要删除["+name+"]的信息吗!!!")){tr.remove();}return false;}// 给【Submit】按钮绑定单击事件$("#addEmpButton").click(function () {// 获取输入框,姓名,邮箱,工资的内容var name = $("#empName").val();var email = $("#email").val();var salary = $("#salary").val();// 创建一个行标签对象,添加到显示数据的表格中var tr = $("<tr>" +"<td>" + name + "</td>" +"<td>" + email + "</td>" +"<td>" + salary + "</td>" +"<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +"</tr>");// 添加到显示数据的表格中tr.appendTo($("#employeeTable"));// 给添加的行的 a 标签绑上事件tr.find($("a")).click(deleteFun);});// 给删除的 a 标签绑定单击事件$("a").click(deleteFun);});</script>
</head>
<body>
<table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr>
</table>
<div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name:</td><td class="inp"><input type="text" name="empName" id="empName"/></td></tr><tr><td class="word">email:</td><td class="inp"><input type="text" name="email" id="email"/></td></tr><tr><td class="word">salary:</td><td class="inp"><input type="text" name="salary" id="salary"/></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc"> Submit</button></td></tr></table>
</div>
</body>
</html>
9. CSS 样式操作
css(name|pro|[,val|fn]) 读写匹配元素的样式属性。a.css('color')取出a元素的colora.css('color',"red")设置a元素的color为redaddClass() 添加样式 向被选元素添加一个或多个类removeClass() 删除样式从被选元素删除一个或多个类 ,若没传入参数,则删除该对象的所有样式toggleClass() 有就删除,没有就添加样式。(可以理解为开关)offset() 获取和设置元素的坐标。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">div{width:100px;height:260px;}div.border{border: 2px white solid;}div.redDiv{background-color: red;}div.blackDiv{border: 5px blue solid;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){/*
CSS
css(name|pro|[,val|fn]) 读写匹配元素的样式属性。 a.css('color')取出a元素的colora.css('color',"red")设置a元素的color为redCSS 类addClass(class|fn) 为元素添加一个class值;<div class="mini big">
removeClass([class|fn]) 删除元素的class值;传递一个具体的class值,就会删除具体的某个classa.removeClass():移除所有的class值**/var $divEle = $('div:first');$('#btn01').click(function(){//addClass() - 向被选元素添加一个或多个类$divEle.addClass("redDiv blackDiv");});$('#btn02').click(function(){//removeClass() - 从被选元素删除一个或多个类 ,若没传入参数,则删除该对象的所有样式$divEle.removeClass()});$('#btn03').click(function(){//toggleClass() - 对被选元素进行添加/删除类的切换操作 //切换就是如果具有该类那么删除,如果没有那么添加上$divEle.toggleClass("redDiv");});$('#btn04').click(function(){//offset() - 返回第一个匹配元素相对于文档的位置。var os = $divEle.offset();//注意通过offset获取到的是一个对象,这个对象有两个属性top表示顶边距,left表示左边距alert("顶边距:"+os.top+" 左边距:"+os.left);//调用offset设置元素位置时,也需要传递一个js对象,对象有两个属性top和left//offset({ top: 10, left: 30 });$divEle.offset({top:50,left:60}); });})
</script>
</head>
<body><table align="center"><tr><td><div class="border"></div></td><td><div class="btn"><input type="button" value="addClass()" id="btn01"/><input type="button" value="removeClass()" id="btn02"/><input type="button" value="toggleClass()" id="btn03"/><input type="button" value="offset()" id="btn04"/></div></td></tr></table><br /> <br /><br /> <br /></body>
</html>
10. jQuery 动画
10.1 代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title>table,td {border: 1px solid;border-collapse: collapse;}span {background-color: #fb6;text-align: center;width: 100px;height: 50px;display: block;}<script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">/*基本show([speed,[easing],[fn]])hide([speed,[easing],[fn]])toggle([speed],[easing],[fn])滑动slideDown([spe],[eas],[fn])slideUp([speed,[easing],[fn]])slideToggle([speed],[easing],[fn])淡入淡出fadeIn([speed],[eas],[fn])fadeOut([speed],[eas],[fn])fadeTo([[spe],opa,[eas],[fn]])fadeToggle([speed,[eas],[fn]])*/$(function(){//显示 show()$("#btn1").click(function(){$("#div1").show(1000);});//隐藏 hide()$("#btn2").click(function(){$("#div1").hide(1000);});//切换 toggle()$("#btn3").click(toggle);function toggle() {$("#div1").toggle(1000,toggle);};//淡入 fadeIn()$("#btn4").click(function(){$("#div1").fadeIn(500);});//淡出 fadeOut()$("#btn5").click(function(){$("#div1").fadeOut(500);});//淡化到 fadeTo()$("#btn6").click(function(){$("#div1").fadeTo("slow",Math.random());});//淡化切换 fadeToggle()$("#btn7").click(function(){$("#div1").fadeToggle("slow","linear");});})</script></head>
<body>
<table style="float: left;"><tr><td><button id="btn1">显示show()</button></td></tr><tr><td><button id="btn2">隐藏hide()</button></td></tr><tr><td><button id="btn3">显示/隐藏切换 toggle()</button></td></tr><tr><td><button id="btn4">淡入fadeIn()</button></td></tr><tr><td><button id="btn5">淡出fadeOut()</button></td></tr><tr><td><button id="btn6">淡化到fadeTo()</button></td></tr><tr><td><button id="btn7">淡化切换fadeToggle()</button></td></tr>
</table><div id="div1" style="float:left;border: 1px solid;
background-color: blue;width: 300px;height: 200px;">jquery动画定义了很多种动画效果,可以很方便的使用这些动画效果
</div>
</body></html>
10.2 品牌展示练习
需求:点击 显示全部品牌 或 显示精品品牌 可以互相切换
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>品牌展示练习</title><style type="text/css">* {margin: 0;padding: 0;}body {font-size: 12px;text-align: center;}a {color: #04D;text-decoration: none;}a:hover {color: #F50;text-decoration: underline;}.SubCategoryBox {width: 600px;margin: 0 auto;text-align: center;margin-top: 40px;}.SubCategoryBox ul {list-style: none;}.SubCategoryBox ul li {display: block;float: left;width: 200px;line-height: 20px;}.showmore, .showless {clear: both;text-align: center;padding-top: 10px;}.showmore a, .showless a {display: block;width: 120px;margin: 0 auto;line-height: 24px;border: 1px solid #AAA;}.showmore a span {padding-left: 15px;background: url(../img/down.gif) no-repeat 0 0;}.showless a span {padding-left: 15px;background: url(../img/up.gif) no-repeat 0 0;}.promoted a {color: #F50;}</style><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {// 页面加载完成后 隐藏品牌var category = $("ul:first li:gt(5):not(:last)");var $div = $("div div");category.hide();// 绑定点击事件$("div div a").click(function () {// 品牌内容切换(如果category是可见的,切换为隐藏的;// 如果元素是隐藏的,切换为可见的。category.toggle();// 获取需要高亮的对象var jQuery = $("ul:first li").filter(":contains(佳能), :contains('尼康'), :contains('奥林巴斯')");//判断category是否隐藏if (category.is(":hidden")) {//品牌隐藏 a span中内容为:显示全部品牌 a$("div div a span").text("显示全部品牌");//div的class属性为showmore$div.removeClass();$div.addClass("showmore");//取消高亮jQuery.removeClass("promoted");} else {//品牌显示 a span中内容为:显示精品品牌 a div的class属性为showless$("div div a span").text("显示精品品牌");//div的class属性为showmore$div.removeClass();$div.addClass("showless");//显示高亮jQuery.addClass("promoted");}return false; //取消超链接默认跳转});});</script>
</head>
<body>
<div class="SubCategoryBox"><ul><li><a href="#">佳能</a><i>(30440) </i></li><li><a href="#">索尼</a><i>(27220) </i></li><li><a href="#">三星</a><i>(20808) </i></li><li><a href="#">尼康</a><i>(17821) </i></li><li><a href="#">松下</a><i>(12289) </i></li><li><a href="#">卡西欧</a><i>(8242) </i></li><li><a href="#">富士</a><i>(14894) </i></li><li><a href="#">柯达</a><i>(9520) </i></li><li><a href="#">宾得</a><i>(2195) </i></li><li><a href="#">理光</a><i>(4114) </i></li><li><a href="#">奥林巴斯</a><i>(12205) </i></li><li><a href="#">明基</a><i>(1466) </i></li><li><a href="#">爱国者</a><i>(3091) </i></li><li><a href="#">其它品牌相机</a><i>(7275) </i></li></ul><div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div>
</div>
</body>
</html>
11. jQuery 事件操作
11.1 $( function(){} ); 和window.onload 的区别
$( function(){} ); 和window.onload = function(){} 的区别?
11.2 jQuery 中其他的事件处理方法
click() 它可以绑定单击事件,以及触发单击事件(事件都可以绑定和触发)mouseover() 鼠标移入事件mousemove() 鼠标移动事件mouseout() 鼠标移出事件bind() 可以给元素一次性绑定一个或多个事件。one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。unbind() 跟 bind 方法相反的操作,解除事件的绑定live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效
以下为代码示例:
先给html代码,之后都为js代码:
<body>
<div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。<br/></div><button id="button">按钮</button>
</div>
</body>
11.2.1 事件的绑定与触发(click mouseover mouseout)
<script type="text/javascript">$(function () {//给元素绑定事件 绑定事件可以链式操作//jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).// 事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数()//{ 触发事件执行的代码 })function contentToggle(){$(".content").toggle();}$(".head").click(contentToggle).mouseover(contentToggle).mouseout(contentToggle);//触发 触发事件不可以链式操作$("#button").click(function () {$(".head").click();});});</script>
11.2.2 bind事件处理
<script type="text/javascript">$(function () {//*2.jQuery提供的绑定方式:bind(type,[data],fn)函数把元素和事件绑定起来//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法//bind(事件字符串,回调函数),后来添加的元素不会绑定事件//使用bind()绑定多个事件 type可以接受多个事件类型,使用空格分割多个事件$(".head").bind("click mouseover mouseout",function(){$(".content").toggle();});});</script>
11.2.3 one事件处理
$(function () {//3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)//函数把元素和事件绑定起来//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法$(".head").one("click mouseover",function(){$(".content").toggle();}); });
11.2.4 unbind事件处理
<script type="text/javascript">$(function () {$(".head").bind("click mouseover mouseout", function () {$(".content").toggle();});$(".head").unbind("mouseover mouseout");});
</script>
11.2.5 live
<script type="text/javascript">$(function () {//4.live方法会为现在及以后添加的元素都绑定上相应的事件$(".head").live("click", function () {$(".content").toggle();});$("#panel").before("<h5 class='head'>什么是jQuery?</h5>");});</script>
11.3 事件的冒泡
什么是事件的冒泡?事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。那么如何阻止事件冒泡呢?在子元素事件函数体内,return false; 可以阻止事件的冒泡传递。
11.4 javaScript 事件对象
事件对象,是封装有触发的事件信息的一个 javascript 对象。我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。如何获取呢 javascript 事件对象呢?在给元素绑定事件的时候,在事件的 function( event ) 参数列表中添加一个参数,这个参数名,我们习惯取名为 event。 这个 event 就是javascript 传递参事件处理函数的事件对象。
1.原生 javascript 获取 事件对象
<script type="text/javascript">//1.原生 javascript 获取 事件对象window.onload = function (event) {document.getElementById("button").onclick = function () {console.log(event);};}</script>
$(function () {$("#button").click(function (event) {console.log(event);});});
3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$(function () {$(".head").bind("mouseover mouseout",function (event) {if (event.type == "mouseover") {console.log("鼠标移入");}else{console.log("鼠标移出");}});});
11.5 练习:图片跟随
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>8-图片跟随练习</title><title>Insert title here</title><style type="text/css">body {text-align: center;}#small {margin-top: 150px;}#showBig {position: absolute;display: none;}</style><script type="text/javascript" src="../JQuery类库/jquery-1.7.2.min.js"></script><script type="text/javascript">$(function () {$("#small").bind("mouseover mouseout mousemove", function (event) {if (event.type == "mouseover") {$("#showBig").show();} else if (event.type == "mouseout") {$("#showBig").hide();} else if (event.type == "mousemove") {$("#showBig").offset({left: event.pageX + 10,top: event.pageY + 10});}});});</script>
</head>
<body>
<img id="small" src="../img/small.jpg"/>
<div id="showBig"><img src="../img/big.jpg">
</div>
</body>
</html>
JavaWeb jQuery相关推荐
- JavaWeb = jQuery使用详解
jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作.事件.页面动画.异步操作等功能. 特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其 ...
- JavaWeb - jQuery
jQuery <!--jQuery 介绍什么是 jQuery?顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库.jQuery 核 ...
- javaweb+jQuery ajax实例
什么是ajax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJA ...
- javaweb(03) jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
- JavaWeb笔记:第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx
JavaWeb笔记:第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx 1. MVC ...
- 基于javaweb的水果店商城超市系统(java+ssm+jsp+ajax+jquery+mysql)
基于javaweb的水果店商城超市系统(java+ssm+jsp+ajax+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea ...
- 基于javaweb的景区旅游管理系统(java+springboot+html+layui+bootstrap+jquery+mysql)
基于javaweb的景区旅游管理系统(java+springboot+html+layui+bootstrap+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7 开发工具 ecl ...
- 基于javaweb的高校运动会管理系统(java+ssm+jsp+js+jquery+mysql)
基于javaweb的高校运动会管理系统(java+ssm+jsp+js+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/m ...
- java接口支持ajax,【JavaWeb】jQuery对Ajax的支持
jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...
最新文章
- Oracle 11g新特性之--虚拟列(Virtual Column)
- 等待时间clientNYOJ 179 LK's problem
- 正点原子串口函数分析
- 怎么制作升温曲线图_利用金字塔原理制作PPT,完整有逻辑
- java字符串转化为数组_Go 语言字符串和数组转化 | 臭大佬
- 双链表嵌套的简单学生信息管理系统
- 电脑软件:巧用微软小工具解决日常问题!
- java 校验护照_【示例教程】如何使用LEADTOOLS 的JAVA接口从护照中识别和提取数据...
- 2020流行的液态风格PNG免扣素材,竟然被我找到了!
- React Navigation (v2)
- DB2中不同于其它数据库的操作
- Ajax的load方法
- [图论] 树剖LCA
- html批量打印保存到pdf,批量打印成PDF时不用每次点击保存位置的技巧
- 台式计算机使用寿命,惠普台式电脑怎么样(深度评测其质量及使用寿命)
- 餐饮外卖平台小程序源码,附带详细教程
- 微前端在得物客服域的实践/那么多微前端框架,为啥我们选Qiankun + MF
- CHIPON 芯旺微的KF32A156系列的CAN FD模块的使用介绍
- 【报告分享】阿里研究院:2020中国淘宝村研究报告(附下载)
- 【渝粤教育】国家开放大学2018年秋季 7404-22T数学建模 参考试题