- 一、JQuery 核心函数 $()
- 二、JQuery 对象和 Dom 对象
- 三、JQuery 选择器
-
- 3.1 基本选择器
- 3.2 层级选择器
- 3.3 过滤选择器
- 四、JQuery 的属性操作
- 五、JQuery 练习
- 六、CSS样式操作
- 七、JQuery 事件操作
一、JQuery 核心函数 $()
$
是JQuery
的核心函数,能完成JQuery
的很多功能。$()
就是调用$
这个函数
- 传入参数为函数时:
$( function(){} );
功能跟window.onload
一样,都是页面加载完成之后- 传入参数为
HTML
字符串时,创建一个标签对象- 传入参数为选择器字符串时:
$(“#id”)
,根据id
查询标签对象- 传入参数为
DOM
对象时:$(this)
,返回JQuery
对象
二、JQuery 对象和 Dom 对象
Dom 对象
- 通过
getElementById()
查询出来的标签对象- 通过
getElementsByName()
查询出来的标签对象- 通过
getElementsByTagName()
查询出来的标签对象- 通过
createElement()
方法创建的对象
JQuery 对象
- 通过
JQuery
提供的API
创建的对象- 通过
JQuery
包装的Dom
对象- 通过
JQuery
提供的API
查询到的对象JQuery
对象本质:JQuery
对象是一个Dom
对象的数组 +JQuery
的一系列功能函数的总和。
① dom 对象转化为 JQuery 对象
- 先有
dom
对象:var divObj = document.getElementById("testDiv");
- 通过核心函数转成
JQuery
对象:$( divObj );
② JQuery对象转为 dom 对象
- 先有
JQuery
对象- 通过下标取出需要的
dom
对象
三、JQuery 选择器
3.1 基本选择器
#ID
选择器:根据id
查找标签对象.class
选择器:根据class
查找标签对象element
选择器:根据标签名查找标签对象*
选择器:表示任意的,所有的元素selector1
,selector2
组合选择器:合并选择器1,选择器2的结果并返回
3.2 层级选择器
ancestor descendant
:后代选择器 ,在给定的祖先元素下匹配所有的后代元素parent > child
:子元素选择器,在给定的父元素下匹配所有的子元素prev + next
:相邻元素选择器,匹配所有紧接在prev
元素后的next
元素prev ~ sibings
:之后的兄弟元素选择器,匹配prev
元素之后的所有siblings
元素
3.3 过滤选择器
① 基本过滤器
:first
:获取第一个元素:last
:获取最后个元素:not(selector)
:去除所有与给定选择器匹配的元素:even
:匹配所有索引值为偶数的元素,从 0 开始计数:odd
:匹配所有索引值为奇数的元素,从 0 开始计数:eq(index)
:匹配一个给定索引值的元素:gt(index)
:匹配所有大于给定索引值的元素:lt(index)
:匹配所有小于给定索引值的元素:header
:匹配如h1
、h2
、h3
之类的标题元素
:animated
:匹配所有正在执行动画效果的元素
//选择没有执行动画的最后一个div
$(“#btn11”).click(function(){
$("div:not(':animated'):last").css("background", "#bbffaa");
});
② 内容过滤器
:contains(text)
:匹配包含给定文本的元素:empty
:匹配所有不包含子元素或者文本的空元素:parent
:匹配含有子元素或者文本的元素:has(selector)
:匹配含有选择器所匹配的元素的元素
③ 属性过滤器
[attribute]
:匹配包含给定属性的元素[attribute=value]
:匹配给定的属性是某个特定值的元素[attribute!=value]
:匹配所有不含有指定的属性,或者属性不等于特定值的元素[attribute^=value]
:匹配给定的属性是以某些值开始的元素[attribute$=value]
:匹配给定的属性是以某些值结尾的元素[attribute*=value]
:匹配给定的属性是以包含某些值的元素[attrSel1][attrSel2][attrSelN]
:复合属性选择器,需要同时满足多个条件时使用
案例:
// 选取含有title属性值, 且title属性值不等于test的div元素
$("#btn8").click(function() {
$(“div[title][title!=‘test’]”).css(“background”, “#bbffaa”);
});
④ 表单过滤器
: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
注意:若要获取下拉框的元素,直接用
$(“:selected”)
案例:
// 获取多选框,每个选中的value值
$("#btn4").click(function(){
$(":checkbox:checked").each(function(){
alert(this.value);
});
});
// 获取下拉框选中的内容
$("#btn5").click(function(){
$(":selected").each(function(){
//此时获取的是option
alert(this.innerHTML);
});
});
⑤ 表单对象属性过滤器
:enabled
:匹配所有可用元素:disabled
:匹配所有不可用元素:checked
:匹配所有选中的单选,复选,和下拉列表中选中的option
标签对象:selected
:匹配所有选中的option
注:
visible
:可视;hidden
:隐藏
⑥ JQuery 元素筛选
-
eq()
:获取给定索引的元素,和:eq()
功能一样
-first()
:获取第一个元素,和:first
功能一样
-last()
:获取最后一个元素,和:last
功能一样
-filter(exp)
:留下匹配的元素,进一步过滤
-is()
:判断是否匹配给定的选择器,只要有一个匹配就返回true
-has(exp)
:返回包含有匹配选择器的元素的元素,和:has()
功能一样
-not(exp)
:删除匹配选择器的元素,和:not()
功能一样
-children(exp)
:返回匹配给定选择器的子元素parent> children
-find(exp)
:返回匹配给定选择器的后代元素、祖先、后代
-next()
:返回当前元素的下一个兄弟元素prev+next
后面一个
-nextAll()
:返回当前元素后面所有的兄弟元素prev ~ siblings
后面全部
-nextUntil()
:返回当前元素到指定匹配的元素为止的后面元素
-parent()
:返回父元素
-prev(exp)
:返回当前元素的上一个兄弟元素prev+next
相反,
-prevAll()
:返回当前元素前面所有的兄弟元素prev ~ siblings
相反,前面全部
-prevUnitl(exp)
:返回当前元素到指定匹配的元素为止的前面元素nextUntil()
相反
-siblings(exp)
:返回所有兄弟元素
-add()
:把add
匹配的选择器的元素添加到当前jquery
对象中
案例:
// 在div中选择索引为偶数的
$("#btn4").click(function(){
$(“div”).filter(":even").css(“background-color”,"#bfa");
});
// 选择div中class不为one的
$("#btn7").click(function(){
$(“div”).not(".one").css(“background-color”,"#bfa");
});
// 在body中选择所有class为one的div子元素
$("#btn8").click(function(){
$(“body”).children(“div.one”).css(“background-color”,"#bfa");
});
// 在body中选择所有class为mini的div元素
$("#btn9").click(function(){
$(“body”).find(".mini").css(“background-color”,"#bfa");
});
// #one和span之间的元素
$("#btn12").click(function(){
$("#one").nextUntil(“span”).css(“background-color”,"#bfa")
});
// span向前直到#one的元素
$("#btn16").click(function(){
$(“span”).prevUntil("#one").css(“background-color”,"#bfa")
});
// 找到#two所有的div兄弟元素,包括前面的和后面的
$("#btn17").click(function(){
$("#two").siblings(“div”).css(“background-color”,"#bfa")
});
// 选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
$(“span”).add("#two").css(“background-color”,"#bfa");
});
四、JQuery 的属性操作
Jquery属性操作
html()
:跟innerHTML
一样,设置和获取起始标签和结束标签中的内容text()
:跟innerText
一样,设置和获取起始标签和结束标签中的文本val()
:跟value
属性一样,专门用来操作表单项的value
属性。(针对value
属性值)
val
方法同时设置多个表单项的选中状态示例代码:
val
方法同时设置多个表单项的选中状态示例代码:
<!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() { // val()方法来操作 // val()方法除了可以设置表单项的value属性值之外。 // 还可以批量操作表单项的选中状态 // $(":radio").val(["radio2"]);// 操作单选 // $(":checkbox").val(["checkbox3","checkbox2","checkbox1"]);//批量操作复选框被选中 // $("#multiple").val(["mul1","mul3","mul4"]);// 批量操作多选的下拉列表,多个被选中 // $("#single").val(["sin3"]);// 操作单选的下拉列表,一个被选中 $(":radio,:checkbox,#multiple,#single") .val(["checkbox3","radio2","checkbox2","mul2","mul3","sin2"]); }); </script>
</head>
<body>
单选:
<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 id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选 :
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>
attr()
:attr
可以设置和获取属性的值prop()
:prop
可以设置和获取属性的值。
prop
方法它可以忽略undefined
错误。checked
属性、selected
属性、disalbed
属性,readonly
属性,等。这些属性在dom
对象中都会有true
和false
值的情况。并且使用attr
操作有返回undefined
的情况下。使用prop
方法。prop
方法只推荐用来操作dom
属性中值是true
和false
的属性。其他的属性都使用attr
方法。attr
还有它强大的地方。它可以操作非标准的属性(自定义的属性)。
五、JQuery 练习
① 全选,全不选,反选联系
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript"> $(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; }); // 需要检查一下,是否全部的球类复选框都选中了 // 如果都选中了,设置【全选/全不选 】也选中,反之亦然 // 获取全部的球类的个数 var allCount = $(":checkbox[name='items']").length; // 获取选中的球类的个数 var checkedCount = $(":checkbox[name='items']:checked").length; if (allCount == checkedCount) { // 全选啦 $("#checkedAllBox").prop("checked",true); } else { // 还没选满 $("#checkedAllBox").prop("checked",false); } }); // 提交按钮 $("#sendBtn").click(function(){ // 选中的全部和复选框 $(":checkbox[name='items']:checked").each(function(){ alert(this.value); }); }); // 给【全选/全不选 】复选框绑定单击事件 $("#checkedAllBox").click(function(){ // 在事件的function函数中,也有一个this对象。这个this对象是当前正在响应事件的dom对象 // 1 获取【全选/全不选 】的选中状态 // alert( this.checked ); // 2 把【全选/全不选 】的选中状态。设置给全部的球类 $(":checkbox[name='items']").prop("checked",this.checked ); }); // 给每一个球类都要绑定单击事件 $(":checkbox[name='items']").click(function(){ // 在事件的function函数中,也有一个this对象。这个this对象是当前正在响应事件的dom对象 // 需要检查一下,是否全部的球类复选框都选中了 // 如果都选中了,设置【全选/全不选 】也选中,反之亦然 // 获取全部的球类的个数 var allCount = $(":checkbox[name='items']").length; // 获取选中的球类的个数 var checkedCount = $(":checkbox[name='items']:checked").length; if (allCount == checkedCount) { // 全选啦 $("#checkedAllBox").prop("checked",true); } else { // 还没选满 $("#checkedAllBox").prop("checked",false); } }) }); </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>
② 从左到右,从右到左练习
<!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(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("select:eq(0) option:selected").appendTo( $("select:eq(1)") ); }); //【全部添加到右边】单击事件 $("button:eq(1)").click(function(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("select:eq(0) option").appendTo( $("select:eq(1)") ); }); //【选中删除到左边】单击事件 $("button:eq(2)").click(function(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("select:eq(1) option:selected").appendTo( $("select:eq(0)") ); }); //【全部删除到左边】单击事件 $("button:eq(3)").click(function(){ // 先查找出左边下拉列表中哪些option被选中 // 调用appendTo() $("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>
③ 动态添加、删除表格记录(重点)
在事件的
function
函数中,有一个this
对象,这个this
对象是当前正在响应事件的dom
对象
<!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>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript"> // 页面加载完成之后 $(function(){ // 定义删除的函数,重复使用 var deleteAFun = function(){ var $trObj = $(this).parent().parent();//注意此时this是Dom对象 // find 查找后代 var name = $trObj.find("td:first").text(); // confirm是javaScript中提供的一个确认提示框函数, // 它接收的参数就是提示框的提示文本内容 // 这个确认提示框有两个按钮,一个确认,一个取消 // 用户点击确认,就返回true // 用户点击取消,就返回false if( confirm("是否需要删除【" + name + "】吗?") ){ $trObj.remove(); } // 在事件的function函数中,有一个this对象,这个this对象是当前正在响应事件的dom对象 // 删除点击所在行 // 不希望跳转怎么办? // return false 可以阻止元素的默认行为。 return false; } //提交按钮绑定单击事件 $("#addEmpButton").click(function(){ // 获取输入框中,名称,邮箱,工资 var nameText = $("#empName").val(); var emailText = $("#email").val(); var salaryText = $("#salary").val(); // 创建一个行对象 var $trObj = $("<tr>" + "<td>" + nameText + "</td>" + "<td>" + emailText + "</td>" + "<td>" + salaryText + "</td>" + "<td><a href=\"deleteEmp?id=003\">Delete</a></td>" + "</tr>");//如果不换行就不需要拼接 // 找到创建出来的a标签,再给它绑定单击事件 $trObj.find("a").click(deleteAFun); // 添加表表格中 $trObj.appendTo( $("#employeeTable") );//这个apppend方法后面可以是content也可以是$(“content”) }); // 给删除的a标签绑定单击事件 $("a").click( deleteAFun ); }); </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>
六、CSS样式操作
addClass()
:添加样式removeClass()
:删除样式toggleClass()
:有就删除,没有就添加
offset()
:设置和获取标签和坐标
$(‘#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
});
});
七、JQuery 事件操作
$(function(){})
和window.onload = function(){}
的区别?
①触发时间?
jquery
页面加载完成之后的触发时间点:jquery
的页面加载完成之后。只是等浏览器内核解析完html
标签,创建好dom
对象之后。就马上执行了。原生
js
页面加载完成之后的触发时间: 原生js
除了要等浏览器内核解析完标签,创建好dom
对象之外,还需要等页面中所有元素去准备好自己显示时需要的数据。完成之后才会执行。② 他们触发的顺序?
jquery
的页面加载完成之后先执行,js
原生的页面加载完成之后后执行。③他们执行的次数?
原生
js
只会执行最后一次的赋值函数。而
jquery
的页面加载完成之后,会把所有注册了函数都按照注册的顺序,依次全部执行。
JQuery 事件
click()
:绑定单击事件,触发单击事件mouseover()
:绑定鼠标移入事件mouseout()
:绑定鼠标移出事件bind()
:可以同时给标签绑定一个或多个事件one()
:给标签绑定只响应一次的事件live()
:live
可以给匹配了选择器的所有元素都绑定事件,哪怕这个元素是后面动态创建的unbind()
:跟bind
做相反的操作,解除绑定事件
事件的冒泡
事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。
如何阻止事件冒泡呢?在子元素事件函数体内,
return false;
可以阻止事件的冒泡传递。