一、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大一些的数值
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
