jQuery基础
- 宗旨：写得更少，做得更多
- 主要的功能 ：
- 优化HTML文档操作（增，删，改，查，class样式处理）
- 事件处理
- 动画设计
- Ajax交互
所以请注意，jQuery是一个专注于DOM的框架 ，不针对ES与BOM
jQuery的语法格式
jQuery主要包含三部分
- 起始标志符
$ - 选择器
- 封装的方法(只有一个属性length属性)
jQuery需要通过第三方JS库来实现，所以我们需要从网络上面下载jQuery的库以后才能使用，可以在官网下载，也可以通过npm去下载
下载完成以后，请在需要的页面进行导入
<script src="./js/jquery.js" type="text/javascript"></script>
文档就绪函数
jQuery主要的操作集中在DOM操作里面，所以它必须等到当前的网页加载完毕以后才能进行，在以前的时候，我们需要通过window.onload才能进行
window.onload=function(){
//要执行的代码
}
如果有了jQuery，里面有一个专门的方法ready代表当前文档已经加载完毕了
$(document).ready(function(){
//要执行的代码
});
上面的代码代表选中了document当前文档，ready是一个是一个事件方法，代表文档加载完毕以后的方法，里面接收一个回调函数！
请注意，在写jQuery代码之前，一定要注意写文档就绪函数
因为文档就绪函数是经常使用的一个函数，所以它在这里有一种简化的写法
$(function(){
//要执行的代码
//这就是简化的文档就绪函数
});
可以直接在选择器里面放一个function 回调
思考：window.onload与jQuery里面的$(document).ready()有什么区别？
onload后执行,ready先执行,一个是 jQuery里面的方法,一个是window里面的事件
jQuery选择器
jQuery的选择器在原有的CSS选择器上面做了一些扩展，我们主要是对这些扩展再重新的做一次记忆就行了
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | class="intro" 的所有元素 |
| .class,.class | $(".intro,.demo") | class 为 "intro" 或 "demo" 的所有元素 |
| element | $("p") | 所有 <p>元素 |
| el1,el2,el3 | $("h1,div,p") | 所有<h1>、<div> 和 <p>元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数<tr>元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 |
| :odd | $("tr:odd") | 所有奇数<tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 |
| :first-child | $("p:first-child") | 属于其父元素的第一个子元素的所有 <p> 元素 |
| :first-of-type | $("p:first-of-type") | 属于其父元素的第一个 <p> 元素的所有<p>元素 |
| :last-child | $("p:last-child") | 属于其父元素的最后一个子元素的所有 <p> 元素 |
| :last-of-type | $("p:last-of-type") | 属于其父元素的最后一个<p>元素的所有 <p>元素 |
| :nth-child(n) | $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素 |
| :nth-last-child(n) | $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有 <p>元素，从最后一个子元素开始计数 |
| :nth-of-type(n) | $("p:nth-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有<p>元素 |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 |
| :only-child | $("p:only-child") | 属于其父元素的唯一子元素的所有 <p> 元素 |
| :only-of-type | $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 <p> 元素 |
| parent > child | $("div > p") | <div> 元素的直接子元素的所有 <p>元素 |
| parent descendant | $("div p") | <div> 元素的后代的所有 <p> 元素 |
| element + next | $("div + p") | 每个 <div> 元素相邻的下一个<p> 元素 |
| element ~ siblings | $("div ~ p") | <div>元素同级的所有 <p>元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 值从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列举 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的输入元素 |
| :header | $(":header") | 所有标题元素 <h1>, <h2>... |
| :animated | $(":animated") | 所有动画元素 |
| :focus | $(":focus") | 当前具有焦点的元素 |
| :contains(text) | $(":contains('Hello')") | 所有包含文本 "Hello" 的元素 |
| :has(selector) | $("div:has(p)") | 所有包含有 <p>元素在其内的 <div>元素 |
| :empty | $(":empty") | 所有空元素 |
| :parent | $(":parent") | 匹配所有含有子元素或者文本的父元素。 |
| :hidden | $("p:hidden") | 所有隐藏的 <p>元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| :root | $(":root") | 文档的根元素 |
| :lang(language) | $("p:lang(de)") | 所有 lang 属性值为 "de" 的<p> 元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='default.htm']") | 所有带有 href 属性且值等于 "default.htm" 的元素 |
| [attribute!=value] | $("[href!='default.htm']") | 所有带有 href 属性且值不等于 "default.htm" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有带有 href 属性且值以 ".jpg" 结尾的元素 |
| [attribute|=value] | $("[title|='Tomorrow']") | 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串 |
| [attribute^=value] | $("[title^='Tom']") | 所有带有 title 属性且值以 "Tom" 开头的元素 |
| [attribute~=value] | $("[title~='hello']") | 所有带有 title 属性且值包含单词 "hello" 的元素 |
| [attribute*=value] | $("[title*='hello']") | 所有带有 title 属性且值包含字符串 "hello" 的元素 |
| [name=value][*name2*=*value2*] | $( "input[id][name$='man']" ) | 带有 id 属性，并且 name 属性以 man 结尾的输入框 |
| :input | $(":input") | 所有 input 元素 |
| :text | $(":text") | 所有带有 type="text" 的 input 元素 |
| :password | $(":password") | 所有带有 type="password" 的 input 元素 |
| :radio | $(":radio") | 所有带有 type="radio" 的 input 元素 |
| :checkbox | $(":checkbox") | 所有带有 type="checkbox" 的 input 元素 |
| :submit | $(":submit") | 所有带有 type="submit" 的 input 元素 |
| :reset | $(":reset") | 所有带有 type="reset" 的 input 元素 |
| :button | $(":button") | 所有带有 type="button" 的 input 元素 |
| :image | $(":image") | 所有带有 type="image" 的 input 元素 |
| :file | $(":file") | 所有带有 type="file" 的 input 元素 |
| :enabled | $(":enabled") | 所有启用的元素 |
| :disabled | $(":disabled") | 所有禁用的元素 |
| :selected | $(":selected") | 所有选定的下拉列表元素 |
| :checked | $(":checked") | 所有选中的复选框选项 |
| .selector | $(selector).selector | 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 |
| :target | $( "p:target" ) | 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素 |
上面的jQuery选择器，jQuery通过上面的选择器，可以快递的选择元素，但请注意它的返回类型
它返回的是一个jQuery.fn.init这个东西，它是一个数组
<ul class="ul1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ul class="ul2">
<li>第四项</li>
<li>第五项</li>
<li>第六项</li>
</ul>
在上面的网页文档里面，我们用jQuery选择器去操作
$(选择器，区域); //默认情况下为document
$(selector,context);
//context代表你在哪个区域里面在选择，默认是document整个文档
$("li")； //在整个document里面去找li
document.querySelectorAll("li")
如果仅仅只是想选择ul1下面的li
document.querySelectorAll(".ul1>li");
//-------------------
$(".ul1>li");
//---------------------
//如果非要使用两个参数
var ul1=document.querySelector(".ul1"); //首先拿到ul1
ul1.querySelectorAll("li");
//或
$("li",ul1);
选中ul1里面的第1个li怎么办？
$(".ul1>li:first-child");
$(".ul1>li")[0];
$(".ul1>li:nth-child(1)");
$(".ul1.li:nth-of-type(1)");
$(".ul1>li:eq(0)"); //这是jQuery新增的选择器
选中ul1里面的前2个li怎么办
$(".ul1>li:nth-child(-n+2)");
$(".ul1>li:lt(2)"); //这是jQuery新增的选择器
选中ul1里面的索引大于1的li怎么办
$(".ul1>li+li+li");
$(".ul1>li:gt(1)"); //jQuery新增的
总结：
eq代表当前索引 ，lt代表小于这个索引，gt代表大于这个索引，它是jQuery里面新增的选择器，css里面不具备
案例
请将下面表格当中的“旷工”与"缺卡"标记出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.table1{
width: 500px;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.table1 tr th,.table1 tr td{
border: 1px solid black;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<th>日期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td>张力</td>
<td>正常</td>
<td>上班1缺卡</td>
<td>正常</td>
<td>旷工</td>
<td>正常</td>
</tr>
<tr>
<td>王五</td>
<td>正常</td>
<td>正常</td>
<td>旷工</td>
<td>正常</td>
<td>下班1缺卡</td>
</tr>
<tr>
<td>李四</td>
<td>上班2缺卡</td>
<td>正常</td>
<td>正常</td>
<td>正常</td>
<td>旷工</td>
</tr>
<tr>
<td>张力</td>
<td>旷工</td>
<td>正常</td>
<td>正常</td>
<td>正常</td>
<td>正常</td>
</tr>
</table>
</body>
<script src="./js/jquery.js"></script>
<script>
//假设没有jQuery
/*
var tds=document.querySelectorAll(".table1 td");
tds.forEach(function(item,index,a){
if(item.innerText.trim()=="旷工"){
item.style.backgroundColor="red";
}
else if(item.innerText.trim().includes("缺卡")){
item.style.backgroundColor="blue";
}
})
*/
$(".table1 td:contains('旷工')").css("backgroundColor","red");
$(".table1 td:contains('缺卡')").css("backgroundColor","blue");
</script>
</html>
jQuery里面的方法
jQuery的本质就是把DOM里面的常用操作封装成了一些方法，提供给用户使用，这些方法我们可以大致分为以下几类
事件方法
jQuery将一些常用的事件绑定封装成了方法，方便用户能够快速的进行事件绑定
-
click方法，它用来绑定选中元素的单击事件
$("#btn1,#btn2,#btn3").click(function (event) { console.log("hello world", new Date()); }) -
dblclick方法，它用来绑定选中元素的单击事件
$("#btn1,#btn2,#btn3").dblclick(function (event) { console.log("hello world", new Date()); }) -
keydown方法键盘按下去
-
keyup键盘松开
-
keypress键盘敲击
-
mousedown鼠标按下
-
mouseup鼠标松开
-
mouseenter鼠标进行
-
mouseleave离开
-
hover本身不是一个事件，它是把我们的
mouseenter与mouseleave结合在了一起$(".div1").hover(function(){ console.log("我hover进去了",new Date()); },function(){ console.log("我hover出来了",new Date()); })第一个回调代表鼠标进入 ，第二个回调代表鼠标离开
上面的方法把常用二级DOM事件都做成了事件方法
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗体事件 |
|---|---|---|---|
| click | keydown | submit | load |
| dblclick | keyup | change | resize |
| mouseenter | keypress | focus | scroll |
| mouseleave | blur | unload |
jQuery的事件方法只是把一些方法的事件封装成了方法，但是对于一些不常用的，怎么办呢？
这个时候jQuery就提供了一个on的通用方法
on方法的参数可以是2个，也可以3个
如果是2个，则如下所示，代表常规的事件绑定
$(".div1").on("touchstart",function(event){
console.log("我触摸了");
})
上面的代码就是绑定了touchstart的事件
如果是3个，则代表事件委托方式的绑定，案例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width: 200px;
height: 200px;
border: 1px solid black;
}
.ul1{
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="ul1">
<li>第一项</li>
<li>第二项</li>
<li class="active">第三项</li>
<li>第四项</li>
</ul>
</body>
<script src="./js/jquery.js"></script>
<script>
var newli=document.createElement("li");
newli.className="active";
newli.innerText="插入项";
$(function(){
//对ul1下面的所有li绑定了一个单击事件
/*
$(".ul1>li").on("click",function(){
console.log("我点击了",new Date());
})
*/
//事件绑定在.ul1上面，但是事件的触发者li.active
$(".ul1").on("click",".active",function(event){
//this指向了是.active这个DOM元素
console.log("我点击了",new Date());
});
//第一个参数代表事件名称，第二个参数代表触发者判断条件，第三个代表事件要调用的方法
})
</script>
</html>
注意事件方法里面的this指向问题
- 在jQuery的事件方法里面，它的this应该和普通的事件绑定一样指向当前事件绑定的对象【常规方式绑定】
- 在jQuery的事件委托绑定里面，它的this指向了是on的第二个参数
注意事件对象的变化
jQuery当中默认会接收一个事件对象，可以在回调方法里面用参数的形式接收到。这一个事件对象不同于之学习的DOM里面的事件对象
在DOM的事件对象里面，它最终是继承自Event这个对象，而在jQuery的事件里面，它是单独的封装成了一个对象，继承了object
在阻止事件传递的方法，原生的DOM里面，它需要设置属性cancelBubble 与调用方法stopPropagation(),现在在jQuery里面，则只需要调用event.stopPropagation();就可以了
在阻止事件的默认行为方法，如果是0级DOM，可以直接return false 如果是2级DOM可以直接调用preventDefault()方法，现在在jQuery里面则两种都可以用
注意事件的移除
在jQuery里面，我们的on相当于addEventListener添加事件监听 ，但是同时还有一个方法off 相当于移除事件监听
$(function () {
$(".ul1>li").on("click",function(event){
console.log(this);
});
})
上面的代码是对ul1下面的li绑定了事件
$(".ul1>li").off("click");
这一段代码相当于把ul1下面的li的click事件监听移除掉
注意一次性事件绑定方法
jQuery提供one的方法，能够让元素在绑定事件以后只执行一次，执行一次以后这个事件自动移除掉
$(".ul1>li").one("click",function(event){
console.log(this);
})
? 扩展：在很早期的时候，jQuery提供给用户绑定事件的方法不是on,如果只是普通绑定使用的是bind的方法，如果是委托的绑定使用的是delegate，如下代码所示
普通绑定
$(".ul1>li").bind("click",function(event){
console.log(this);
})
委托绑定
$(".ul1").delegate("li","click",function(event){
//它的参数顺序与on是不一样的
console.log(this);
});
在老的版本里面是通过这两种方式来进行事件绑定的，但是用起来不太友好 ，所以后期就使用了on 一个方法来解决两个问题
更老的版本里面有还有一个
live()是绑定方法，然后对应的移除是die()
DOM选取方法
jQuery已经有选择器的情况之下为什么还需要DOM取选的方法？
因为jQuery的选择器选取的元素只能够操作后代子代以及后面的兄弟，不能操作父级和前面的哥哥，所以必须有一套完整DOM选取方法去弥补这样的一个区别
<div class="div1">
<ul class="ul1">
<li class="li0">
<span>大家好</span>
<span>我叫杨标</span>
</li>
<li class="li1">
<p>你们好</p>
<p>这是jQuery</p>
</li>
<li>
第三项
</li>
</ul>
</div>
<h2 >天气非常不错</h2>
jQuery选取子级元素children(selector)
jQuery可以通过选择器选取子级元素，同时也可以通过DOM自带的方法去获取子级元素
$(".ul1>li"); //直接通过选择器选取
$(".ul1").children();
上面的两各方法都可以获取到ul1下面所有的li元素
如果我们需要获取ul1下面class为li1的原素呢？
$(".ul1>.li1"); //直接通过选择器获取
$(".ul1").children(".li1");
上面的jQuery方法里面，我们可以看到children方法在这里可以接收一个参数，这个参数是选择器，相当于在所有的子级元素里面用选择器过滤一次
jQuery获取后代元素
jQuery可以通过选择器空格来获取后代元素，同时也有DOM方法去获取后代元素
如果我现在仅仅只是想获取ul1下面的 p标签
$(".ul1 p");
$(".ul1").find("p");
find方法相当于在后代去找元素，它不一定停留在子代，find后面必须接一个选择器，如果想找到所有的，请给一个*的选择器
jQuery去找父级元素parent()
jQuery不能够通过选择器去找父亲，但是DOM的方法可以
如果我们现在希望找到ul1的父亲
$(".ul1").parent();
jQuery找所有的父级元素parents()
$(".ul1").parents();
它会一直往上找，直到找到html
jQuery找父级元素，截止到某一个点parentsUntil()
$(".ul1").parentsUntil("html")
从.ul1开始向父级找，找到html结果，但是不包含html(找到它，但是不包含它)
jQuery找后面相邻兄弟next()
现在找li0后面的一个li元素
$(".li0+li"); //通过选择器获取
$(".li0").next(); //通过jQuery方法的DOM操作来获取
jQuery找后面所有的兄弟nextAll()
现在找li0后面的所有li元素
$(".li0~li");
$(".li0").nextAll();
jQuery找后面兄弟，直接某个结束nextUntil()
$(".li0").nextUntil(".li1");
在后面的兄弟里面去找，找到它，但不包含它
jQuery找前面的兄弟prev ()
$(".li1").prev()
jQuery找前面所有的兄弟prevAll()
$(".li1").prevAll()
jQuery找后面兄弟，直接某个结束prevUntil()
$(".li1").prevUntil(".li0");
//找到它，但是不包含它
jQuery找到前面的和后面的兄弟siblings()
$(".li1").siblings()
扩展: 现在我们学习的方法总结如下
| 选取位置 | 选择器 | DOM方法 | jQuery方法 |
|---|---|---|---|
| 子代选取 | > | children属性 | **children()**方法 |
| 后代选取 | 空格 | 无 | **find()**方法 |
| 父级选取 | 无 | parentElement | parent()/parents()/parentsUntil()方法 |
| 相邻弟弟 | + | nextElementSibling | **next()**方法 |
| 普通弟弟 | ~ | 无 | **nextAll()**方法/nextUntil()方法 |
| 相邻的哥哥 | 无 | previousElementSibling | **prev()**方法 |
| 普通的哥哥 | 无 | 无 | **prevAll()**方法/prevUntil()方法 |
| 前后兄弟 | 无 | 无 | **siblings()**方法 |
| 第一个 | :first-child | firstElementChild | first() |
| 最后一个 | :last-child | lastElementChild | last() |
| 符合条件过滤 | 选择器过滤 | 无 | filter() |
| 排除 | :not | 无 | not() |
在上面加粗的方法里面，还可以接收一个选择择做为参数，将选择的结果做一更为严谨的过滤
注意：DOM的选取方法与$(选择器)返回的结果是一个类型，在进行事件绑定的时候，this以最后一次选取的结果为主
$(".ul1").children().click(function(){
console.log(this); //this指向 thchilcren()选取的元素
})
//委托的this指向第二个参数
$(".ul1").children().on("click","span",function(){
console.log(this); //this指向 span
})
jQuery选中指定索引的子元素eq(index)
在之前的时候，我们的CSS选择器完成
$(".ul1>li:nth-child(2)");
$(".ul1>li:nth-of-type(2)");
$(".ul1>li:eq(1)") //通过jQuery的选择器来完成
$(".ul1>li")[1]; //通过索引来的
$(".ul1>li").eq(1); //通过jQuery的方法来选取的
jQuery选中第一个子元素first()
$(".ul1>li:first-child");
$(".ul1>li").first()
jQuery选中最后一个子元素last()
$(".ul1>li:last-child");
$(".ul1>li").last(); //jQuery的方法
jQuery选中ul1下面li的class为li1的filter()
$(".ul1>li.li1");
$(".ul1").children("li.li1");
$(".ul1>li").filter("li.li1");
filter()方法是过滤指定符号条件的结果
jQuery选中ul1下面li的class不为li1的not()
$(".ul1>li:not(.li1)");
$(".ul1>li").not(".li1")
filter()方法与not()是相对的
DOM操作方法
添加的方法
jQuery里面添加的方法全部都是基于DOM里面的三个方法来完成的insertAdjacentElement， insertAdjacentHTML,insertAdjacentText
- append()该方法在元素的内部的最后去添加内容，它相当于
beforeEnd结束之前 - after()该方法在元素的后面去添加内容，相当于
afterEnd结束之后 - before()该方法在元素的前面去添加内容 ，相当于
beforeBegin开始之前 - prepend()该方法在元素的里面的最前面去添加内容，它相当于
afterBegin开始之后
| DOM位置 | jQuery方法 | 说明 |
|---|---|---|
| beforeBegin | before() | 开始之前 |
| afterBegin | prepend() | 开始之后 |
| beforeEnd | append() | 结束之前 |
| afterEnd | after() | 结束之后 |
上面的四个方法会根据你插入的内容自动的去调用*Element或*HTML或 *Text这三个方法
删除的方法
在jQuery里面，删除的方法主要是两个情况
- remove() 它删除自身，同时也删除了自己的子元素
- empty() 它只清空自己的子元素，保留当前自身
属性方法
jQuery将对DOM的常用属性操作封装成了方法，我们可以直接使用这些方法进行DOM的常用属性操作
-
html()
该方法主要是对DOM元素的
innerHTML这个属性进行操作，这个操作分为取值与赋值过程如果html有参数，则是赋值，如果没有参数则是取值
但要注意，如果是取值，返回的是第一个，如果是赋值则可以批量进行
$(".ul1>li").html(); //取值第一个 $(".ul1>li").html("我在赋值"); //批量赋值 -
text()
该方法主要对DOM元素的innerText这个属性进行操作，与
html()一样，取单个值，批量赋值。如果没有参数则是取值，如果有参数则是赋值 -
val()
该方法主要是对表单元素进行DOM操作，因为表单元素有一个特殊的属性
value，这个操作也分为取值与赋值过程，有参数就赋值，没参数就取值
-
attr()
该方法用于对DOM元素的属性进行操作，它接收一个参数或两个参数，一个参数代表取这个属性的值，二个参数代表对这个属性进行赋值， 它对应的是DOM里面的
getAttribute()和setAttribute()$("#userName").attr("placeholer"); $("#userName").attr("type"); $("#userName").attr("placeholder","请输入密码"); //对placeholder这个属性进行赋值 -
removeAttr()
该方法是对DOM元素的属性进行删除，相当于DOM里面的
removeAttribute()$("#userName").removeAttr("placeholder"); //删除placeholder这个属性 -
prop()
该方法是对DOM的单属性进行操作
//禁用disabled=false; $("#userName").prop("disabled",false); //只读readonly=true; $("#userName").prop("readonly",true); -
data()
该方法主要对DOM的以
data-开头的自定属性进行获取<input type="text" id="userName" data-age="18" data-sex="男" data-user-pwd="123456" disabled placeholder="请输入用户名">现在我们通过jQuery的方法去获取里面的自定义属性
$("#userName").data("age"); $("#userName").data("sex"); $("#userName").data("userPWd"); $("#userName").data("user-pwd"); $("#userName").attr("data-sex"); //赋值 $("#userName").attr("data-age",50);data的方法仅仅只能用于获取，不要用于赋值，如果要赋值了还是调用
attr()方法进行赋值
-
addClass()
该方法主要是对DOM元素的
classList进行add()操作$(".div1").addClass("active") -
removeClass()
该方法主要是对DOM元素的
classList进行remove()操作$(".div1").removeClass("active") -
toggleClass()
该方法主要是对DOM元素的
classList进行toggle()操作$(".div1").toggleClass("active");
-
css()
该方法主要用于对CSS样式的取值与赋值，它取值是通过DOM的
window.getComputedStyle()这个方法来获取，它的赋值主要是通过style这个属性来完成这个方法的使用场景与使用方法多种多样
$(".div1").css("width"); // 获取CSS width $(".div1").css("border"); //获取CSS border $(".div1").css("width","200px"); // 它的赋值操作是基于style来进行的到目前为止，我们都发现一个参数是取值，两个参数是赋值，其实并不是的第一种情况
现在需要将div1的宽度设置为200px，高度设置200px
$(".div1").css("width","200px"); $(".div1").css("height","200px"); $(".div1").css("backgroundColor","blue");因为jQuery是支持链式语法，所以上面的选择是一样的，我们可以使用链式语法去完成
$(".div1").css("width","200px").css("height","200px").css("backgroundColor","blue")还可以像这样即操作CSS也操作属性
$(".div1").css("width","200px").css("height","200px").css("backgroundColor","blue").text("我改变了你的样式").css("color","red")第二种情况
这一种赋值方式是直接通过对象去完成的
$(".div1").css({width:"200px",height:"200px",backgroundColor:"blue",color:"red"}).text("我用另一种方式再完成")注意：请注意上面的
backgroundColor,如果碰到CSS属性名有-则去掉-后面的首字母大写如果你不想转，你就加个引号把它包含起来
"background-color"
动画方法
-
显示隐藏
- show()显示
- hide()隐藏
- toggle()在隐藏与显示之间在进行切换
上面的三个方法接收参数，如果有参数则会实现一个过渡的效果，这个参数可以是三个枚举值
slow/normal/fast，由慢到快，也可以接收一个具体的时间值，这个值以毫秒为单位$(".div1").toggle(5000); $(".div1").toggle("fast"); -
淡入淡出
- fadeIn()淡入
- fadeout()淡出
- fadeToggle()在淡入和淡出之间进行切换
- fadeTo(j时间,透明度)切换到指定透明度
上面的前三个方法也可以接收参数，与“显示隐藏”保持一致，可以接收枚举参数，也接收具体时间值
-
上拉下滑
- slideUp()上拉
- slideDown()下滑
- slideToggle()在上拉下滑之间进行切换
上面的三个方法也接收参数
-
自定义动画
上面的三个动画是jQuery提供给我们的常用的三个动画 ，但是我们还可以定义自己的动画效果,它使用的方法是
animate$(".div1").animate({marginLeft:"500px"},2000).animate({marginTop:"200px"},2000);
动画方法的回调
在调用jQuery的动画的时候，执行动画是需要时间的，如果我们希望某一段代码是在动画 结束以后去进行的，那么，我们则需要使用回调，如下代码所示
$("#btn1").click(function(){
$(".div1").slideUp(5000);
alert("我在上拉");
});
如果我们仅仅只是以上面的代码去运行，会发现，动画还没有完成，下面的弹窗就出来了，这不行
解决方法一
$("#btn1").click(function(){
$(".div1").slideUp("5000");
setTimeout(function(){
alert("我在上拉");
},5000);
});
使用定时器这种方式局限性非常大，不推荐使用
解决方法二
$("#btn1").click(function(){
$(".div1").slideUp(5000,function(){
alert("hello world");
})
});
这种方法是jQuery提供给用户的，所以我们可以在这个里面直接使用，同时上面讲的四种动画有回调
$(".div1").animate({
marginLeft:"500px"
},2000,function(){
alert("我结束了");
})
解决方法三
利用jQuery的排队等待方法
$("#btn1").click(function(){
//queue是排队
$(".div1").slideUp(5000).queue(function(){
alert("hello world");
$(this).dequeue(); //出队
}).queue(function(){
alert("你好，世界");
$(this).dequeue(); //出队
}).slideDown();
});
jQuery的链式语法
jQuery支持链式语法，本质就是在选取元素结束以后可以在后面多次调用方法
jQuery获取元素大小
jQuery提供了四个方法用于获取元素的大小
-
width()/height()
指元素content的大小
-
innerWidth()/innerHeight()
指元素的content+padding的大小
-
outerWidth()/outerHeight()
指元素的content+padding+border
-
outerWidth(true)/outerHeight(true)
指元素的content+padding+border+margin
jQuery的其它方法
在之前，我们在学习jQuery的方法的时候，都是通过一个选择器选中元素以后再去调用jQuery的方法，但是jQuery本身也提供一些方法，可以直接使用
-
each()方法
这个方法是jQuery提供给用户进行遍历的方法，当用户选取一组元素可以以后可以直接调用
each方法进行遍历//each是遍历的方法 $(".ul1>li").each(function(index,ele){ console.log(index); console.log(ele); //在这里要注意一点，它的this指向当前遍历的元素 console.log(this); })注意：回调方法里面的参数不要与数组
forEach回调用三个参数弄混了
接下来就是jQuery对象方法，因为方法既是方法也是对象
-
each()方法
这个each和上面的each是不一样的，虽然方法名相同，但是调用的对象不一样
var li1=$(".ul1>li"); //第一个参数代表你要遍历的数组或类数组，第二个代表回调函数 $.each(li1,function(index,ele){ console.log(index); console.log(ele); });这个时候是把jQuery当成对象在进行调用，它不仅可以遍历jQuery得到的DOM集合，还可以遍历类数组
var lis=document.querySelectorAll(".ul1>li"); //返回一人NodeList 它是一个类数组 $.each(lis,function(index,ele){ console.log(index); console.log(ele); })它还可以遍历数组
var arr=["a","b","c","d","e"]; $.each(arr,function(index,ele){ console.log(index); console.log(ele); }); -
makeArray()
在以前的时候，我们可以使用
Array.prototype.slice.call(类数组)jQuery提供这个方法将类数组转换成数组,语法格式如下
$.makeArray(类数组,数组结果)var resultArray=[]; $(function(){ var lis=document.querySelectorAll(".ul1>li"); $.makeArray(lis,resultArray); });经过上面的运算以后，resultArray它就是一个数组，这个数组里面的元素就是lis里面的元素
-
toArray()
jQuery提供该方法直接将选中的结果转为数组
$(".ul1>li").toArray(); -
ajax方法
该方法会出专题讲解