jQuery基础、常用知识点总结（上）
建议在有js基础上看以下内容
一、jquery概述
1. 定义
jQuery是一个快速、简洁的JavaScript库，封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
2. 优点
①轻量级。核心文件才几十kb,不会影响页面的加载速度。
②跨越浏览器兼容。基本兼容了目前的主流的浏览器
③链式编程、隐式迭代。简化了代码量
④对事件、样式、动画的支持，大大简化DOM操作
⑤支持插件扩展开发。有这丰富第三方的插件，例如：树形菜单、日期控件、轮播图等
⑥免费、开源
3. 版本及使用步骤
目前3X版本是官方主要更新维护的版本，不兼容IE678
使用步骤：下载、引入jQuery文件，即可使用
4. jQuery的入口函数
①$(function(){
... //此处是页面DOM加载完成的入口
});
②$(document).ready(function(){
... //此处是页面DOM加载完成的入口
});
常用第一种方式
使用入口函数，等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完，相当于原生js中的DOMContentLoaded，有了入口函数就能把js代码写到结构之前了
5. jQuery*对象 $
（1）在代码中 $ 是jQuery的别称，可以相互替换
（2）$ 是jQuery的*对象，相当于原生js中的window，把DOM元素利用 $ 包装成jQuery对象，就能调用jQuery的方法
（3）jQuery对象和DOM对象的区别：
①利用元素js获取过来的对象为DOM对象
②利用jQuery方法获取的就是jQuery对象，其本质是利用$把DOM对象包装成jQuery对象（以伪数组的形式存储）
③jQuery对象只能使用jQuery的属性和方法，DOM对象只能使用原生js的属性和方法
(4）DOM对象与jQuery对象之间的转换
①DOM对象转jQuery对象
$("div") //$("DOM对象")
②jQuery对象转DOM对象(两种方法）
$("div")[index]//index为索引号
$("div").get(index)
二、jQuery常用的API
1. 获取元素
1.1jQuery基础选择器
$(“选择器”) //里面选择器直接写css选择器即可，但要加引号
| 名称 | 用法 |
|---|---|
| id选择器(获取指定id的元素） | $("#id") |
| 全选选择器（匹配所有元素） | $("*") |
| 类选择器（获取同一类class元素） | $(".class") |
| 标签选择器（获取同一类标签所有元素） | $(“div”) |
| 交集选择器（获取交集元素） | $(“li.current”) |
| 并集选择器（获取多个元素） | $(“div，p,li”) |
补充：
$(this)不加引号，表示当前元素
1.2jQuery层级选择器
- 子代选择器
$(“ul>li”) //获取亲子级元素 - 后代选择器
$(“ul li”) //所有后代元素
1.3隐式迭代（※）
遍历内部元素(伪数组形式存储）的过程，即 给匹配到的元素进行内部循环遍历，执行相应的方法，而不用再自己进行遍历
<div>哈哈</div>
<div>哈哈</div>
<div>哈哈</div>
<div>哈哈</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
//1.获取4个div元素
console.log($("div"));
//2.给四个div设置背景颜色 jquery对象不能使用style
$("div").css('background','pink');
//3.隐式迭代就是把匹配到的所有元素内部进行遍历循环，给每一个元素添加css这个方法
//前提是做相同的操作
$("ul li").css("color","red");
</script>
1.4jQuery筛选选择器
| 语法 | 用法 |
|---|---|
| ：first (第一个元素） | $(“li:first”) |
| ：last(最后一个元素） | $(“li:last”) |
| :eq(index) （对应索引号的元素） | $(“li:eq(2)”) |
| :odd (索引号为奇数） | $(“li:odd”) |
| :even(索引号为偶数） | $(“li:even”) |
补充：
针对复选框的一个筛选选择器
：checked 查找被选中的表单元素
1.5jQuery筛选方法
| 语法 | 用法 |
|---|---|
| .parent() (查找父级） | $(“li”).parent() |
| .children(selector) （亲子级，类似子代选择器） | $(“ul”).children(“li”) |
| .find(selector)(后代选择器） | $(“ul”).find(“li”) |
| .siblings(selector)(兄弟选择器） | $(".first").siblings(“li”) |
| .eq(index) (索引号为index的元素） | $(“li”).eq(2) |
补充： 得到当前元素的索引号：
① $ (this).index()
必须是同一组元素，关系为兄弟关系
② $.each()遍历（后面介绍）
补充：
筛选祖父级元素 parents（“选择器”）
1.6jQuery排他思想
给当前元素设置样式，其余兄弟元素清除样式
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function () {
//1.隐式迭代 给所有按钮添加点击事件
$("button").click(function () {
//2.当前的元素背景变化颜色
$(this).css("background","red");
//3.隐式迭代，其余兄弟都去掉背景
$(this).siblings("button").css("background","");
});
})
</script>
2.3.重复了$(this），可利用链式编程，简化代码
1.7链式编程
作用：简化代码量
1.6的2\3合并为
$(this).css("backgroundColor","red").siblings().css("backgroundColor","");
2. jQuery样式操作
2.1操作css方法
用css（）来修改简单元素样式，或操作类，修改多个样式
①参数只写属性名，为返回属性值（带单位）
$(this).css("color")
②参数是(“属性名”，“属性值”）是设置一组样式，属性值为数字可不带单位和引号
$(this).css("color","red")
$(this).css("width",100)
③参数是对象形式，分布设置多个样式，属性可不加引号,各样式逗号隔开
$(this).css({
color:"red",
width:100
});
补充：复合属性，名字要驼峰命名
比如：backgroundColor:“red”
2.2设置类样式方法
类似于原生js中的classList,可以操作类样式且不覆盖原来的类名
①添加类addClass()
②移除类removeClass()
③切换类toggleClass（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
}
.current {
background-color: red;
transform: rotate(360deg);
}
</style>
<script src="../jquery.min.js"></script>
</head>
<body>
<div class="current"></div>
<script>
//1.添加类addClass()
$("div").click(function () {
$(this).addClass("current");
})
//2.移除类removeClass
$("div").click(function () {
$(this).removeClass("current");
})
//3.切换类toggleClass
$("div").click(function () {
$(this).toggleClass("current");
})
</script>
</body>
</html>
3.jQuery效果
jquery封装了一些常见的动画效果，包括显示与隐藏、滑动、淡入与淡出、自定义动画
3.1显示隐藏效果
①显示show([s,[e],[fn]])
②隐藏hide([s,[e],[fn]])
③切换toggle([s,[e],[fn]])
参数（可不写）：
s：为速度（“slow”，“normal”，“fast”）或者可写毫秒数（如：1000）；
e：用来指定切换效果，默认“swing”（慢-快-慢），还有“linear”（匀速）
fn：回调函数，在动画完成时执行的函数
3.2滑动效果
①向上滑动slideUp([s,[e],[fn]])
②向下滑动slideDown([s,[e],[fn]])
③切换slideToggle([s,[e],[fn]])
3.3事件切换
hover（[over,]out）
over：鼠标经过时触发
out：鼠标离开时触发
①hover（over，out）是鼠标经过和离开的复合写法
②hover(只有一个参数)那么就是鼠标经过和离开都会触发这个函数
3.4动画队列以及停止排队方法
①动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或效果排队执行。（触发了就一定要执行完，会造成动画混乱）
②停止排队 stop()
用于停止动画效果，注意，stop()要写到动画或效果之前，表示停止上一次的动画。
<script>
$(function () {
//鼠标经过
$(".nav>li").mouseover(function () {
$(this).children('ul').slideDown(500);
})
//鼠标离开
$(".nav>li").mouseout(function () {
$(this).children('ul').slideUp();
})
//1.事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li").hover(function () {
$(this).children('ul').slideDown(500);
},function () {
$(this).children('ul').slideUp();
});
//2.事件切换 hover 如果只有一个函数 ，那么就是鼠标经过和离开都会触发这个函数
$(".nav>li").hover(function () {
//stop方法必须写在动画前面 $(this).children('ul').stop().slideToggle();//Toggle切换
})
})
</script>
3.5淡出淡入效果
①淡入fadeIn([s,[e],[fn]])
②淡出fadeOut([s,[e],[fn]])
③切换fadeToggle([s,[e],[fn]])
④渐进方法调整到指定的不透明度
fadeTo([s,opacity,[e],[fn]])
参数opacity：必须写，范围为0~1
参数s：必须写
3.6自定义动画
animate（params,[s],[e],[fn]）
参数params：想要修改的样式属性，以对象形式传递，必须写；其余参数可省略
$("div").animate({
color:"red",
width:100
});
补充：
$(document).animate(),这种写法是错的，animate（）只能一般元素操作
4.jQuery属性操作
4.1设置或获取元素固有属性 prop()
固有属性:元素本身就自带的属性，比如a的href等
①获取属性
prop(“属性名”)
②设置属性值
prop(“属性名”,“属性值”）
4.2设置或获取元素自定义属性值 attr()
我们自己给元素添加的属性，称为自定义属性。比如给div添加自定义属性，
<div index="1"> </div>
①获取属性
attr(“属性”)
②设置属性值
attr(“属性”,“属性值”)
此方法也适用于获取和设置h5自定义属性data-index=“2”
4.3数据缓存 data(）
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结果。一旦页面刷新，之前存放的数据都会被移除。（这些数据存在数据的缓存上）
①添加数据
data(“数据名”,“值”)
②获取数据
data(“数据名”）
补充：
此方法也可读取h5自定义属性
<div data-index="1"></div>
console.log($("div").data(index"));
//注意！！！不带data-
5.jQuery内容文本值
主要针对元素内容还有表单的值操作
（1）普通元素的内容 html()
(相当于原生innerHTML,识别标签，空格换行等）
①获取元素内容
html()
②设置属性内容
html(“内容”)
<div>
<span>我是内容</span>
</div>
console.log($("div").html());//<span>我是内容</span>
(2)普通元素文本内容 text()
（相当于原生innerText,不识别标签、空格和换行）
①获取元素内容
text()
②设置属性内容
text(“文本内容”)
<div>
<span>我是内容</span>
</div>
console.log($("div").html());//我是内容
6. jQuery元素操作
主要是遍历、创建、添加、删除元素操作
6.1遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用遍历
同一类元素做不同的操作：
（1）语法：
$(“div”).each(function(index,domEle){…});
①each()方法遍历匹配每一个元素，主要用于DOM元素操作
②两个参数，index为索引号，domEle为每一个DOM元素对象，不是jQuery对象！！！！
③要使用时要转为jquery对象 $(domEle）
(2)语法：
$.each( $(“div”).function(index,ele){…});
① $.each()可用于遍历任何对象，主要用于数据处理，比如数组、对象
②若遍历的是DOM元素得到的仍是DOM对象，要转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function () {
// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
// 1. each() 方法遍历元素
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
console.log(sum);
})
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
$.each($("div"), function(i, ele) {
console.log(i);
console.log(ele);
});
//遍历数组
$.each(arr, function(i, ele) {
console.log(i);
console.log(ele);
})
//遍历对象
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
n
</script>
</body>
</html>
6.2创建元素
语法：动态创建
$("<li></li>")
6.3添加元素
①内部添加（形成父子关系）
element.append(“内容”) ；把内容放到匹配元素内部最后面，类似原生appendChild
element.prepend(“内容”) ；把内容放到匹配元素内部最前面
②外部添加（形成兄弟关系）
element.after(“内容”)； 把内容放目标元素后面
element.before(“内容”) ；把内容放目标元素前面
6.4删除元素
element.remove() ； 删除匹配元素本身
element.empty() ；删除匹配元素集合中所有的子节点
element.html(" ")； 清空匹配元素的内容
上一篇： sql查询相关