JQuery学习小结
JQuery学习小结
在最近的学习过程中，在已经学习过CSS3和JavaScript的基础下，我接触到了一门轻量级的脚本语言——JQuery。
这是一门名副其实的语言，真正的可以让我们写的少而做的多。它将许多的功能都进行了封装，统一了调用的方法，使其便捷性得到了很大的提升，成为一门程序员不可或缺的语言。
一、JQuery的下载
1、登入JQuery的官方网站下载开发使用的文档：http://jquery.com/
点击DownloadJQuery，跳转
选择下载压缩过的JQuery文档，点击下载
2、JQuery的导入
1、在项目工程中建立一个JS文件夹
2、将已下载好的JS文件移动到该文件夹中
3、在编写页面代码时，在写自己的JavaScript之前，导入JQuery
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //编写自己的代码 </script> </head> <body> </body> </html>
3、JQuery的使用
1、JQuery工厂函数
书写格式：$()
在jQuery中，无论我们使用哪种类型的选择符（不管是CSS，还是自定义的选择符），都要从一个美元符号和一对圆括号开始：$()
在jQuery中，美元符号$只不过是对标识符jQuery的一种简写方式。由于$()在JavaScript库中很常见，所以，如果在一个页面中使用了几个这样的库，那么就会导致冲突。
在这种情况下，可以在我们自定义的jQuery代码中，通过将每个$的实例替换成jQuery来避免这种冲突
2、JQuery选择器
| 选择器 | 实例 | 选取 |
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| form input | $("form input") | form里面的input |
| form>input | $("form>input") | form里面的input（子元素） |
| span+input | $("span+input") |
层次选择器__$(a+b) |
| span~input | $("span~input") |
层次选择器__$(a~b) 相邻同辈,同辈就行，不需要紧邻 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
3、JQuery对象与document对象相互转换
如果获取到的对象是JQuery对象，那么在变量前加$
var $variable = jQuery对象;
如果获取到的是DOM对象，则定义如下：
var variable = DOM对象;
1、jQuery ==> DOM
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，既[index]、和get(index)。
(1)、jQuery对象是类似于一个数组对象，我们通常叫做包装集，所以可以通过下标的形式访问数组中的某个元素，从而得到相应的DOM对象
var $div = $("div");
var div = $div[0];
alert(div.innerHTML);
(2)、另一种方法是jQuery自身提供的，通过get(index)方法得到相应的DOM对象
var $div = $("div");
var div = $div.get(0);
alert(div.innerHTML);
2、DOM ==> jQuery
对于一个DOM对象，只需要用$()把DOM对象给包装起来，$()就是jQuery中的工厂方法，通过这个方法可以把DOM对象转换成jQuery对象
var div = document.getElementById("id");
var $div = $(div);
转换后，可以任意使用jQuery中的方法。
通过以上的方法，可以任意的转换jQuery对象和DOM对象
4、JQuery对象的方法
.css() : 对JQuery对象的CSS属性进行修改
.text() : 获取或更改JQuery对象的文本
.length : 获取该JQuery对象的数量
.html() : 获取或更改该JQuery对象中的网页代码
.val() : 获取或更改value值
.attr() : 获取或更改某对象的具体值
.append() : 在JQuery对象后追加代码
.clone() : 克隆JQuery对象的代码
.not() : 在JQuery对象中移除指定的对象
.filter() : 在JQuery对象中筛选出指定的对象
.slice(index,index) : 在JQuery对象中获取指定范围的对象
.each() : 遍历JQuery对象
浙公网安备 33010602011771号