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("鼠标移出");
}
});