jQuery快速入门专题
jQuery入门专题
本人博客特点：最高重要等级为*****（五红星），依次减少代表重要性相对较低！
一、jQuery简介
jQuery 是一个 JavaScript的一个库，也就是说jQuery是基于JavaScript框架开发出来的。其目的是为了最大化的简化了JavaScript书写方式。
二、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文档里面的元素。
- action：Query对元素的操作。
实例：
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏所有 id="test" 的元素
五、jQuery查找标签（选择器）
5.1 基本选择器
5.1.1 id选择器：
$("#main_id")
5.1.2 标签选择器：
$("div")
$("p")
$("img")
5.1.3 class（样式类）选择器：
$(".main_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 属性操作
用ID等标签，自定义属性：
attr(attrName) //返回第一个匹配元素的属性
attr(attrName,attrValue) //为所有匹配元素设置一个属性值
attr({k1:v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
值得注意：
在1.X和2.X版本的jQuery中使用attr对checkbox进行赋值操作的时候会有bug出现，但是在3.X版本的jQuery中则没有这个问题。为了解决这个问题，我们在除了checkbox和radio的时候最好使用prop()，不要使用attr("checked","checked").
<input type="checkbox" value="checkbox">
<input type="radio" value="radio">
<script>
$(":checkbox").prop("checked",true);
$(":radio").prop("checked",true);
</script>
prop()和attr()的区别：
attr的全称为attribute：属性。
prop的全称为property：也是属性。
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码，
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
7.3.6 文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
$(A).remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
示例正在更新^………………
7.3.7 尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
八、jQuery事件
常用事件
click(function(){………………}) //点击事情 hover(function(){………………}) // focus(function(){…………………}) //获得光标事件，当点击搜索框时，改变搜索框背景色 blur(function(){………………}) //失去光标事件，在输入域外面点击，使其失去焦点
change(function(){………………}) //在某个标签或者控件被使用或改变时，可以改变属性
keyup(function(){…………………}) //当按下按键时，改变文本域的颜色：
九、jQuery动画
十、jQuery插件
