2019-12-23

jQuery基础知识总结
1、什么是JQuery？
它是js的一个框架，它是开源的项目。对底层的js进行封装，我们通过js框架就可以快速的完成DOM 对元素的增删改查操作，并提供了动画功能。jquery对外提供api让开发者去开发jquery插件（就是一个功能模块，用户只要做一些简单的配置就完成复杂的功能）。jquery目前是比较流行的一个JQuery框架。（宗旨：写得少，做的多）。

2、JQuery特点:
轻量级
强大的选择器
出色的DOM封装
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
丰富的插件支持
完善的文档
支持链式操作

3、JQuery的环境配置
1)官网：http://www.jquery.com
2)去下载jquery库文件:
通常有两个版本:
*未压缩版本：–用在开发和调试。（我们下载此版本）
*压缩版本:–产品发布的时候使用，可以提高性能和减少带宽

4、在html页面中如何使用jQuery？
使用引入

5、在内编写jquery脚本

/当文档解析完毕好以后去执行一个函数/
// 第一种写法
jQuery(document).ready(function(){
alert(“hello,jQuery”);
});
// 第二种写法
$(document).ready(function(){
alert(“hello,jQuery”);
})
// 第三种写法
$(function()alert("hello,jQuery");)注意:$是jQuery的别名，使用哪个都可以
强调: Window.onload == $(function())区别?原生和jQuery的区别？window.onload:整个页面（文字、DOM、图片、音频视频）；$(function(){}):只加载DOM部分；
一个页面中只能有一个window.onload；一个页面中可以有多个$(function(){})加载；
jQuery比原生加载速度快；

JQuery对象和DOM对象关系
原生与jQuery可以一起使用，但原生对象只能用原生的属性和方法，jQuery只能用jQuery的属性和方法。
*使用DOM方法来查询得到的结果是DOM对象，它只能访问DOM对象中所提供的属性和方法。
*使用JQuery查询得到的结果是Jquery对象，它只能访问jQuery对象中所提供的属性和方法。
注意:养成一个良好的书写习惯,JQuery对象的变量名最好以$开头。记住:JQuery查询出来的结果是一个对象数组，就算根据id来进行查询就是返回的是一个对象数组。数组内存放的是DOM对象。转换：\ast JQuery对象转--->DOM对象：$()[下标]/get(下标)
*DOM对象—>JQuery对象：$(原生对象

选择器的学习:
基本选择器：元素选择器
ID选择器
类选择器
群组选择器 // select1,select2…:将每一个匹配到的元素合并后一起返回
通配符选择器//匹配所有元素
层次选择器： 后代选择器 ul li{祖元素下匹配所有后代元素}//对应的方法find()
子代选择器 ul >li{父元素下匹配子元素}//对应的方法children()
相邻选择器 p + span{匹配p后的span元素 }//对应的方法next()
同辈选择器 p~span{匹配p之后所有的span元素}//对应的方法nextAll()
基本过滤选择器
:first:根据给定的id匹配一个元素==first()
:last:根据给定的类名匹配一个元素—last()
:not(selector):去除所有与给定选择器匹配的元素
:even:选取索引值为偶数的所有元素,从0开始计数
:odd:选取索引值为奇数的所有元素,从0开始计数
:eq(index):匹配一个给定索引值元素,从0开始
:gt(index):匹配大于给定索引值元素,从0开始
:lt(index):匹配小于给定索引值元素,从0开始
:header:选择h1,h2,h3一类的标签
:animated:匹配正执行动画效果的元素
:focus:匹配获取焦点的元素
:lang(language)选择指定语言的所有元素。1.9+
:root()选择文档的根元素1.9+
:target()选择由文档URI的格式化识别码表示的目标元素1.9+
4)常用的内容过滤选择器
:contains(text):匹配包含给定文本的元素
:empty:匹配所有不包含子元素或者文本的空元素
:parent:选取含有子元素或者文本的元素
5)常用的可见性过滤选择器
:hidden:选取所有不可见的元素 display:none
:visible:选取所有可见的元素
6)常用的属性过滤选择器
元素名[attribute]:选取拥有此属性的元素
元素名[attribute=value]:选取属性值等于value的元素
元素名[attribute!=value]:选取属性值不等于value的元素
元素名[attribute^=value]:选取属性值以value开始的元素
元素名[attribute$=value]:选取属性值以value结束的元素
元素名[attribute*=value]:选取属性值包含value的元素
元素名[attribute|=value]:选取属性值是value的元素或以value开头，后面跟-
元素名[attribute~=value]:选取属性值包含value且以空格隔开的元素
元素名[attribute1][attribute2]…:多个属性选择器合并成一个复合属性选择器

