初识jQuery
jQuery简介
什么是jQuery？
jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.
常见的javascript库?
- Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
- Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
- YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
- Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
- Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
- jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
jQuery的特性
jQuery能做以下事情：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
- Utilities
jQuery的使用方式
1、下载后引入
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
2、编写简单的 HelloWorld
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function(){
alert('Hello World');
});
</script>
</head>
</html>
jQuery函数
jQuery库只提供了一个叫jQuery的函数，该函数中以及该元素的原型中定义了大量的方法。jQuery函数具有四种参数：
（1）选择器（字符串）
jQuery函数通过该选择器获取对应的DOM，然后将这些DOM封装到一个人jQuery对象中并返回。
（2）DOM对象（即Node实例）
jQuery函数将该DOM封装成jQuery对象并返回。
（3）HTML文本字符串
jQuery函数根据传入的文本创建好HTML元素并封装成jQuery对象并返回。
$("<div class="one">one</div>");
（4）一个匿名函数
$(function(){});
当文当加载完毕之后jQuery函数调用匿名函数。
jQuery对象
jQuery对象是jQuery函数的一个实例，是一个类数组对象，数组中存放的是DOM对象，而DOM对象是Node的实例。
对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。
jQuery对象的获取通常是使用选择器来获取的。比如，获取所有clss为one元素:$(".one");
1、基本选择器
$("#testId") //id选择器
$(".className") //类选择器
$("p") //元素选择器
$("*") //全选择器（匹配所有元素）
$("div,span,p") //组合选择器 多个选择器使用都好分隔，取并集
2、层次选择器
$("div p") //后代选择器
//两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
$("div>p") //子代选择器
//两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。
$("div + p") //相邻选择器（一个）（同级）
//两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。
$("div~p") //兄弟选择器（多个）（同级）
//两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。
jQuery过滤选择器
jQuery的过滤器必须用在jQuery选择器后，表示对通过前面的jQuery选择器选择到的内容的过滤。是建立在前面选择器已经选择到的元素的基础之上。 语法：selector:过滤器
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //匹配索引值为偶数的元素（索引值从0开始计数）
$("li:odd") //匹配索引值为奇数的元素（索引值从0开始计数）
$("li:eq(4)") //匹配索引值为4的元素（索引值从0开始计数）也就是第五个元素
$("li:gt(2)") //匹配索引值大于 2 的li
$("li:lt(2)") //匹配索引值小于 2 的li
$("li:not(#test)") //匹配除 id="test" 以外的所有li
$("div:animated") //匹配正在执行动画的div元素
$("div:focus") //匹配当前获得焦点的div元素
可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
属性过滤选择器
$("input[name]") //匹配所有含有name属性的input元素
$("div[id]") //匹配所有含有 id 属性的 div 元素
$("div[id='123']") // 匹配id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //选择含有id属性且name属性以man结尾的input元素
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //匹配所有的单行文本框，推荐使用$("input:text")效率更高，下同
$("input:password") //所有密码框
$("input:radio") //所有单选按钮
$("input:checkbox") //所有复选框
$("input:submit") //所有提交按钮
$("input:reset") //所有重置按钮
$(":button") //所有button按钮（<input type=”button”>&&<button></button>）
$("input:file") //所有文件域
$("input:hidden") //匹配所有type=“hidden”的元素
状态过滤选择器（针对表单）
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
:checked 选取所有被选中的元素，用于复选框、单选框、下拉框
:selected 选取所有被选中的元素，该选择器只适用于<option>
:focus 选取当前获取焦点的元素
:text 选取所有的单行文本框(<input type="text">)
:password 选取所有的密码框
:input 选取所有的<input>,<textarea>,<select>,<button>元素。
*注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。*
:enable 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
:disable 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的input类型为image的表单元素
:reset 选取所有的input类型为reset的表单元素
:button 选取所有的input类型为button的表单元素
:file 选取所有的input类型为file的表单元素
jquery基本语法
$(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
$("p").hide()
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
JQuery事件
下面是 jQuery 中事件方法的一些例子：
Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery Fading方法
fadeIn() //用于淡入已隐藏的元素
fadeOut() //用于淡出可见元素
fadeToggle() //fadeIn()与fadeOut() 之间的切换，括号里可以加入时间来显示和隐藏的速度；
fadeTo() // 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
jQuery滑动
slideDown()方法用于向下滑动元素。$(selector).slideDown(speed,callback);
slideUp() 方法用于向上滑动元素。语法：$(selector).slideUp(speed,callback);
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。$(selector).slideToggle(speed,callback);
jQuery中的Dom操作
1、查找节点
通过jQuery选择器来完成
2、创建节点
创建元素节点：var newTd = $("<td></td>")
创建文本节点：var newTd = $("<td>文本内容</td>")
3、插入节点
（1）$A.append(B)
将B追加到A的末尾处，作为它的最后一个子元素
（2）$A.appendTo(B)
将A追加到B的末尾，作为它的最后一个子元素
（3）prepend()
$A.prependTo(B)
将A追加到B的前面，作为它的第一个子元素
$A.after(B)
在A之后追加B，作为它的兄弟元素
$A.insertAfter(B)
在B之后追加A，作为它的兄弟元素
$A.before(B)
在A之前追加B，作为它的兄弟元素
$A.insertBefore(B)
在B之前追加A，作为它的兄弟元素
4、删除节点
remove([selector])
从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。
该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
detach([selector])
与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。
empty()
无参数。从DOM中清空集合中匹配元素的所有的子节点。
5、复制节点
$("#id").clone(false);
该方法返回的是一个节点的引用，参数默认为false，为浅复制；
参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。
6、替换节点
replaceWith(newContent);
用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。
该方法会删除与节点相关联的所有数据和事件处理程序。
replaceAll(target);
用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。
7、包裹节点
wrap([wrappingElement])
在每个匹配的元素外层包上一个html元素
warpAll([wrappingElement])
将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包裹一层HTML结构
warpInner([wrappingElement])
每个匹配元素里面内容(子元素)都会被这种结构包裹
8、节点遍历
children([selector])
用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素)
$('.content.inner')=>$('.content').children('.inner');
find(selector)
在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素
next([selector])
取得匹配的元素集合中每一个元素紧邻的后面兄弟元素
nextAll([selector])
查找当前元素之后所有的同辈元素
prev([selector])
取得匹配元素前面紧邻的兄弟元素
prevAll([selector])
取得当前元素之前所有的同辈元素
silibinng([selector])
取得匹配元素的前后所有的兄弟元素
closest(selector)
取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素
filter(selector)
把当前所选择的所有元素再进行筛选过滤
parent([selector])
取得匹配元素的集合中，每个元素的父元素
parents([selector])
获得集合中每个匹配元素的祖先元素
jQuery的事件和API
一、事件
on()
在选定的元素上绑定一个或多个事件处理函数。
off()
移除一个事件处理函数。
trigger()
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
二、鼠标事件
click() 单击
dblclick() 双击
hover() 悬停
mousedown() 按下
mouseup() 抬起
mouseenter() 移入 不支持子元素
mouseleave() 离开 不支持子元素
mouseout() 离开 支持子元素
mouseover() 进入 支持子元素
mousemove() 移动
三、键盘事件
keypress() 按键按下
keyup() 按键抬起
keydown() 按键按下
四、表单事件
focus() 聚焦事件
blur() 失去焦点事件
change() 当元素的值发生改变时激发的事件
select() 当textarea或文本类型的input元素中的文本被选择时触发的事件
submit() 表单提交事件，绑定在form上
五、jQuery中常用的API
1、.jQuery中的html(),text(),val()方法
html()
无参：获取html的值
有参数html：设置html的值
text()
无参：获取文本值
有参数text：设置文本值
val()
无参：获取value的值
有参数value：设置value的值
2、jQuery中的工具方法
（1） get(); //以数组的形式返回DOM节点。
console.log($('div').get());
（2） toArray(); //返回一个包含jQuery对象结合中的所有DOM元素数组。
console.log($('div').toArray());
（3） eq(index); //返回index位置上的jQuery对象。
console.log($('div').eq(1).get(0));
（4） filter(function(index,item){}); //过滤器函数，返回jQuery对象。
var $result = $('div').filter(function(index,item){
return index == 2;
});
（5） map(function(index,item){}); //用于获取或设置元素集合中的值。
var $result = $('div').map(function(index,item){
return $(item).html()
});
（6） each(function(index,item){}); //遍历一个jQuery对象。
$('div').each(function(index,item){
console.log(index,'--',item);
});
（7） slice(0,3); //截取
var $result = $('div').slice(0,3);
console.log($result.get());
});
（8） not()
（9） first()
（10） last()
（11） is()
（12） has()
3、jQuery中属性设置函数
//获取属性值
attr(key)
prop(key)
//删除属性
removeAttr(attributeName)
removeProp(propertyName)
//批量设置属性
css(key)
//添加类
addClass(className)
//判断有没有指定的类，有，返回true，否则返回false
hasClass(className)
//删除类
removeClass(className)
jQuery中的动画
一、jQuery样式相关方法
宽度 = width + 2padding + 2border + 2margin
//获取视口区的宽高：
1、$(window).height()
2、$(window).width()
//获取内容区的宽高：
$('div').width();
$('div').height();
//获取内容+padding区的宽高：
3、$('div').innerHeight()
4、$('div').innerWidth()
//获取内容+padding+border区的宽高：
5、$('div').outerHeight()
6、$('div').outerWidth()
//获取内容+padding+border+margin区的宽高：
$('div').outerWidth(true);
$('div').outerHeight(true);
//获取相对于文档的偏移
7、.offset()
//获取相对于定位父元素的偏移
8、.position()
//横向滚动条左侧的偏移
9、.scrollLeft()
//横向滚动条上侧的偏移
10、.scrollTop()
//获取离它最近的父定位元素
11、.offsetParent()
二、效果
1.基本效果
（1）隐藏 hide()
（2）显示 show()
（3）隐藏与显示 toggle()
2.淡入淡出效果
（1）淡入 fadeIn()
（2）淡出 fadeOut()
（3）淡入到 fadeTo()
（4）淡入与淡出 fadeToggle()
3.滑动效果
（1）滑下 slideDown()
（2）滑上 slideUp()
（3）滑上与滑下 slideToggle()
4.自定义效果
animate()
来源：CSDN
作者：ℳ๓唯一ℳ
链接：https://blog.csdn.net/qq_43707633/article/details/104346665