jQuery入门

jQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户可以更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，可以极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优点

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，好比要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再好比要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操做能够把多个操做写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操做css的代码，而且代码的可读性也比js要强。
5. Ajax操做支持。jQuery简化了AJAX操做，后端只需返回一个JSON格式的字符串就能完成与前端的通讯。
6. 跨浏览器兼容。jQuery基本兼容了如今主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，而且用jQuery插件作出来的效果很炫，而且能够根据本身须要去改写和封装插件，简单实用。

 

jQuery内容

选择器

筛选器

样式操做

文本操做

属性操做

文档处理

事件

动画效果

插件

each，data，Ajax

jQuery版本

• 1.x：兼容IE678,使用最为普遍的，官方只作BUG维护，功能再也不新增。所以通常项目来讲，使用1.x版本就能够了，最终版本：1.12.4 (2016年5月20日)
• 2.x：不兼容IE678，不多有人使用，官方只作BUG维护，功能再也不新增。若是不考虑兼容低版本的浏览器可使用2.x，最终版本：2.2.4 (2016年5月20日)
• 3.x：不兼容IE678，只支持最新的浏览器。须要注意的是不少老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，通常咱们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减小，PC端用户已经逐步被移动端用户所取代，若是没有特殊要求的话，通常都会选择放弃对678的支持。

jQuery对象

 

jQuery对象就是经过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。若是一个对象是 jQuery对象，那么它就可使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

至关于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，可是 jQuery对象没法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，咱们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对象
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

 

jQuery基础语法

$(selector).action()

查找标签

基本选择器

id选择器：

$('#id')

标签选择器：

$('tagName')

配合使用：

$('div.c1')//找到有c1类的div标签

全部元素选择器；

$('*')

组合选择器：

$('#id, .className, tagName')

层级选择器：

x和y能够为任意选择器

$('x y');//x的全部后代y（子子孙孙）
$('x+y')//找到全部儿子y（儿子）
$('x+y')//扎到全部紧挨在x后面的y
$('x~y')//x以后全部的兄弟y

 

基本筛选器

:first //第一个

:last //最后一个

:eq(index)//索引等于index的那个元素

:even  //匹配全部索引值为偶数的元素，从0开始计数

：odd//  匹配全部索引值为奇数的元素，从0开始计数

：gt（index） //匹配全部大于给定索引值得元素

：lt（index） //匹配全部小鱼给定索引值的元素

：not(元素选择器)// 移除全部知足not条件的标签

：has（元素选择器）// 选择全部包含一个或多个标签在其内的标签（指的是从后代元素找）

例子：

$("div:has(h1)")// 找到全部后代中有h1标签的div标签
$("div:has(.c1)")// 找到全部后代中有c1样式类的div标签
$("li:not(.c1)")// 找到全部不包含c1样式类的li标签
$("li:not(:has(a))")// 找到全部后代中不含a标签的li标签

属性选择器：

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

表单筛选器：

:text
:password
:file

:radio
:checkbox

:submit
:reset
:button

例子：

$(':checkbox')// 找到全部的checkbox

表单对象属性：

:enabled
:disabled
:checked
:selected

筛选器方法

下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的全部的父辈元素
$("#id").parentsUntil() // 查找当前元素的全部的父辈元素，直到遇到匹配的那个元素为止。

兄弟和儿子元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找

搜索全部与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出于指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类

补充：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

 

操做标签

样式操做

样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，若是有就移除，若是没有就添加。

示例：开关灯和模态框

 

css

css("color","red")//  DOM操做：tag.style.color="red"

 

示例：

$("p").css("color","red");//将全部p标签的字体设置为红色

位置操做

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法容许咱们检索一个元素相对于文档（document）的当前位置。

和 .position()的差异在于： .position()是相对于相对于父级元素的位移。

 

尺寸：

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操做

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置全部匹配元素的html内容

文本值：

text()// 取得全部匹配元素的内容
text(val)// 设置全部匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置全部匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

例如：

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

 

属性操做

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为全部匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为全部匹配元素设置多个属性值
removeAttr()// 从每个匹配的元素中删除一个属性

• 对于HTML元素自己就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素咱们本身自定义的DOM属性，在处理时，使用attr方法。

 

文档处理

添加到指定元素内部的后面

$(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的前面

移除和清空元素

remove()// 从DOM中删除全部匹配的元素。
empty()// 删除匹配的元素集合中全部的子节点