7):常用的子元素过滤选择器
:first-child:选取每个父元素下的第一个子元素
:first-of-type:选择所有相同的元素名称的第一个兄弟元素。
:last-child:选取每个父元素下的最后一个子元素
:last-of-type:选择所有相同的元素名称的最后兄弟元素。
:only-child:选取父元素中具有唯一的子元素的所有元素
:only-of-type:选取前后没有同名兄妹节点的子元素的所有元素
:nth-child(index/even/odd):选取每个父元素下的第index个子元素或奇偶元素（index从1开始算起)
:nth-last-child(index/even/odd):取每个父元素下的第index个子元素,从最后一个往第一个数（index从1开始算起)

8):常用的表单选择器
:input:选取所有、、和元素(表单元素)
:text:选取所有单行文本框
:password:选取所有密码框
📻选取所有单选按钮
:checkbox:选取所有复选框
:submit:选取所有提交按钮
:image:选取所有图像按钮
:reset:选取所有重置按钮
:button:选取所有按钮
:file:选取所有上传域

 9)常用的表单对象属性过过滤选择器
:disabled:选取所有不可用元素
:enabled:选取所有可用元素
:checeked:选取所有被选中的元素（单选框和复选框）
:selected:选取所有被选中的选项元素(下拉列表)

jQuery绑定事件

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title").click(f…("#content").is(’:hidden’)) {
$("#content").slideDown(1000);
}else{
$("#content").slideUp(1000);
}
});
先学习四个动画函数
show(时间)—即改变透明度，高度、宽度
hide(时间)—即改变透明度，高度、宽度

slideDown(时间)–只改变元素的高度
slideUp(时间)–只改变元素的高度

判断元素是否隐藏条件？
if($("#content").is(’:hidden’)){
}

层次选择器所对应的方法*****

next([元素])–找下一个同辈元素

pre([元素])–找上一个同辈元素

nextAll([元素])–找后面的所有同辈元素

preAll([元素])–找前面的所有同辈元素

siblings([元素])–找前后所有的同辈元素

text()—获取文本

html()–获取文本

val()–获取value属性值

length–长度

find([元素])–查找后代元素 对应的另一种写法 $(“ol”, this)–从this（元素）中去查找后代ol元素

focus()–让元素获得焦点

parent()–获得父元素

parents()–获取父辈元素

addClass(类名)–给元素添加类选择器

//改tab选项卡的功能，能用jquery尽量使用jquery来实现？

---

常用管理选择器所得到结果的方法****
1.index()–获取指定元素在查询结果中的下标。
2.add()–在集合中添加元素
3.not()–在集合中删除元素
4.filter(匹配的条件/匹配的函数)–筛选集合中的元素–把符合条件的元素取出来生成一个新的数组。
5.find()–对应的另一种写法 $(“ol”, this)–从this（元素）中去查找后代ol元素
6.each()–遍历集合
7.end()–回到上一个操作对象
8.addBack()–结果集中加入上一个操作对象

*创建并插入元素节点:通过$(标签的书写规范)函数

append() 向每个匹配的元素内部追加内容*****

appendTo() 将所有匹配的元素追加到指定的元素中

prepend() 向每个匹配的元素内部前置内容

prependTo() 将所有匹配的元素前置到指定的元素中

after() 在每个匹配的元素之后插入内容

insertAfter() 将所有匹配的元素插入到指定元素的后面

before() 在每个匹配的元素之前插入内容

insertBefore() 将所有匹配的元素插入到指定元素的前面

*删除元素

1、remove():对元素进行删除，返回删除的那个元素事件不可用

2、detach():对元素进行删除，返回删除的那个元素事件可用

3、empty():对元素进行后代元素的清除，返回没有后代元素的空元素，元素绑定的事件还是存在的。

*包裹元素

1)wrap()

2)wrapAll()

3)wrapInner()

对元素属性的操作****

1)attr(“属性名字”)–获取属性对应的值

2)attr(“属性名”,“属性值”)–设置一个属性所对应的值

3)attr({“属性名”:“值”,“属性名”:“值”,…})–设置多个属性值

给元素添加类选择器****

1)addClass(“选择器1 选择器2”);//添加多个类选择器

2)removeClass();删除元素上所有的类选择器

3)removeClass(“类选择器名”);删除元素上指定的选择器

4)hasClass(“类选择器名”)；使用类选择器返回true，否则返回false

