jQuery
体验传统JavaScript写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript动态展示</title>
<style>
div{
height: 200px;
margin-bottom: 10px;
background: pink;
display: none; /* 不显示，进行隐藏 */
}
</style>
</head>
<body>
<input type="button" value="显示div" id="but1">
<input type="button" value="显示内容" id="but2">
<div></div>
<div></div>
<div></div>
</body>
</html>
// 等待页面加载完执行JavaScript代码
window.onload = function () {
var but1 = document.getElementById("but1"); // 获取id为but1的元素
var but2 = document.getElementById("but2");
var divs = document.getElementsByTagName("div");
but1.onclick = function () {
for (var i=0;i<divs.length;i++){
divs[i].style.display = "block";
}
};
but2.onclick = function () {
for (var i=0;i<divs.length;i++){
divs[i].innerText = "我是内容";
}
}
}
JavaScript中的缺点：
- 查找元素的方法很少，麻烦
- 遍历伪数组比较繁杂， 嵌套一大堆for循环
- 有兼容性问题，实现动画效果很复杂
- 代码冗余
什么是jQuery
jQuery的写法
$(document).ready(function () {
// 注册事件
$("#btn1").click(function () {
// 隐式迭代： jQuery自动的遍历
$("div").show(1000);
});
$("#btn2").click(function () {
$("div").text("我是内容")
})
})
jQuery是一个JavaScript的函数库
jQuery是一个轻量级的JavaScript库
jQuery的功能：
- HTML元素选择
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
除此之外，还提供了大量的插件
jQuery的版本
- 官方下载地址： http://jquery.com/download/
版本分类
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
压缩版和未压缩版
jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。
jQuery的入口函数
使用jQuery的三个步骤
- 引入jQuery函数
- 入口函数
- 功能实现
入口函数的书写
// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$(function() {
});
jQuery入口函数和js入口函数对比
- JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
- jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
jQuery对象和DOM对象的区别(重点)
- DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
- jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
- jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
- DOM对象与jQuery对象的方法不能混用。
DOM对象转为jQuery对象
联想记忆 美刀
var $obj = $(domObj);
// $(document).ready(function() {}); 就是典型的DOM对象转为jQuery对象
jQuery对象转为DOM对象
var $div = $("div");
// 第一种方法， 推荐使用
$div[0];
// 第二种写法
$div.get(0) // 类似py中的字典取值
$符号的含义
$其实就是一个函数，以后用$的时候，记得跟小括号 $();
参数不同，功能就不同3种用法
- 参数是一个function, 入口函数
$(function () {
});
console.log(typeof $);
- $(domobj) 把dom对象转换成jquery对象
$(document).ready(function () {
});
- 参数是一个字符串,用来找对象
$("div"); $("div ul"); $(".current")
选择器
什么是jQuery的选择器
jQuery选择器是为我们提供的一组方法，让我们更加方便获取页面元素
注意：jQuery选择器返回的是一个jQuery对象
基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
总结：跟css的选择器用法一模一样。
层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
跟CSS的选择器一模一样。
过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为偶数的元素 |
筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲 |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
| next() | $(“li”).next() | 找下一个兄弟 |
| prev() | $(“li”).prev() | 找上一次兄弟 |