jQuery总结（一）

• jQuery简介
• 功能
• 选择器
• jQuery方法总结
• 插入方法
• 内部插入方法
• 外部插入方法

jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。在早些时候，js还没有

document.querySelector()document.getElementsByClassName()

这些方法时，jQuery选择器的简洁性迅速被广大程序员所喜爱，其特有的链式操作也省去了很多的麻烦，但是由于前端框架vue，react，Angular的兴起，对jQuery造成了比较大的冲击，但是无论怎样jQuery都是前端开发人员的必备课程，所以在此总结一下jQuery的各种用法。

功能

1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美
7.基于 jQuery 大量插件
8.自行扩展功能插件

选择器

1.基本选择器，与css选择器相同，可以通过

$(\"#id\")//根据指定的id匹配元素 单个元素$(\".class\")//根据类匹配元素 集合元素$(\"tag\")//根据元素名匹配元素 集合元素$(\"*\")//选择所有元素 集合元素$(\"div,span,.hotclass\")//分组匹配元素 集合元素

返回一个jQuery对象，这里注意，只有jQuery对象才能使用jQuery的方法进行操作
2.层次选择器
与css选择器相同，这里不再过多阐述

$(\"E1 E2\")//选择E1下所有E2元素$(\"E1> E2\")//选择E1下面的直接E2元素$(\"E1+ E2\")//选择E1相邻的E2元素$(\"E1~E2\")//选择E1后面的所有E2元素

3.过滤选择器
可以通过选择器达到过滤的功能，可以选中我们需要的jQuery对象进行操作

$(\"E1:even\")//选择索引是偶数的所有元素$(\"E1:even:odd\")//	选择索引是奇数的所有元素$(\"E1:eq(index)\")//选择索引是index的元素，index从0开始$(\"E1:gt(index)\")//选择索引值大于index的元素$(\"E1:It(index)\")//选择索引值小于index的元素$(\"E1:header\")//选取所有的标题元素$(\"E1:animated\")//选择当前正在执行动画的所有元素 jQuery的动画$(\"E1:contains(text)\")//选择含有text文本内容的元素$(\"E1:empty\")//选择不包含子元素或文本的空元素$(\"E1:has(E2)\")//选择包含有(E2选择器匹配的元素) 的所有元素$(\"E1:parent\")//选择含有子元素或文本的元素$(\"E1:hidden\")//	选择所有不可见元素$(\"E1:visible\")//	选择所有可见的元素

4.表单选择器
表单选择器，顾名思义，可以匹配表单元素

$(\"E1:enabled\")//选择所有可用元素$(\"E1:disabled\")//	选择选择所有不可用元素$(\"E1:checked\")//选择选择所有被选中的元素(单选框,复选框)$(\"E1:selected\")//选择所有被选中的选项元素(下拉列表)$(\"E1:input\")//匹配所有<input> <textarea> <select> <button>元素$(\"E1:text\")//选择所有单行文本框$(\"E1:password\")//选择所有密码框$(\"E1:radio\")//选择所有单选框$(\"E1:checkbox\")//选择所有复选框$(\"E1:submit\")//	匹配所有提交按钮$(\"E1:image\")//匹配所有图像按钮$(\"E1:reset\")//	匹配所有重置按钮$(\"E1:button\")//匹配所有按钮$(\"E1:file\")//匹配所有文件域$(\"E1:hidden\")//匹配所有不可见元素

jQuery方法总结

插入方法

内部插入方法

1.在元素末尾添加元素

$(selector).append(content)

这里的selector代表被添加的元素，content为添加的元素，将调用这个方法的元素内添加另一个元素
还有一种方法为

$(content).appendTo(seletor)

与append方法不同的是，appendTo是将调用这个方法的元素添加到另一个元素内
append(function(index,html))(1.4新增格式）该方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对象
2.在元素开头添加元素

$(selector).prepend(content)$(content).prepend(seletor)

用法与append方法相同，这里不做过多阐述

外部插入方法

以下方法为在指定元素的相邻位置（之前或之后）上插入内容。
1.在元素之前插入元素

$(\"p\").after(\"<p>Hello world!</p>\") //该方法在匹配元素集合中的每个元素之后插入由参数指定的内容并返回jQuery对象$(\"<p>Hello world!</p>\").insertAfter($(\"p\"))//该方法在匹配元素集合中的每个元素插入到目标元素之后并返回jQuery对象

这两种方法与append和appendTo使用方法相同，但是是在外部添加，而且是添加在相邻的位置
2.在元素之后插入元素

$(\"p\").before(\"<p>Hello world!</p>\")//此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象$(\"<p>Hello world!</p>\").insertBefore($(\"p\"))//该方法在匹配元素集合中的每个元素插入到目标元素之前并返回jQuery对象

从这里可以看出，这些插入方法大同小异，都可以根据自己的习惯选择适合的方法。

获取方法

下列方法都可以获取并且设置
1.获取html内容

$(\"p\").html()//获取匹配元素集合中第一个元素的HTML内容并返回字符串$(\"p\").html(htmlstring)//根据传递的字符串来设置匹配集合中每个元素的HTML内容并返回jQuery对象$(\"p\").html(function(index,hmtl))//根据传递的函数来设置匹配元素集合中每个元素的HTML内容并返回jQuery对象

2.获取text内容

$(\"p\").text()//获取匹配元素集合中第一个元素的TEXT内容并返回字符串$(\"p\").text(textstring)//根据传递的字符串来设置匹配集合中每个元素的HTML内容并返回jQuery对象$(\"p\").text(function(index,text))//根据传递的函数来设置匹配元素集合中每个元素的HTML内容并返回jQuery对象

3.获取val内容

$(\"p\").val()//val()方法元素的值是通过 value 属性设置的。该方法大多用于input元素

4.is()方法

if ($(\"p\").parent().is(\"div\")) {alert(\"p 的父元素是 div\");}