5)toggleClass(“类选择器名”);根据元素是否使用这个类选择器来进行自动切换，使用的话删除，未使用的话添加。

*获取、设置文本的内容和值的方法

1)html()

2)text()

3)value()–它可以回去文本的value属性值，也可以设置文本框的value属性值

       --选中下拉列表框的选项

   --选中复选框

   --选中单选框

遍历节点操作****

1)children()–找元素中的子元素（可以指定具体要查询的子元素）

2)next()

3)prev()

4)parent()

5)parents()

6)closest()

7)siblings()

---

*css-DOM的操作

1)css()方法—作用，就是给标签设置行内样式，给标签设置style属性值

$(“p”).css(“color”,“red”);

$(“p”).css({“color”:“red”,“fontSize”:“32px”,“backgroundColor”:"#888888"});

alert($(“p”).css(“fontSize”));
2)设置元素的宽和高

 1)width()

 2)height()

 注意：

 *有参数是设置，无参数是获取

 *获取浏览器的宽和高

 alert($(window).width());

 alert($(window).height());

 innerHeight()--包括内边距。不包括边框和外边距

 outerHeight()--包括内边距,包括边框       

 innerWidth()

 outerWidth()

3)设置元素的滚动偏移量

 scrollTop()

 scrollLeft()



 $(window).scroll(function(){});浏览器滚动事件

4)css-DOM中的定位方法

 offset()--得到一个Jquery对象，里面封装了相对浏览器的偏移量（left，top属性）

          还可以设置相对浏览器的偏移量 offset({left:100,top:100});

 position()--得到一个Jquery对象,里面封装了相对父元素的偏移量left，top属性）

*事件的绑定

1)on(“事件类型1 事件类型2”,[{“键”:“值”}],“处理函数”);

 *第一个参数，事件类型可以多个

 *第二个参数,传给处理函数的数据

 *第三个参数,响应处理函数

2)off()–解除元素的绑定事件

*不带参数，解除元素上所有的事件

*带事件名，多个用空格隔开，解除元素上指定的事件

*带两个参数的，解除具有指定处理函数的事件

3)简写的方式*****

语法:jquery对象.事件(),比如:$show.click(function(){}).mouserover(function(){})

*常用的合成事件

1)hover(函数1，函数2)

当鼠标移入的时候执行函数1，移出的时候执行函数2

2)toggle()–切换（隐藏的时候显示，显示的时候隐藏）

*事件对象

什么是事件对象？

当一个元素触发事件的时候，内部会生成一个事件对象，（里面封装了与事件相关的信息）

此事件对象作为参数传给处理函数。处理函数就能从事件对象中获取相关的事件信息

比如:通过事件对象可以阻止冒泡型事件、阻止元素的默认行为，获得鼠标的坐标、

获得键盘按键所对应的字符或码值、获得鼠标的按键类型、获得事件源、获得事件类型

1)event.type属性–获取事件类型

2)event.preventDefault();–阻止元素的默认行为

3)event.stopPropagation();–阻止冒泡型事件

4)event.target—获取事件源,返回的是DOM对象

5)event.pageX和event.pageY 获得鼠标的X,Y坐标

6)return false，既阻止元素的默认行为，又阻止冒泡型事件

7)event.which,获得鼠标键 1，左，2中 3右

8)event.keycode

*模拟事件的操作

trigger(“事件名”)

可以使用简写的方式，比如元素.click()

---

*jQuery动画?

动画就是在单位时间内去修改元素的一个或多个属性值，也就是属性值在单位时间内从一个

状态到另外一个状态。

jquery为什么提供了一些现成的动画方法来完成特定的效果。

show(毫秒)

hide(毫秒)

---上面两个动画在指定的时间内改变属性透明度、高度、宽度。

toggle()–在show()和hide()之间进行切换，自动判断隐藏还是显示

fadeIn()

fadeOut()

fadeToggle()–透明边不透明，不透明变透明

fadeTo()–指定透明度

 ----只改变元素的透明度

slideDown()
slideUp()
slideToggle()–收起的时候显示，显示的时候收起。
—改变元素的宽度和高度。
以上动画都可以指定完成时间和一个函数，这个函数的作用就是当动画结束后要执行的功能。
*以上提供的动画未必能满足我们开发中所需的所有需求，所以要学会自定义动画。
总结：自定义动画用animate({多个属性的键值对}，时间，函数)；

结束动画:stop(参数1，参数2)
参数1：清除队列中的所有动画 true
参数2：让正在执行的动画直接跳到末尾状态 true
延迟动画的方法
delay(时间)–时间为毫秒数