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
一个用于匹配元素的选择器字符串。
elements DOMElementV1.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、disabled
alert($(":checkbox:first").attr("checked"));//undefined 官方认为undefined是一个错误
//prop() 可以设置和获取属性的值 只推荐操作 checked、readOnly、selected、disabled
alert($(":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元素的color
a.css('color',"red")设置a元素的color为red
CSS 类
addClass(class|fn) 为元素添加一个class值;<div class="mini big">
removeClass([class|fn]) 删除元素的class值;传递一个具体的class值,就会删除具体的某个class
a.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 练习:图片跟随
![](https://i-blog.csdnimg.cn/blog_migrate/9adbf554368280db4b5530a094c42ec6.png)
<!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>