jQuery入门专题
本人博客特点：最高重要等级为*****（五红星），依次减少代表重要性相对较低！
一、jQuery简介
jQuery 是一个 JavaScript的一个库，也就是说jQuery是基于JavaScript框架开发出来的。其目的是为了最大化的简化了JavaScript书写方式。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种更为简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。———本段来自网络
二、jQuery内容
1. 查找标签（选择器）
2. 筛选器
3. 操作标签
3.1. 样式操作
3.2. 位置操作
3.3. 文本操作
3.4. 属性操作
3.5. 文档操作
4. 事件
5. 动画
6. 插件
三、jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。按平时的使用来说，只能是jQuery对象，才能使用jQuery里面的方法【因为，平时在写一个js脚本的时候，里面可能有js原生的东西，也可能会有jQuery的一些语法一起使用（这里涉及的到JavaScript和jQuery之间的相互转换，下面内容会提到） 】。jQuery的方法是用例子如：$( "#nav" ).html()。
“ $( "#nav" ).html() ; ”这一句的代码分析：在这里的 $( "#nav" )就是jQuery对象（也就是点的左边），而点的右边html()就是jQuery对象的方法。这句话的意思是：获取id值为nav的标签（元素）的html代码。
注意：如果html里面有内容，例如: $( "#nav" ).html("<p>555</p>")的意思就不是获取nav标签的html代码了，而是变成了，将nav标签里面的所有html全部被替换成<p>555</p>，这个是涉及到操作方法，下面会有细讲，这里只是做个对比，抱砖引玉而且。
与原生JavaScript对比： “$( "#nav" ).html() ; 相当于原生js的 document.getElementById("nav").innerHTML;
虽然jQuery对象是通过包装DOM对象后生成的，但是jQuery对象的是无法直接使用DOM对象的任何方法，同样DOM对象也无法直接使用jQuery对象的任何方法。（这里也涉及的到JavaScript和jQuery之间的相互转换，下面内容会提到）
大家的约定：当我们要声明一个jQuery对象的变量的时候要在变量的前面加入$符号：例如
var $run = jQuery对象
var run = DOM对象
JavaScript和jQuery之间的相互转换：
拿上面的例子来说：
jQuery对象：$( "#nav" )
DOM对象：document.getElementById("nav")
1. jQuery对象转换成DOM对象：$( "#nav" )[0] ***********************************************************在jQuery对象添加一个索引，即可变成了DOM对象（因为jQuery对象获取到的标签是一个数组）
2. DOM对象转换成jQuery对象：$(document.getElementById("nav"))或者 $($( "#nav" )[0] ) ******在DOM对象的外面添加 $() 就可以jQuery对象
四、jQuery基础语法
jQuery语法是通过选取（查找）HTML元素，并随之对已选取到的元素执行某些操作。
基础语法：$(selector).action()
- selector：选择符。”查询“和”查找”HTML文档里面的元素。
实例：
五、jQuery查找标签（选择器）
5.1 基本选择器
5.1.1 id选择器：
5.1.2 标签选择器：
5.1.3 class（样式类）选择器：
5.1.4 配合使用：
- $("div.main_class")
或者
- $("div#main_class")
5.1.5 通用选择器：
5.1.6 组合选择器：
- $("#main_id,.nav_class,div.main_class")
5.2 层级选择器
x, y可以为任意选择器，x，可以调换。
- $("x y") //x的所有后代y
- $("x>y") //x的所有儿子y
- $("x+y") //所有紧挨在x后台的y
- $("x~y") //x的所有兄弟y
5.3 基本筛选器
5.3.1 常用的筛选器：
- //div表示选择器，这里可以是任意选择器。例如;div、#main ul li、x~y等等
$("div:first") //第一个
$("div:last") //最后一个
$("div:eq(index)") //索引等于index的那个元素
$("div:even") //比配所有索引值为偶数的元素，从0开始计数
$("div:odd") //比配所有索引值为奇数的元素，从0开始计数
$("div:gt(index)") //比配所有大于给定索引值的元素
$("div:lt(index)") //比配所有小于给定索引值的元素
$("div:not(元素选择器)") //移除所有满足not条件的标签
$("div:has(元素选择器)") //选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
-
例子：
- $("div:has(h1)")// 找到所有后代中有h1标签的div标签
- $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
- $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
- $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
练习：
未更新
5.4 属性选择器
- attribute：”属性“的意思。
- [attribute]
- [attribute=value]// 属性等于
- [attribute!=value]// 属性不等于
-
例子：
- <input type="text">;
- <input type="password">;
- <input type="button">;
- //应用
- $("input[type='text']");
- $("input[type='password']"); // 取到password类型的input标签
- $("input[type!='button']");// 取到类型不是button的input标签
5.5 表单选择器
分为两组来记，第一组（五个），第二组（三个，都是按钮）
- :text //例子：$(":text ") 找到表单中的所有text
- :password //例子：$(":password") 找到表单中的所有password
- :checkbox //例子：$(":checkbox") 找到表单中的所有checkbox
- :radio //例子：$(":radio")
- :file //例子：$(":file")
- :submit //例子：$(":submit")
- :reset //例子：$(":reset")
- :button // 例子：$(":button ")
通过属性找到对应的标签(4个)：
- :enabled //标签可用属性
- :disabled //标签可用属性
:checked
:selected
例子：
1.找到可用的input标签
- <form>
- <input name="username" disabled="disabled">
- <input name="id" />
- </form>
- $("input:enabled") // 找到可用的input标签
2.找到被选中的option：
- <select id="s1">
- <option value="beijing">北京市</option>
- <option value="shanghai">上海市</option>
- <option selected value="guangzhou">广州市</option>
- <option value="shenzhen">深圳市</option>
- </select>
- $(":selected") // 找到所有被选中的option
六 jQuery筛选器
6.1 找下一个元素：
- $("#nav").next();
- $("#nav").nextAll();
- $("#nav").nextUntil("#id");
6.2 找上一个元素：
-
- $
- ("#nav").prev();
$("#nav").prevAll(); - $("#nav").prevUntil("#id");
6.3 找父亲元素：
- $("#nav").parent();
- $("#nav").parents(); //查找当前元素的所有父辈
- $("#nav").parentsUntil("#id"); //查找当前标签的所有父辈，直到找到ID值为id的父辈元素
6.4 找儿子和兄弟元素：
- $("#nav").children(); //查找当前元素下面的所有儿子们
- $("#nav").siblings(); //查找与当前元素是兄弟（同级）们
6.5 查找方法（ .find() ）：
搜索当前元素的指定后代元素的方法。这个方法是找出正在处理的元素的后代的好方法。
- $("div").find("p"); //这句话等价于 $("div p");
6.6 筛选方法（ .filter() ）：
筛选出与filter方法括号内表达式匹配的元素集合。这个方法可以很好的缩小匹配范围，filter方法括号内的选择器表达式可以是多个，逗号分隔即可。跟组合选择器一样。
- $("div").filter(".c1") // 从div结果集中过滤出有c1样式类 这句话等价于 $("div.c1")
6.7 几个筛选器和筛选方法的对比：
- .first() // 获取匹配的第一个元素 筛选器: :first
- .last() // 获取匹配的最后一个元素 筛选器: :last
- .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 筛选器: :not(元素选择器)
- .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 筛选器: :has(元素选择器)
- .eq() // 索引值等于指定值的元素 筛选器: :eq(index)
两个不同点：
1.筛选方法前面是点“.“，筛选器是冒号”:”
2.筛选方法后面有小括号，筛选器则是没有
例子：
待更新………………
七、jQuery操作标签
7.1 样式类名操作
- addClass(“类名”); // 添加括号里指定的类名
- removeClass(“类名”); //移除括号里的css类名
- hasClass("类名")； //判断样式是否存在
- toggleClass("类名"); //切换css类名，如果有类名就移除，反子就添加
示例：
正则更新中………………
7.2 位置操作
- offset() //获取匹配元素在当前窗口(window)的相对位置或设置元素的位置
- position() //获取匹配元素相对父元素的偏移
- scrollTop() //获取匹配元素相对滚动条顶部的偏移
- scrollLeft() //获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
示例：
正则更新中………………
7.3 文本操作
7.3.1 HTML代码：
- html() //取得第一个元素的html内容
- html(val) 设置所有匹配的惠特米勒内容
7.3.2 文本代码：
- text() // 设置所有匹配元素的内容
- text(val) // 设置所有匹配元素的内容
7.3.3 设置值：
- $("[name = ''hobby]").val(['basketable','foontball'])
- $("#s1").val (["1", "2"])
例子：
获取被选中的checkbox或者radio。
- <label for="c1">女</label>
- <input name="gender" id="c1" type="radio" value="0">
- <label for="c2">男</label>
- <input name="gender" id="c2" type="radio" value="1">
使用示例：
- $("input[name='gender']:checked").val()
7.3.4 值：
- val()// 取得第一个匹配元素的当前值
- val(val)// 设置所有匹配元素的值
- val([val1, val2])// 设置多选的checkbox、多选select的值
示例：
正则更新中………………
7.3.5 属性操作
7.3.6 文档处理
7.3.7 尺寸
八、jQuery事件
九、jQuery动画
十、jQuery插件
经验首页