1. 概述
jQuery就是一个JavaScript库
1.1 优点
1.2 引入jQuery
- 进入jQuery官网
- 点击DownLoad，选择其中一个，复制粘贴到新的JS文件
- 在需要使用的html文件中引入该js文件即可
至此jQuery引入已经完成，接下来便是对jQuery的使用了
1.3 顶级对象$
$(function() {
})
// 等同于
jQuery(function() {
})
1.4 DOM和jQuery对象
// 1.DOM对象：用原生js获取过来的对象就是DOM对象
var div = document.querySelector('div') // DOM对象
// 2.jQuery对象：用jQuery方式获取，利用$对DOM元素包装
$('div') // jQuery对象
// 3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法
两者之间的相互转换：
// DOM --> jQuery
var div = document.querySelector('div')
$(div)
// jQuery --> DOM
$('div')[index值]
$('div').get(index值)
1.5 页面预加载
// 不推荐
$(document).ready(function() {
})
// 推荐
$(function() {
})
1.6 链式编程
$(".image div").eq(index).show().siblings("div").hide()
1.7 多库共存
如果有其他函数$与jQuery中的$冲突
// 1. 使用jQuery替换$
jQuery("div")
// 2. 自定义标识符
var ll = jQuery.noConflict()
ll("div")
1.8 基本使用
隐藏元素
$(".nav").hide()
显示元素
$(".nav").show()
修改样式
$(".nav").css("display", "none")
绑定事件
$(".nav").click(function() {})
$(".nav").mouseover(function() {})
...
获取索引号
var index = $(".nav").index()
停止上一次动画
$(".nav").stop().slideUp(200)
拷贝对象extend
浅拷贝会覆盖目标对象的数据，深拷贝会合并，如有冲突属性则会覆盖
2. 选择器
$(“选择器”) 其中选择器直接写CSS选择器即可
2.1 基础选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 获取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
2.2 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”) | 使用>，获取亲儿子层级元素 |
| 后代选择器 | $(“ul li”) | 获取所有后代 |
2.3 筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $(“li:odd”) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”) | 获取到的li元素中，选择索引号为偶数的元素 |
$("ul li:first").css("background-color", "skyblue")
$("ul li:last").css("background-color", "pink")
$("ul li:eq(1)").css("background-color", "green")
$("ul li:odd").css("color", "red")
$("ul li:even").css("color", "blue")
2.4 隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫作隐式迭代
给匹配到的所有元素进行循环遍历，执行相应的方法，不用再进行循环，从而简化操作
$("ul li").css("background-color", "skyblue")
2.5 筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
parent() | $("li").parent() | 查找父级 |
parents() | $("li").parents() | 查找所有的父级 |
children(selector) | $("ul").children("li") | 相当于$("ul>li")，最近一级 |
find(selector) | $("ul").find("li") | 相当于$("ul li") |
siblings(selector) | $(".first").siblings("li") | 查找兄弟结点，不包括自己本身 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevAll([expr]) | $(".last").prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $("div").hasClass("类名") | 检查当前元素是否含有某个特定的类，如果有返回true |
eq(index) | $("li").eq(2) | 相当于$(li:eq(2))，index从0开始 |
3. 操作样式
3.1 css方法
// 获取css样式值
$(".nav").css("width")
// 修改样式值
$(".nav").css("width", 300)
$(".nav").css("width", "300px")
// 修改多个样式值
$(this).siblings("li").css({
backgroundColor: "white",
color: "black"
})
3.2 设置类样式（常用）
// 添加类（不需要加.）
$(this).addClass("current")
// 移除类
$(this).siblings().removeClass("current")
// 切换类
$(this).toggleClass("current")
4. 动画效果
4.1 显示与隐藏
4.2 滑动效果
4.3 淡入和淡出
4.4 自定义动画
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 500,
width: 300,
// backgroundColor: "skyblue",
opacity: .5
}, 500);
})
})
jQuery动画无法修改背景色，需要另外加插件
5. 属性操作
5.1 固有属性
// 获取固有属性
$("a").prop("href")
// 修改固有属性
$("a").prop("title", "Hello, jQuery")
5.2 自定义属性
// 获取自定义属性
$("a").attr("index")
// 设置或修改自定义属性
$("a").attr("index", 3)
5.3 数据缓存data
// 向元素中缓存数据
$("a").data("uname", "Judy")
// 获取H5新增自定义属性
$("a").data("index")
// <a data-index="3"></a>
6. 文本内容值
6.1 元素内容
// 包括标签、文本等
// 获取元素内容
$("div").html()
// 修改元素内容
$("div").html("内容")
6.2 文本元素
// 只有文本内容
// 获取文本内容
$("div").text()
// 修改文本内容
$("div").text("内容")
6.3 表单值
// 表单中的值
// 获取表单值
$("input").val()
// 修改表单值
$("input").val("内容")
7. 元素操作
7.1 遍历元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jQuery.js"></script>
<style>
</style>
</head>
<body>
<script>
$(function() {
var colors = ["red", "green", "blue"]
$("div").each(function(i, ele) {
$(ele).css("color", colors[i])
})
})
</script>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
7.2 创建元素
var li = $("<li></li>")
7.3 添加元素
// 内部添加
$(".nav").append(li) // 元素末尾
$(".nav").prepend(li) // 元素头部
// 外部添加
$(".nav").after(li) // 元素下一个兄弟
$(".nav").before(li) // 元素上一个兄弟
7.4 删除元素
// 删除元素
$(".nav").remove()
// 清空元素
$(".nav").empty() // 清空元素中的孩子
8. 元素大小和位置
8.1 元素大小
| 语法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素宽度和高度值 只含有width / height |
| innerWidth() / innerHeight() | width / height、padding |
| outerWidth() / outerHeight() | width / height、padding、border |
| outerWidth(true) / outerHeight(true) | width / height、padding、border、margin |
8.2 元素文档位置
8.3 元素定位位置
只能获取不能修改
8.4 元素卷去距离
8.5 动画返回顶部
$("html, body").animate({
scrollTop: 0
})
9. 事件
9.1 事件绑定on
// 单个事件注册
$("div").click(function() {})
// 多个事件绑定
$("div").on({
click: function() {
$(this).css("background-color", "skyblue")
},
mouseover: function() {
$(this).css("background-color", "purple")
}
})
// 多个事件绑定相同的处理
$("div").on("click mouseover", function() {
$(this).toggleClass("current")
})
// 事件委派(可以给未来创建的li绑定事件，而普通click事件不行)
$("ul").on("click", "li", function() {
alert(11)
})
9.2 事件解绑off
9.3 一次性事件one
$("div").one("click", function() {}) // 点击一次后无效
9.4 自动触发事件
// 1. 元素.行为()
$("input").focus()
// 2. trigger()
$("input").trigger("focus")
// 3.triggerHandler() 不会有元素的默认行为
$("input").triggerHandler("focus")
9.5 事件对象
10. jQuery插件
1122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
