javaweb(03) jQuery学习笔记
jQuery介绍
什么是jQuery
- jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。
- jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作
- 全球前10000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库
jQuery的好处
- 极大地简化了JavaScript开发人员遍历HTML文档
- 操作DOM
- 简化执行动画
- 开发Ajax
- 链式操作
- 隐式迭代
jQuery版helloworld
使用jQuery需要导入jQuery-1.7.2.js
<!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 () {
$("#btnId").click(function () {
alert("hello,world");
})
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
jQuery核心函数
$的本质
$的本质是一个方法，我们将$()称为jQuery的核心函数
//alert($==jQuery)//true
alert($);
核心函数的四种用法
-
传入参数为 [ 函数 ] 时： 表示页面加载完成之后。相当于 window.onload = function(){}
-
传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象
-
传入参数为 [ 选择器字符串 ] 时：$(“#id 属性值”)：id 选择器，根据 id 查询标签对象
$(“标签名”)：标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”)：类型选择器，可以根据 class 属性查询标签对象
-
传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 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">
//核心函数的4个作用
//传入参数为[函数]时：在文档加载完成后执行这个函数
$(function () {
alert("hello,world");
});
//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
$(function () {
$("<li>西瓜</li>").appendTo("#ulId");
});
//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
$(function () {
$("#aid").click(function () {
alert("hi~~~");
})
});
//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
$(function () {
var ele = document.getElementById("aid2");
$(ele).click(function () {
alert("hello~~");
})
});
</script>
</head>
<body>
<ul id="ulId">
<li>香蕉</li>
</ul>
<!--#是链接到本页-->
<a id="aid" href="#">hi</a>
<a id="aid2" href="#">hello</a>
</body>
</html>
DOM对象和jQuery对象
DOM对象
使用原生的JS查找（创建）到的元素
jQuery对象
使用jQuery查找到的元素（包装了的元素）都是jQuery对象
jQuery对象的本质：一个数组，用来封装DOM对象
DOM对象和jQuery对象的互相转化
j Q u e r y 对 象 不 能 使 用 D O M 对 象 的 属 性 和 方 法 , D O M 对 象 也 不 能 使 用 j Q u e r y 对 象 的 属 性 和 方 法 jQuery 对象不能使用 DOM 对象的属性和方法,DOM 对象也不能使用 jQuery 对象的属性和方法 jQuery对象不能使用DOM对象的属性和方法,DOM对象也不能使用jQuery对象的属性和方法
- dom对象→jquery对象： $(dom对象)
- jquery对象→dom对象： jquery对象[0]
示例：
<!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(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
//使用DOM对象调用DOM方法✓
var btn01 = document.getElementById("dom2dom");
btn01.onclick = function () {
var eledom = document.getElementById("testDiv");
eledom.style.color = "red";
};
//使用DOM对象调用jQuery方法,需要进行转化
var btn02 = document.getElementById("dom2jQuery");
$(btn02).click(function () {
var eledom2 = document.getElementById("testDiv");
$(eledom2).css("color","blue");
});
//使用jQuery对象调用jQuery方法，可以
$("#jQuery2jQuery").click(function () {
$("#testDiv").css("color","yellow");
});
//使用jQuery对象调用DOM方法，不可以，需要进行转化
$("#jQuery2dom").click(function () {
$("#testDiv")[0].style.color = "green";
})
});
</script>
</head>
<body>
<div id="testDiv">Atguigu is Very Good!</div>
<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>
jQuery选择器
基本选择器
| 基本选择器 | 描述 |
|---|---|
| #ID | 根据id查找标签对象 |
| .class | 根据class查找标签对象 |
| element | 根据标签名查找对象 |
| * | 查找所有的元素 |
| selector1,selector2 | 合并选择器1，选择器2的结果并返回 |
层次选择器
| 层次选择器 | 描述 |
|---|---|
| ancestor descendant | 后代选择器：在给定的祖先元素下匹配所有的后代元素 |
| parent>child | 子元素选择器：在给定的父元素下匹配所有的子元素 |
| prev+next | 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素 |
| prev~siblings | 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素 |
过滤选择器
基本过滤选择器
| 过滤选择器 | 描述 |
|---|---|
| :first | 获取第一个元素 |
| :last | 获取最后一个元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 |
| :eq(index) | 匹配一个给定索引值的元素 |
| :gt(index) | 匹配所有大于给定索引值的元素 |
| :lt(index) | 匹配所有小于给定索引值的元素 |
| :header | 匹配如 h1, h2, h3 之类的标题元素 |
| :animated | 匹配所有正在执行动画效果的元素 |
内容过滤选择器
| 过滤选择器 | 描述 |
|---|---|
| :contains(text) | 匹配包含给定文本的元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 |
| :parent | 匹配含有子元素或者文本的元素 |
| :has(seletor) | 匹配含有选择器所匹配的元素的元素 |
子元素过滤选择器
| 过滤选择器 | 描述 |
|---|---|
| :nth-child | 第几个元素，从1开始 |
| :first-child | 第一个子元素 |
| :lase-child | 最后一个子元素 |
| :only-child | 只有一个子元素 |
可见性过滤器
不可见：display属性设置为none，或visible属性设置为hidden
| 过滤选择器 | 描述 |
|---|---|
| hidden | 选择器选取隐藏的元素 |
| visible | 选择器选取当前可见的每个元素 |
属性过滤器
| 过滤选择器 | 描述 |
|---|---|
| [attribute] | 匹配包含给定属性的元素 |
| [attribute=value] | 匹配给定的属性是某个特定值的元素 |
| [attribute!=value] | 匹配所有不含有指定的属性，或者属性不等于特定值的元素。 |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 |
| [attrSel1][attrSel2][attrSel3] | 复合属性选择器，需要同时满足多个条件时使用。 |
选择器典例请看这篇：选择器经典案例
表单过滤选择器
| 过滤选择器 | 描述 |
|---|---|
| :input | 匹配所有 input, textarea, select 和 button 元素 |
| :text | 匹配所有 文本输入框 |
| :password | 匹配所有的密码输入框 |
| :radio | 匹配所有的单选框 |
| :checkbox | 匹配所有的复选框 |
| :submit | 匹配所有提交按钮 |
| :image | 匹配所有 img 标签 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有 input type=button 按钮 |
| :file | 匹配所有 input type=file 文件上传 |
| :hidden | 匹配所有不可见元素 display:none 或 input type=hidden |
表单对象属性过滤选择器
| 过滤选择器 | 描述 |
|---|---|
| :enable | 匹配所有可用元素 |
| :disable | 匹配所有不可用元素 |
| :checked | 选择器选取所有选中的复选框或单选按钮。 |
| :selected | 选择器选取被选择的 元素 |
元素筛选方法
| 方法 | 描述 |
|---|---|
| eq() | 获取给定索引的元素 |
| first() | 获取第一个元素 |
| last() | 获取最后一个元素 |
| filter(exp) | 留下匹配的元素 |
| is(exp) | 判断是否匹配给定的选择器，只要有一个匹配就返回，true |
| has(exp) | 返回包含有匹配选择器的元素的元素 |
| not(exp) | 删除匹配选择器的元素 |
| children() | 返回匹配给定选择器的子元素 |
| find(exp) | 返回匹配给定选择器的后代元素 |
| next() | 返回当前元素的下一个兄弟元素 |
| nextAll() | 返回当前元素后面所有的兄弟元素 |
| nextUntil() | 返回当前元素到指定匹配的元素为止的后面元素 |
| parent() | 返回父元素 |
| prev(exp) | 返回当前元素的上一个兄弟元素 |
| prevAll() | 返回当前元素前面所有的兄弟元素 |
| prevUntil(exp) | 返回当前元素到指定匹配的元素为止的前面元素 |
| siblings(exp) | 返回所有兄弟元素 |
| add() | 把 add 匹配的选择器的元素添加到当前 jquery 对象中 |
| andSelf() | 返回包括自己的对象数组 |
DOM属性操作
html()、text()、val()
- html():它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。
- text():它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
- **val():它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样 **
val()设置表单项示例：
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
attr()、prop()
- attr():可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等,attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
- 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
DOM增删改
| 方法 | 描述 |
|---|---|
| append() | 父节点.append(子节点) 追加到后边 |
| appendTo() | 子节点.appendTo(父节点) 追加到后边 |
| prepend() | 父节点.prepend(子节点) 追加到前边 |
| prependTo() | 子节点.prependTo(父节点) 追加到前边 |
| before() | a.before(b) a之前插入b |
| insertBefore() | a.insertBefore(b) b之前插入a |
| after() | a.after(b) a之后插入b |
| insertAfter() | a.insertAfter(b) b之后插入a |
| replaceWith() | a.replaceWith(b) 把a用b替换 |
| replaceAll() | a.replaceAll(b) 用 a 替换掉所有 b |
| remove() | a.remove(b) 删除a节点 a.remove(selector)把符合selector的a删除 |
| empty() | a.empty() 清空 a节点里的内容 |
CSS样式操作
| 方法 | 描述 |
|---|---|
| addClass() | 添加样式 |
| removeClass() | 删除样式 |
| toggleClass() | 有就删除，没有就添加 |
| offset() | 获取和设置元素的下标 |
jQuery事件操作
文档加载
window.onload()=function(){}和$(function(){})的区别？
- $(function(){})是在dom对象加载完毕之后执行的
- window.onload()=function(){}是在整个文档加载完毕后执行
- $(function(){})比window.onload()=function(){}更快执行，且$(function(){})可以有多个，而window.onload()=function(){}只能有一个
事件的绑定与移除
| 方法 | 描述 |
|---|---|
| click() | 它可以绑定单击事件，以及触发单击事件 |
| mouseover() | 鼠标移入事件 |
| mouseout() | 鼠标移出事件 |
| bind() | 可以给元素一次性绑定一个或多个事件 |
| one() | 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。 |
| unbind() | 跟 bind 方法相反的操作，解除事件的绑定 |
| live() | 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 |
事件冒泡
冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发。解决办法：子元素中return false
示例：
//给span绑定一个单击响应函数
$("span").click(function(){
alert("我是span的单击响应函数");
return false;
});
//给id为content的div绑定一个单击响应函数
$("#content").click(function(){
alert("我是div的单击响应函数");
return false;
});
//给body绑定一个单击响应函数
$("body").click(function(){
//alert("我是body的单击响应函数");
});
html代码：
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com" onclick="return false;">WWW.HAO123.COM</a>
</body>
事件对象
事件对象，是封装有触发的事件信息的一个 javascript 对象。
如何获取事件对象属性？
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。
1.原生 javascript 获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
2.jQuery 代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});