jQuery基础

jquery

是一个js库，里面封装好了很多的api，我们直接调用就可以

特点

· 强大的选择器

· 出色的 DOM 操作的封装

· 可靠的事件处理机制

· 完善的 Ajax

· 不污染顶级变量

· 出色的浏览器兼容性

· 链式操作方式

· 隐式迭代

· 行为层与结构层分离

· 丰富的插件支持

· 完善的文档

· 开源

jquery入口函数

原生js window.onload

jquery: $(document).ready(function(){});

特点：也是会等待dom加载完毕后执行

–	window.onload	$(document).ready()
执行时间	必须等待网页中所有的内容加载完毕（）包括图片才执行	只需要 DOM 加载完就执行（不包括图片等）
编写个数	不能同时编写多个	能同时编写多个
简化写法	无	$(document).ready(function(){}) 可以简写成 $(function(){})

jquery工厂函数

$()

jQuery()

原生：dom对象 只能用 dom的属性和方法

jquery中：提供了jquery对象(将dom对象，封装成jquery对象)，就可以使用jquery提供的属性和方法了

作用：

​ 工厂函数可以将dom对象转化成jquery对象

​ 还可以当做入口函数来使用，传一个回调函数 $(function(){})

​ 动态创建jquery对象

​ 工厂函数调用 参数传 css选择器 直接获取的就是jquery对象的元素

dom对象和jquery对象 之间的属性和方法是不能相互使用的

总结：jquery对象和dom对象之间的相互转换

​ dom转jquery

​ 直接将dom对象放入工厂函数中

​ jquery转dom

• ​ jquery对象[0]
• ​ jquery对象.get(0)

jquery 绑定事件

jquery对象.事件名(回调函数)

$("button").click(function(){
	//code
})

基本选择器

选择器	描述	返回
#id	根据给定的 ID 匹配一个元素	单个元素
.class	根据给定的类名匹配一个元素	集合元素
element	根据给定的元素名匹配一个元素（相当于 tagName ）	集合元素
*	匹配所有元素	集合元素
select1,select2,select3	将每一个选择器匹配到的元素合并后一起返回	集合元素

层次选择器

选择器	描述	返回
ancestor descendant(空格)	选取 ancestor 元素里所有的 descendant（后代）元素	集合元素
parent > child	选取子元素	集合元素
prev + next	选取紧接在 prev 元素后面的 next 元素	集合元素
prev ~ siblings	选取 prev 元素之后的所有 siblings 元素	集合元素

过滤选择器**（结合普通选择器来使用）**

选择器	描述	返回
:first	选取第一个元素	单个元素
:last	选取最后一个元素	单个元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素
:even	索引为偶数（索引从 0 开始）	集合元素
:odd	索引为奇数（索引从 0 开始）	集合元素
:eq(index)	索引等于 index 的元素（index 从 0 开始）	单个元素
:gt(index)	索引大于 index	集合元素
:lt(index)	索引小于 index	集合元素
:header(index)	所有的标题元素 h1、h2、h3 等	集合元素
:animated	正在执行动画的所有元素 必须式jq动画	集合元素
:focus	当前获取焦点的元素	集合元素

内容过滤选择器

选择器	描述	返回
:contains(text)	文本中含有 “text” 的元素	集合元素
:empty	不包含子元素或者文本的 空元素	集合元素
:has(selector)	含有选择器所匹配的元素	集合元素
:parent	含有子元素或文本	集合元素
:hidden	选取所有不可见的元素	集合元素
:visible	选取所有可见的元素	集合元素

属性过滤选择器

选择器	描述	返回	示例
[attribute]	拥有此属性的元素	集合元素	$(“div[id]”) 选择所有拥有 id 属性的 div
[attribute=value]	属性的值为 value 的元素	集合元素	$(“div[tittle = test]”) 属性 title 为 test 的 div
[attribute!=value]	属性的值不为 value 的元素	集合元素	$(“div[tittle != test]”) 属性 title 不为 test 的 div
[attribute^=value]	属性的值以 value 开始的元素	集合元素	$(“div[tittle^ = test]”) 属性 title 以 test 开始的 div
[attribute$=value]	属性的值为 value 结束的元素	集合元素
[attribute*=value]	属性的值含有 value 的元素	集合元素
[attribute~=value]	属性的用空格分隔的值中包含一个给定的 value	集合元素
[attribute][attrubute][attribute]	用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围	集合元素

