jQuery笔记（完整详细版）
2018.9.17 星期⼀
jQuery
第⼀章 初识jQuery
第⼆章 jQuery的事件和API
第三章 jQuery中的动画
第⼀章初识jQuery
⼀、jQuery简介
1.什么是jQuery？
jQuery是⼀个优秀的JavaScript库，是⼀个凭借简洁的语法和跨平台的兼容性，极⼤地简化了JavaScript开发⼈员遍历HTML⽂档，操作DOM，执⾏动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.
2.常见的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.jQuery的使⽤⽅式
下载后引⼊
<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函数具有四种参数：
1）选择器（字符串）
jQuery函数通过该选择器获取对应的DOM，然后将这些DOM封装到⼀个⼈jQuery对象中并返回。
2）DOM对象（即Node实例）
jQuery函数将该DOM封装成jQuery对象并返回。
3）HTML⽂本字符串
jQuery函数根据传⼊的⽂本创建好HTML元素并封装成jQuery对象并返回。
$("<div class="one">one</div>");
4）⼀个匿名函数
$(function(){});
当⽂当加载完毕之后jQuery函数调⽤匿名函数。
4.jQuery对象
jQuery对象是jQuery函数的⼀个实例，是⼀个类数组对象，数组中存放的是DOM对象，⽽DOM对象是Node的实例。
对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。
jQuery对象的获取通常是使⽤选择器来获取的。⽐如，获取所有clss为one元素:$(".one");
四、jQuery选择器
1.基本选择器：
所有选择器  *
标签选择器标签名
ID选择器    #id
类选择器    .className
组选择器  .one,.two  多个选择器使⽤都好分隔，取并集
复合选择器  .one.two  多个选择器组合使⽤，取交集
2.层次选择器：
后代选择器  .one .two
两个选择器使⽤空格隔开，表⽰可以获取当前元素的⼦代以及孙⼦代等等后代元素。
⼦代选择器  .one>.two
两个选择器使⽤>隔开，表⽰只能获取当前选中元素的⼦代元素。
3.兄弟选择器：
下⼀个兄弟选择器  .one+.two
两个选择器使⽤+隔开，表⽰可以获取当前元素的下⼀个兄弟元素，下⼀个兄弟元素要能符合.two。
之后所有⼦代选择器  .one~.two
两个选择器使⽤~隔开，表⽰可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。
五、jQuery过滤器
jQuery的过滤器必须⽤在jQuery选择器后，表⽰对通过前⾯的jQuery选择器选择到的内容的过滤。是建⽴在前⾯选择器已经选择到的元素的基础之上。 语法：selector：过滤器
1.基本过滤器：
selector:first  获取所有已选择到的元素中的第⼀个元素
selector:last  获取所有已选择到的元素中的最后⼀个元素
selector:even    获取所有已选择到的元素中的索引为偶数的元素
selector:odd    获取所有已选择到的元素中的索引为奇数的元素
selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
selector:lt(num)  获取所有已选择到的元素中的索引值⼩于num的元素
selector:gt(num)  获取所有已选择到的元素中的索引值⼤于num的元素
selector1:not(selector2)  获取所有已选择到的元素中的除了selector2的元素
selector:header  获取所有已选择到的元素中的标题元素(h1~h6)
selector:contains(text)
获取所有已选择到的元素中⽂本包含text的元素
selector:empty
获取所有已选择到的元素中的空元素(没有⼦节点)
selector:parent
获取所有已选择到的元素中的⾮空元素(有⼦节点)，如$("div:parent");
selector1:has(selector2)
获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')");
3.可见性过滤器：
隐藏类型分两种：
1）不占据屏幕空间
display:none;
<input type="hidden">
2）占据屏幕空间
visibility:hidden;
opacity:0;//透明度为0
使⽤：
:visible  选择所有占据屏幕空间的元素
:
hidden    选择所有不占据屏幕空间的元素
4.属性过滤器：
selector[attrKey]
获取所有已选择到的元素中具有属性attrKey的元素
selector[attrKey=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
selector[attrKey^=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素
selector[attrKey$=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素
selector[attrKey*=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素
selector[attrKey!=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素5.后代选择器：
selector:nth-child(index)
获取每个selector元素中索引为index的⼦元素。【注意】index从1开始
selector:first-child
获取每⼀个selector元素中的第⼀个⼦元素（每个⽗元素的第⼀个⼦元素）
selector:last-child
获取每⼀个selector元素中的最后⼀个⼦元素（每个⽗元素的最后⼀个⼦元素）
selector:only-child
获取每⼀个selector元素中的独⽣⼦⼦元素（每个⽗元素如果只有⼀个孩⼦元素，获取该元素）
selector:first-of-type
获取每个selector元素中每种类型⼦元素中的第⼀个
selector:last-of-type
获取每个selector元素中每种类型⼦元素中的最后⼀个
6.表单过滤器：
: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中的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，作为它的兄弟元素
jquery在一个元素后追加标签$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()
根据绑定到匹配元素的给定的事件类型执⾏所有的处理程序和⾏为。
⼆、⿏标事件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。