学习目标:
- 理解jQuery的相关概念
- 学会如何使用jQuery
- 熟练使用jQuery的选择器
- 掌握DOM的相关操作
学习内容:
一、jQuery基础
1、概念:一个JavaScript框架,简化JS开发
- 继prototype之后的一个优秀的JS框架
- JavaScript框架:本质上就是JavaScript文件
2、快速入门
- 下载JQuery
- 目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
功能不再新增。因此一般项目来说,使用1.x版本就可以了,
最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日) - jquery-xxx.js 与 jquery-xxx.min.js 区别:
- jquery-xxx.js:开发版本,程序员用,有良好的缩进和注释,体积更大
- jquery-xxx.min.js:生产版本,程序中使用,没有缩进与注释,体积更小
- 导入jQuery的js文件:.min文件
- 使用
3、jQuery对象和JS对象区别与转换
- jq->js:jq对象[索引] 或者 jq.get(索引)
- js->jq:$(js对象)
4、选择器
- 基本语法学习
- 绑定事件
- 入口函数
- window.onload只能定义一次
- $(function(){})可以定义多次
- 样式控制
- $().css(“background-color”,“red”)
- $().css(“backgroundColor”,“red”)
- 分类
- 基本选择器
- 标签(元素)选择器:标签名
- id选择器:#类名
- 类选择器:.类名
- 并集选择器:以逗号隔开
- 层级选择器
- 属性选择器
- 属性名称选择器:$(“A[属性名]”)
- 属性选择器:$(“A[属性名=‘值’]”)
- 不等于:!=
- 以什么开头:^=
- 以什么结尾:$=
- 包含什么:*=
- 复合属性选择器:$(“A[属性名][属性名=‘值’]…”)
- 过滤选择器
- 首元素选择器:$(“A:first”)
- 尾元素选择器:$(“A:last”)
- 非元素选择器:$(“A:not(.one)”) class不是one
- 偶数选择器:$(“A:even”)
- 奇数选择器:$(“A:odd”)
- 大于索引选择器:$(“A:gt()”)
- 等于索引选择器:$(“A:eq()”)
- 小于索引选择器:$(“A:lt()”)
- 标题选择器(h1-h6):$(":header")
- 表单过滤选择器
- 可用元素选择器:$(“A:enabled”)
- 不可用元素选择器:$(“A:disabled”)
- 选中选择器:$(“A:checked”)
- 选中选择器:$(“A:selected”)
5、DOM操作
- 内容操作
- html():获取/设置元素的标签体内容
- text():获取/设置元素的标签体纯文本内容
- val():获取/设置元素的value属性值
- 属性操作
- 通用属性操作
- attr():获取/设置元素的属性
- removeAttr():删除属性
- prop():获取/设置元素的属性
- removeProp():删除属性
- attr与prop区别
- 操作的是元素固有属性,建议使用prop
- 操作的是元素自定义属性,建议使用attr
- class属性操作
- addClass():添加class属性值
- removeClass():删除class属性值
- toggleClass():切换class,如果元素class属性存在传递的值删除,不存在添加
- css()
- CRUD操作
- append():父元素将子元素追加到末尾
- prepend():父元素将子元素追加到开头
- appendTo():父元素追加到子元素末尾
- prependTo():父元素追加到子元素开头
- after():添加元素到元素后面
- before():添加元素到元素前面
- innsertAfter():添加元素到元素前面
- insertBefore():添加元素到元素后面
- remove():移除元素
- empty():清空元素的所有后代元素
6、案例
- 隔行换色
- 需求:将数据行的奇数行背景色设置为pink,偶数行背景色设置为yellow
- 分析:
- 获取数据行的奇数行的tr,设置背景色为pink
- 获取数据行的偶数行的tr,设置背景色为yellow
- 全选全不选
- 需求:保证第一个复选框的选中状态和下面的选中状态一致
- qq表情选择
- 下拉列表选中条目左右移动
学习产出:
1、 自定义JS框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义JS框架</title>
<script src="js/test.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script>
var element1 = document.getElementById("div1");
var element2 = document.getElementById("div2");
alert(element1.innerHTML);
alert(element2.innerHTML);
</script>
</body>
</html>
2、快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script>
var div1 = $("#div1");
alert(div1.html());
var div2 = $("#div2");
alert(div2.html());
</script>
</body>
</html>
3、 JQuery与JS对象转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery与JS对象转换</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script>
var $divs = $("div");
alert($divs.length);
$divs.html("aaa");
$divs[0].innerHTML = "bbb";
$divs.get(1).innerHTML = "ccc";
var divs = document.getElementsByTagName("div");
alert(divs.length);
for (var i = 0;i < divs.length; i++) {
divs[i].innerHTML = "aaa";
}
$(divs).html("ddd");
</script>
</body>
</html>
4、 事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#b1").click(function () {
alert("abc");
});
})
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<input type="button" value="点我" id="b1">
<script>
$("#b1").click(function () {
alert("abc");
});
</script>
</body>
</html>