一、jQuery介绍
- 什么是jQuery?
jQuery 是 javascript 和 query,用于辅助 javascript 开发的 js 类库。
- jQuery的核心思想
它的核心思想是 write less, do more,所有它实现了很多浏览器的兼容问题。
二、Hello jQuery
- 知识点:
1.jQuery对象默认在变量命名时,以 $ 符号开头
2.$(function () {}; // 表示页面加载完成后,相当于 window.onload = function() {}
3.$("#标签id属性值"); // 表示按id查询标签对象
4.jQuery中的单击事件:.click
需求:使用 jQuery 给一个按钮绑定单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Hello jQuery</title>
<!-- 导入jQuery库-->
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
// jQuery绑定单击事件
$(function () {
var $btn01Obj = $("#btn01")
$btn01Obj.click(function () {
alert("Hello jQuery")
})
})
</script>
</head>
<body>
<button id="btn01">say hello</button>
</body>
</html>
三、jQuery核心函数
- $ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。$() 就是调用 $ 这个函数
1.传入参数为 [函数] 时:
表示页面加载完成后,相当于 window.onload = function() {}
2.传入参数为 [HTML字符串] 时:
会帮助创建这个 HTML 标签对象,通过 .appendTo("标签名") ,将创建的标签对象添加指定的父节点下
3.传入参数为 [选择器字符串] 时:
$("#标签id属性值"),id选择器,根据 id 查询标签对象
$("标签名"),标签名选择器,根据标签名查询标签对象
$(".class属性值"),类型选择器,根据 class属性值 查询标签对象
......
4.传入参数为 [DOM对象] 时:
会将 DOM对象 转换为 jQuery对象
DOM对象:
jQuery对象:
- 核心函数演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-核心函数</title>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 表示页面加载完成后,执行$(function () {})
$(function () {
// $()函数中传入HTML字符串,表示创建这些HTML字符串
$("<button>按钮1</button>\n" +
"<button id=\"btn02\">按钮2</button>\n" +
"<button class=\"btn03\">按钮3</button>").appendTo("body")
// 通过给$()传递选择器字符串参数,控制三个按钮的点击事件
$("button").click(function () {
alert("标签名查询标签对象")
})
$("#btn02").click(function () {
alert("id属性值查询标签对象")
})
$(".btn03").click(function () {
alert("class属性值查询标签对象")
})
// 将DOM对象转换为jQuery对象
var Obj = window.document.getElementsByTagName("button")
alert(Obj)
alert($(Obj))
})
</script>
</head>
<body>
</body>
</html>
四、jQuery对象和DOM对象的区分
1. 什么是jQuery对象,什么是DOM对象
- DOM对象:
通过 getElementById 查询出来的标签对象
通过 getElementsByName 查询出来的标签对象
通过 getElementsByTagName 查询出来的标签对象
通过 createElement 创建的标签对象
- jQuery对象:
通过 jQuery 提供的 API 创建的对象
通过 jQuery 包装的 DOM 对象
通过 jQuery 提供的 API 查询到的对象
2. jQuery对象的本质
DOM 对象的数组 + jQuery 提供的一系列功能函数构成了 jQuery 对象
3. jQuery对象和DOM对象在使用上的区别
jQuery 对象和 DOM 对象的属性和方法不能互相使用
4. jQuery对象和DOM对象的相互转换
- DOM 对象转换为 jQuery对象
1.先有 DOM 对象
2.$(DOM 对象),就完成了转换
- jQuery 对象转换为 DOM 对象
1.先有 jQuery 对象
2.jQuery 对象[下标],取出相应的 DOM 对象
五、选择器
1. 基础选择器
- #ID 选择器:根据 id 查找标签对象
- .class 选择器:根据 class 查找标签对象
- element 选择器:根据标签名查找标签对象
- * 选择器:表示任意的,所有的元素
- selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回
2. 层级选择器
- ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素
- parent > child 子元素选择器:在给定的父元素下匹配所有的子元素
- prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素
- prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素
3. 基本过滤选择器
- :first :获取第一个元素
- :last :获取最后个元素
- :not(selector) :去除所有与给定选择器匹配的元素
- :even :匹配所有索引值为偶数的元素,从 0 开始计数
- :odd :匹配所有索引值为奇数的元素,从 0 开始计数
- :eq(index) :匹配一个给定索引值的元素
- :gt(index) :匹配所有大于给定索引值的元素
- :lt(index) :匹配所有小于给定索引值的元素
- :header :匹配如 h1, h2, h3 之类的标题元素
- :animated :匹配所有正在执行动画效果的元素
4. 内容过滤选择器
- :contains(text) :匹配包含给定文本的元素
- :empty :匹配所有不包含子元素或者文本的空元素
- :parent :匹配含有子元素或者文本的元素
- :has(selector) :匹配含有选择器所匹配的元素的元素
5. 属性过滤选择器
- [attribute] :匹配包含给定属性的元素。
- [attribute=value] :匹配给定的属性是某个特定值的元素
- [attribute!=value] :匹配所有不含有指定的属性,或者属性不等于特定值的元素。
- [attribute^=value] :匹配给定的属性是以某些值开始的元素
- [attribute$=value] :匹配给定的属性是以某些值结尾的元素
- [attribute*=value] :匹配给定的属性是以包含某些值的元素
- [attrSel1][attrSel2][attrSelN] :复合属性选择器,需要同时满足多个条件时使用。
6. 表单过滤选择器
- :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
六、jQuery元素筛选
- eq() :获取给定索引的元素
- first() :获取第一个元素
- last() :获取最后一个元素
- filter(exp) :留下匹配的元素
- is(exp) :判断是否匹配给定的选择器,只要有一个匹配就返回,true
- has(exp) :返回包含有匹配选择器的元素的元素
- not(exp) :删除匹配选择器的元素
- children(exp) :返回匹配给定选择器的子元素
- find(exp) :返回匹配给定选择器的后代元素
- next() :返回当前元素的下一个兄弟元素
- nextAll() :返回当前元素后面所有的兄弟元素
- nextUntil() :返回当前元素到指定匹配的元素为止的后面元素
- parent() :返回父元素
- prev(exp) :返回当前元素的上一个兄弟元素
- prevAll() :返回当前元素前面所有的兄弟元素
- prevUnit(exp) :返回当前元素到指定匹配的元素为止的前面元素
- siblings(exp) :返回所有兄弟元素
- add() :把 add 匹配的选择器的元素添加到当前 jquery 对象中
七、jQuery的属性操作
- html():设置和获取起始标签和结束标签中的内容
- text():设置和获取起始标签和结束标签中的文本
- val():设置和获取表单项的value属性值,
- val([value1,...]) :还可以通过在中括号传入表单项的 value 属性值设置单选、复选、下拉框的选中状态
- attr():可以设置和获取属性值,不推荐操作 checked、readOnly、selected、disabled等;attr() 还可以用来操作非标准的属性
- prop():可以设置和获取属性值,只推荐操作 checked、readOnly、selected、disabled等
练习一:熟练使用html()、text()、val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// 获取id为d1标签的内容
alert($("#d1").html())
// 获取id为d1标签的文本
alert($("#d1").text())
// 设置id为t1的表单的value值为super
$("input[id='t1']").val("super")
// 设置id为btn1的按钮点击事件:点击按钮获取id为t1的表单项的value值
$("#btn1").click(function () {
alert($("#t1").val())
})
// 获取value为test2的表单项的value值
alert($("input[value='test2']").val())
// 设置单选框选中value为test2的项
$(":radio").val(["test2"])
// 设置复选框选中value为test1和test2的项
$(":checkbox").val(["test1","test2"])
// 设置可多选下拉框选中value为op1和op2的项
$("#s1").val(["op1","op2"])
// 设置单选下拉框选中value为op2的项
$("#s2").val(["op2"])
})
</script>
</head>
<body>
<div id="d1"><span>span1</span>div1</div>
文本框:<input type="text" id="t1"> <button id="btn1">获取</button> <br/>
单选框:<input type="radio" name="test" value="test1">test1 <input type="radio" name="test" value="test2">test2<br/>
复选框:<input type="checkbox" value="test1">test1 <input type="checkbox" value="test2">test2 <input type="checkbox" value="test3">test3<br/>
下拉框1:
<select id="s1" multiple="multiple">
<option value="op1">test1</option>
<option value="op2">test2</option>
<option value="op3">test3</option>
<option value="op4">test4</option>
</select>
下拉框2:
<select id="s2">
<option value="op1">test1</option>
<option value="op2">test2</option>
<option value="op3">test3</option>
<option value="op4">test4</option>
</select>
</body>
</html>
练习二:使用attr()和prop()对不同的属性进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// 设置最后一个复选框的value为test4
$(":checkbox:last").attr("value","test4")
// 获取最后一个复选框的value值
alert($(":checkbox:last").attr("value"))
// 设置第一个复选框为不选中,获取第一个复选框的选中状态
$(":checkbox:first").prop("checked",false)
alert($(":checkbox:first").prop("checked"))
})
</script>
</head>
<body>
复选框:<input type="checkbox" checked="checked" value="test1">test1 <input type="checkbox" value="test2">test2 <input type="checkbox" value="test3">test3<br/>
</body>
</html>
练习三:表单内容全选、全不选、反选、提交操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jQuery库/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 () {
for (var i=0; i<$(":checkbox[name]").length; i++) {
$(":checkbox[name]")[i].checked = !$(":checkbox[name]")[i].checked
}
// 在遍历完结束,要判断反选后,多选框是否全选中或者全不选中
// 方法一
/*var allcount = $(":checkbox[name]").length
var checkcount = $(":checkbox[name]:checked").length
if (allcount == checkcount) {
$("#checkedAllBox").prop("checked",true)
}else {
$("#checkedAllBox").prop("checked",false)
}*/
// 方法二
if ($(":checkbox[name]")[0].checked &&$(":checkbox[name]")[1].checked&&$(":checkbox[name]")[2].checked&&$(":checkbox[name]")[3].checked) {
$("#checkedAllBox").prop("checked",true)
} else {
$("#checkedAllBox").prop("checked",false)
}
})
// 全选/全不选按钮
$("#checkedAllBox").click(function () {
if ($("#checkedAllBox").prop("checked")) {
$(":checkbox").prop("checked", true)
} else {
$(":checkbox").prop("checked", false)
}
})
// 提交
$("#sendBtn").click(function () {
var str = ""
$(":checkbox[name]:checked").each(function () {
str += "[" + this.value + "]"
})
alert(str)
})
})
</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>
八、DOM的增删改
- appendTo():a.appendTo(b),将a插入到b所有子元素的后面,成为最后一个子元素
- prependTo():a.prependTo(b),将a插入到b所有子元素的前面,成为第一个子元素
- insertAfter():a.insertAfter(b),得到ba
- insertBefore():a.insertBefore(b),得到ab
- replayWith():a.replaceWith(b),将所有的a替换成一个b,替换位置是最后一个a的位置
- replayAll():a.replaceAll(b),将每个b都替换成a
- remove():a.remove(),移除a标签
- empty():a.empty(),清空a标签里的内容
练习一:将左边可多选下拉列表中的选项,增加至右边可多选下拉列表;将右边可多选下拉列表的选项,删除至左边
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-练习1</title>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*练习一:将左边可多选下拉列表中的选项,增加至右边可多选下拉列表;
将右边可多选下拉列表的选项,删除至左边*/
$(function () {
$("#btn1").click(function () {
$("select:first option:selected").appendTo($("select:last"))
})
$("#btn2").click(function () {
$("select:first option").appendTo($("select:last"))
})
$("#btn3").click(function () {
$("select:last option:selected").appendTo($("select:first"))
})
$("#btn4").click(function () {
$("select:last option").appendTo($("select:first"))
})
})
</script>
</head>
<body>
<select multiple="multiple" style="width: 109.33px; height: 150px">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
</select>
<select multiple="multiple" style="width: 109.33px; height: 150px">
</select><br/><br/>
<button id="btn1">选中增加至右边</button>
<button id="btn3">选中增加至左边</button><br/>
<button id="btn2">全部增加至右边</button>
<button id="btn4">全部增加至左边</button><br/>
</body>
</html>
练习二:动态的添加、删除表格记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-练习2</title>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("input[type='submit']").click(function () {
// 获取新增的员工信息
var name = $("#name").val()
var email = $("#email").val()
var salary = $("#salary").val()
// 将新增的员工信息整个为一个行对象
var trObj = $("<tr>" +
"<td>"+name+"</td>" +
"<td>"+email+"</td>" +
"<td>"+salary+"</td>" +
"<td><button>delete</button></td>" +
"</tr>")
// 将员工信息列表增加到table1中子元素的最后
trObj.appendTo("#table1")
// 给新增的行中的删除按钮绑定点击事件
trObj.find("button").click(Delete)
})
// 给列表中原有的员工信息列表中的删除按钮绑定点击事件
$("button").click(Delete)
// 将删除按钮绑定的点击事件整合成一个函数
function Delete() {
// this表示当前正在执行的事件的DOM对象
var trObj = $(this).parent().parent()
var trFirstObj = trObj.find("td:eq(0)").text()
if (confirm("确定要删除" + trFirstObj + "的信息吗?")) {
trObj.remove()
}
}
})
</script>
<style type="text/css">
table {
margin: auto;
border: black 1px solid;
border-collapse: collapse;
}
#table1 {
text-align: center;
}
#table1 th {
border: black 1px solid;
}
#table1 td {
border: black 1px solid;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<th width="100px">name</th>
<th width="200px">email</th>
<th width="100px">salary</th>
<th width="100px">delete</th>
</tr>
<tr>
<td>zhangsan</td>
<td>zhangsan@163.com</td>
<td>10000</td>
<td><button>delete</button></td>
</tr>
<tr>
<td>lisi</td>
<td>lisi@163.com</td>
<td>10000</td>
<td><button>delete</button></td>
</tr>
</table><br/>
<table id="table2" width="300px">
<tr><th colspan="2" id="title">添加新员工</th></tr>
<tr>
<th>name:</th>
<td><input type="text" id="name"></td>
</tr>
<tr>
<th>email:</th>
<td><input type="text" id="email"></td>
</tr>
<tr>
<th>salary:</th>
<td><input type="text" id="salary"></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="submit"></th>
</tr>
</table>
</body>
</html>
九、Css样式操作
- addClass():添加样式
- removeClass():删除样式
- toggleClass():有就删除样式,没有就添加样式
- offset():获取和设置元素的坐标
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-增加删除样式和获取样式坐标</title>
<style type="text/css">
div.red {
background-color: red;
}
div.blueborder {
border: blue 1px solid;
}
div.blackborder {
border: black 1px solid;
}
</style>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
// 向被选元素添加一个或多个样式
$("div:first").addClass("red blueborder")
})
$("#btn2").click(function () {
// 删除被选元素的一个或者多个类
$("div:first").removeClass()
})
$("#btn3").click(function () {
// 对被选元素进行添加/删除切换操作
$("div:first").toggleClass("blackborder")
})
$("#btn4").click(function () {
// 返回或者设置第一个元素相对于页面的位置
var position = $("div:first").offset();
console.log(position)
$("div:first").offset({
top: 100,
left: 20
})
})
})
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center" width="100px" height="100px">
<div class="border">演示</div>
</td>
<td width="100px" height="100px">
<div class="btn">
<input type="button" value="addClass()" id="btn1">
<input type="button" value="removeClass()" id="btn2">
<input type="button" value="toggleClass()" id="btn3">
<input type="button" value="offset()" id="btn4">
</div>
</td>
</tr>
</table>
</body>
</html>
十、jQuery动画
基本动画
- show():将隐藏的元素显示
- hide():将可见的元素隐藏
- toggle():可见就隐藏,不可见就显示
以上动画方法都可以添加参数
1.第一个参数是动画执行的时长,以毫秒为单位
2.第二个参数是函数的回调函数(动画完成后自动调用的函数)
淡入淡出动画
- fadeIn():淡入,慢慢可见
- fadeOut():淡出,慢慢消失
- fadeTo():在指定的时长内将指定的透明度(0不可见-1可见)修改到指定的值,可传第三个回调函数参数
- fadeToggle():淡入淡出切换
除fadeTo()外,以上动画方法都可以添加参数
1.第一个参数是动画执行的时长,以毫秒为单位
2.第二个参数是函数的回调函数(动画完成后自动调用的函数)
练习1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-基本动画和淡入淡出动画</title>
<style type="text/css">
#div1 {
width: 300px;
height: 200px;
background-color: dodgerblue;
float: left;
}
table {
float: left;
}
</style>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("#div1").show(1000,function () {
alert("show()完成")
})
})
$("#btn2").click(function () {
$("#div1").hide(1000,function () {
alert("hide()完成")
})
})
$("#btn3").click(function () {
$("#div1").toggle(1000,function () {
alert("toggle()切换")
})
})
$("#btn4").click(function () {
$("#div1").fadeIn(1000,function () {
alert("fadeIn()完成")
})
})
$("#btn5").click(function () {
$("#div1").fadeOut(1000,function () {
alert("fadeOut()完成")
})
})
$("#btn6").click(function () {
$("#div1").fadeTo(1000,0.5,function () {
alert("fadeTo()完成")
})
})
$("#btn7").click(function () {
$("#div1").fadeToggle(1000,function () {
alert("fageToggle()完成")
})
})
// function f1() {
// $("#div1").toggle(1000,f1)
// }
})
</script>
</head>
<body>
<table>
<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">
jQuery动画定义了很多种动画效果,可很方便的使用这些动画效果
</div>
</body>
</html>
练习2:品牌展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-Css动画练习</title>
<style type="text/css">
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: none;
}
ul {
display: table;
text-align: center;
margin: 50px auto 20px;
width: 60%;
list-style: none;
}
li {
width: 33.3%;
float: left;
}
.showmore {
text-align: center;
}
.showmore a {
border: lightgrey 1px solid;
padding: 5px 10px;
}
span {
padding-left: 15px;
background: url("img/down.gif") no-repeat 0 0;
}
span.showless {
padding-left: 15px;
background: url("img/up.gif") no-repeat 0 0;
}
</style>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// 初始状态
$("li:gt(5)").hide()
$("li:eq(13)").show()
// 给按钮绑定单击事件
$("span").click(function () {
// 让某些品牌 显示/隐藏切换
$("li:gt(5)").toggle()
$("li:eq(13)").show()
$("span").toggleClass("showless")
// 通过判断列表是否有隐藏,来改变按钮文本上的值
if($("li:gt(5)").is(":hidden")) {
$("span").html("显示全部品牌")
// 在显示精简品牌时,品牌无高亮
$("a:contains('索尼')").attr("style","color: #04D")
} else {
$("span").html("显示精简品牌")
// 在显示全部品牌时,给部分品牌加上高亮
$("a:contains('索尼')").attr("style","color: #F50")
}
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>
知识点:
- is():根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
- confirm():用于显示一个带有指定消息和 OK 及取消按钮的对话框,并返回相对应的布尔值
- return false():返回false,阻止页面向指定地址跳转
十一、jQuery事件操作
11.1 $( function(){} );和window.οnlοad=function(){}的区别
触发的时间:
- jQuery的页面加载事件,在浏览器解析完页面的标签、创建好DOM对象之后就会立马执行
- 原生js的页面加载事件,在浏览器解析完页面的标签、创建好DOM对象之后,还要等标签显示时内容加载完成后才会执行
触发的顺序:
- 先执行jQuery的页面加载事件
- 后执行原生js的页面加载事件
执行的次数:
- jQuery的页面加载事件,全部把注册的function()函数依次顺序执行
- 原生js的页面加载事件,只会执行最后一次的赋值函数
11.2 jQuery中其它事件处理方法
- click():绑定单击事件,以及触发单击事件
- mouseover():鼠标移入事件
- mouseout():鼠标移除事件
- bind():可以给元素绑定一个或者多个事件
- one():使用上和bind()一样,但是one()绑定的事件只会响应一次
- live():用来绑定选择器匹配的所有元素的事件,哪怕这个元素是动态创建出来的
- unbind():解除事件的绑定,跟bind()相反
11.3 事件的冒泡
- 什么是事件的冒泡?事件的冒泡是指,父子元素同时监听同一个事件
- 怎么阻止时间的冒泡?在子元素函数体内,添加return false可以阻止时间的冒泡
11.4 事件对象
- 什么是事件对象?事件对象是,封装有触发的事件信息的一个事件t对象(每次触发事件时,就会有一个事件对象,用来记录这个事件触发时的所有相关信息)
- 如何获取事件对象?在绑定事件时,在事件的function(event)参数列表传递一个参数,这个参数通常命名为event,这个event就是事件对象
- 原生js获取事件对象
演示:
// 1.原生js绑定事件,获取事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event)
}
}
- jquery获取事件对象
演示:
// 2.jQuery绑定事件,获取事件对象
$(function () {
$("#showMsg").click(function (event) {
console.log(event)
})
})
- 使用bind()绑定用同一个函数多个事件,怎么获取当前操作是什么事件
演示:在事件的function(event)参数列表传递一个参数event,通过event.type去判断事件的类型,再去执行不同的操作
// 3.使用bind()绑定用同一个函数多个事件,怎么获取当前操作是什么事件
/*在事件的function(event)参数列表传递一个参数event,
通过event.type去判断事件的类型,
再去执行不同的操作*/
$(function () {
$("#showMsg").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入事件")
}
if (event.type == "mouseout") {
console.log("鼠标移出事件")
}
})
})
11.5 练习:图片跟随
- 相关代码:绑定鼠标跟随事件mousemove()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-图片跟随练习</title>
<script type="text/javascript" src="../jQuery库/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
/*
* 思路:
* 1.鼠标移入,大的图片显示
* 2.鼠标移出,大的图片消失
* 3.鼠标在小图片上移动时,图片跟随
*/
// 绑定鼠标移入事件,show()显示大的图片
$("img:first").mouseover(function () {
$("img:last").show()
})
// 绑定鼠标移出事件,hide()显示大的图片
$("img:first").mouseout(function () {
$("img:last").hide()
})
// 绑定鼠标跟随事件mousemove()
$("img:first").mousemove(function (event) {
// 鼠标移动时,是移入图片内的,所以显示大的图片
/* 设置大的图片显示的位置,方法:给函数传递事件对象
传递offset({top,left})事件对象的pageX、pageY参数,即小图片的x、y坐标,
实现在鼠标停留的位置显示大图片
*/
/* 注意:会出现大图片闪烁问题,原因:鼠标移动时,会移入大图片上,这时大图片会消失
解决方法:设置大图片显示位置时,不设置为小图片的x,y,而是设置为比x、y大一些的数值
*/
$("img:last").offset({
left: event.pageX + 20,
top:event.pageY + 20,
})
})
})
</script>
</head>
<body style="text-align: center">
<img src="small.jpg" style="margin: 150px">
<img src="big.jpg" style="display: none;position: absolute">
</body>
</html>
- 设置大的图片显示的位置的方法:
给函数传递事件对象,传递offset({top,left})事件对象的pageX、pageY参数,即小图片的x、y坐标, 实现在鼠标停留的位置显示大图片
- 注意:上述方法设置大图片显示位置,会出现大图片闪烁问题
原因:鼠标移动时,鼠标会移入大图片上,由于鼠标已经移出小图片,这时大图片会消失
解决方法:设置大图片显示位置时,不设置为小图片的x,y(通过事件对象的.pageX、.pageY获取)即鼠标停留的位置,而是设置为比x、y大一些的数值