子元素过滤选择器

选择器	描述	返回
:nth-child(index/even/odd/equation)	选取每个父元素下的第 index 个子元素或者奇偶元素（index 从 1 开始）	集合元素
:first-child	选取每个父元素第一个子元素	集合元素
:last-child	选取每个父元素最后一个子元素	集合元素
:only-child	如果某个元素是它父元素中唯一的子元素，则会被匹配	集合元素

表单过滤选择器

选择器	描述	返回
:enabled	选取所有可用元素	集合元素
:disable	选取所有不可用元素	集合元素
:checked	选取所有被选中元素（复选框、单选框）	集合元素
:selected	选取所有被选中元素（下拉列表）	集合元素

表单选择器

选择器	描述	返回
:input	选取所有的	集合元素
:text	选择所有单行文本框	集合元素
:password	选择所有的密码框	集合元素
:radio	选择所有的单选框	集合元素
:checkbox	选择所有的多选框	集合元素
:submit	选择所有的提交按钮	集合元素
:image	选择所有的图像按钮	集合元素
:reset	选择所有的重置按钮	集合元素
:button	选择所有的按钮	集合元素
:file	选择所有的上传域	集合元素
:hidden	选择所有的不可见元素	集合元素

:hidden选择器：匹配所有的隐藏元素 display:none 隐藏域 (input type=“hidden”)

筛选方法

.eq(n) 获取下标为n的元素 -->:eq(n)

.first() 获取第一个元素 -->:first

.last() 获取最后一个元素 -->:last

.filter(选择器) 过滤的意思 过滤条不符合条件的 元素

.is(“选择器”) 判断 判断某个元素 是否复合条件

​ $(“选择器”).is(":hidden") 判断一个元素是否隐藏

.has(选择器) 获取有指定后代的元素 --> :has()

.not(选择器) 排除复合条件的元素，得到其他的 -->:not()

.slice(starti,endi+1) 得到 元素集合的子集 含头不含尾

.children() 获取所有的子元素

.find(“选择器”) 从当前元素的后代元素中找到 复合条件的 后代元素

.next() 下一个兄弟

.prev() 上一个兄弟

.nextAll() 后面的所有的兄弟

.prevAll() 前面的所有的兄弟

.siblings() 所有的兄弟

.index() 一般用于 事件中 获取当前元素所在的下标（跟平辈兄弟中的下标）

.parent() 获取唯一的父元素

.parents([选择器]) 如果不传 获取所有的祖先元素 传 获取符合条件的祖先元素

.end()回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

jquery 类dom操作

1. 创建一个元素

   var div = $(“

   我是div
   ”)

   结果：就是jquery对象，可以使用jquery的属性和方法的、

2. 插入

   内部插入

   • 父元素.append(子元素) 子元素 是jquery对象 作为最后一个子元素插入
   • 子元素.apppendTo(父元素) 作为最后一个子元素插入
   • 父元素.prepend(子元素) 作为第一个子元素插入
   • 子元素.prependTo(父元素) 作为第一个子元素插入

   外部插入

   • b.insertAfter(a) 将b插入到a后面
   • a.after(b) 将b插入到a后面
   • b.insertBefore(a) 将b插入到a的前面
   • a.before(b) 将b插入到a的前面

3. 删除一个元素

   元素.remove()

4. empty() 清空所有的内容让当前元素变成 空的元素

5. 复制元素

   clone([true])

6. css()

   • 元素.css(“样式名”,“样式值”)

   • 元素.css({

     ​ 样式1:值1,

     ​ 样式2:值2

     });

7. attr() 获取和设置元素的属性

   设置：

   ​ 元素.attr(“属性名”,“属性值”)

   获取

   ​ 元素.attr(“属性名”)