jQuery
1、 jQuery核心函数
$是jQuery的核心函数，能够完成jQuery的很多功能。$()就是调用$这个函数。
2、DOM对象和jQuery对象的相互转换
1、dom对象转换为jQuery对象
- 先获得dom对象
- $(dom对象) 就可以转换为 jQuery对象
2、jQuery对象转换为DOM对象
- 先获得jQuery对象
- jQuery对象[下标] 取出相应的DOM对象
3、jQuery选择器（重点）
3.1、 基本选择器
id 选择器： 根据id查找标签对象
.class 选择器：根据class查找标签对象
element 选择器：根据标签名查找标签对象
selector1,selector2 组合选择器：合并选择器1，选择器2的结果并返回
3.2、层级选择器
ancestor descendent 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent->child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器:匹配所有紧接在prev 元素后的next元素
prev~sibings 之后的兄弟元素选择器
3.3、过滤选择器
基本过滤器
：first 获取第一个元素
- ：last 获取最后一个元素
- eq(index) 匹配一个给定索引值的元素
属性过滤器
[attribute] 匹配包含给定属性的元素
[attribute==value] 匹配给定的属性是某个特定值的元素
表单过滤器
: text 匹配所有文本输入框
：password 匹配所有的密码输入框
：radio 匹配所有的单选框
：CheckBox 匹配所有的复选框
表单对象属性过滤器
:checked 匹配所有选中的单选，复选和下拉列表中选中的option标签对象
:selected 匹配所有选中的option
4、属性操作
prop() 可以设置或获取属性的值，只推荐操作checked,readOnly,selected,disabled等
attr() 可以设置或获取属性的值，不推荐操作checked,readOnly,selected,disabled等
html() 可以设置或获取起始标签和结束标签的内容
text() 可以设置或获取起始标签和结束标签的文本
val() 可以设置或获取表单项的value属性值
4.1、全选、全不选练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//全选绑定单击事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked",true);
});
//全不选绑定单击事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked",false);
});
//反选绑定单击事件
$("#checkedRevBtn").click(function () {
$(":checkbox[name='items']").each(function () {
//在each遍历的function函数中，有一个this对象，这个this对象是当前正在遍历的dom对象
this.checked = !this.checked;
});
// alert($(":checkbox").length);//5
//alert($(":checkbox[name='items']").length);//4
var allCount = $(":checkbox[name='items']").length;//全部的数量
var checkedCount = $(":checkbox[name='items']:checked").length;//被选中的数量
// if(allCount==checkedCount){
// $("#checkedAllBox").prop("checked",true);//注意使用的是哪一个的id属性的值 checkedAllBox
// }else{
// $("#checkedAllBox").prop("checked",false);
// }
//改进
$("#checkedAllBox").prop("checked",allCount==checkedCount);
});
//提交绑定单击事件
$("#sendBtn").click(function () {
//获取全部的复选框
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
})
});
//全选或者全不选的绑定单击事件
$("#checkedAllBox").click(function () {
// alert(this);//[object HTMLInputElement]
// alert(this.checked);//true或者false
$(":checkbox[name='items']").prop("checked",this.checked);
});
//给每个球绑定单击事件
$(":checkbox[name='items']").click(function () {
var allCount = $(":checkbox[name='items']").length;
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount==checkedCount);
})
});
</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>
4.2、左到右，右到左 练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//完成页面的加载
$(function () {
//第一个按钮[选中添加到右边]
$("button:eq(0)").click(function () {
$("select:eq(o) option:selected").appendTo($("select:eq(1)"));
});
//第2个按钮[全部添加到右边]
$("button:eq(1)").click(function () {
$("select:eq(o) option").appendTo($("select:eq(1)"));
});
//第3个按钮[选中删除到左边]
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
//第4个按钮[全部删除到左边]
$("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>
遗忘知识点
find(expr|obj|ele)
搜索所有与指定表达式匹配的元素。这个函数是找出**正在处理的元素的后代元素的好方法**。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
confirm()
confirm 是JavaScript语言提供的一个确认提示框函数.你传什么给他，他就提示什么；
当用户点击确定是就返回true，点击取消就返回false
first() 获取第一个元素
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').first()
//结果为：[ <li>list item 1</li> ]
// 在事件响应的function函数中，有一个this对象，这个this对象是正在响应事件的dom对象
:gt(index)
匹配所有大于给定索引值的元素
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:gt(0)")
/* 结果：[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
*/
:contains(text)
匹配包含给定文本的元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
$("div:contains('John')")
结果：[
John Resig
, Malcom John Sinclair
]