本文将介绍 jQuery 的基本用法和基础知识。

一、jQuery 语法

1. 基础语法

$(选择器).事件(动作)

例如：

点击所有的 p 之后，弹出警告框。

$("p").click(function() {
	alert("1");
})

2. 文档就绪函数

$(document).ready(function(){ 代码块 });

这样的做法能够防止在文档完全加载之前运行 jQuery 代码。

​

二、jQuery 选择器

$("选择器")

选择器的格式为 CSS 的选择器。

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 p 元素
$(“p.intro”)	所有 class=”intro” 的 p 元素
$(“.intro”)	所有 class=”intro” 的元素
$(“#intro”)	id=”intro” 的元素
$(“ul li:first”)	每个 ul 的第一个 li 元素
$(“[href$=’.jpg’]”)	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=”intro” 的 div 元素中的所有 class=”head” 的元素

​

三、jQuery 事件

Event 函数	绑定函数至
$(document).ready(function)	当文档完成加载时
$(selector).click(function)	当被选元素被点击时
$(selector).dblclick(function)	当被选元素被双击时
$(selector).focus(function)	当被选元素获得焦点时
$(selector).mouseover(function)	当鼠标放置在被选元素之上时

​

四、jQuery 效果

1. 显示和隐藏

(1) show()

用于显示元素。

(2) hide()

用于隐藏元素。

(3) 可选参数

$(选择器).show(speed, callback);
$(选择器).hide(speed, callback);

• speed：用于规定显示/隐藏的速度
• callback：回调函数，即函数执行完后再调用的函数

(4) toggle()

用于在显示和隐藏之间切换。

2. 淡入淡出

(1) fadeIn()

用于淡入已隐藏的元素。

带有可选参数 speed 和 callback

(2) fadeOut()

用于淡出可见元素。

带有可选参数 speed 和 callback

(3) fadeToggle()

用于在淡入和淡出之间切换。

(4) fadeTo()

此方法用于渐变为指定的透明度。

$(选择器).fadeTo(speed, opacity, callback);

• speed：用于规定显示/隐藏的速度
• opacity：指定的透明度
• callback：回调函数，即函数执行完后再调用的函数

3. 滑动

(1) slideDown()

用于向下滑动元素。

带有可选参数 speed 和 callback

(2) slideUp()

用于向上滑动元素。

带有可选参数 speed 和 callback

(3) slideToggle()

用于在向上滑动和向下滑动之间切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() 。

4. 动画

(1) animate()

animate() 用于创建自定义动画。

$(选择器).animate({params}, speed, callback)

• params：用于定义形成动画的 CSS 属性
• speed：用于规定显示/隐藏的速度
• callback：回调函数，即函数执行完后再调用的函数

(2) params

可以同时设置多条 CSS 属性：

$("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
}, "slow");

可以使用相对值：

即相对于原属性的值。

$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
});

可以使用预定义的值：

可以将属性设置为 “show” 、“hide” 或 “toggle”

$("div").animate({
    height:'toggle'
});

(3) 队列功能

jQuery 会为动画列队，因此这些动画将会依次执行，而不会产生冲突。

5. stop()

用于在动画/效果完成之前停止它们。

6. Chaining

通过 Chaining ，可以在一条语句中为一个元素设置多个 jQuery 方法。

“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

​

五、jQuery HTML

1. 内容

(1) text()

返回或设置所选元素的文本内容。

返回所选元素的文本内容：
$(选择器).text();
设置所选元素的文本内容：
$(选择器).text(内容);

(2) html()

返回或设置所选元素的内容（包括 HTML 标记）。

(3) val()

返回或设置所选元素的表单字段值。

2. 属性

在 jQuery 中，用 attr() 方法获取属性值：

$(选择器).attr("属性名");

可以用 attr() 设置属性值：

设置单个属性：

$(选择器).attr("属性名", "属性值");

设置多个属性：

$(选择器).attr({
	"属性名" : "属性值",
	"属性名" : "属性值"
});

3. 添加元素

(1) append()

用于在被选元素的末尾插入内容。

(2) prepend()

用于在被选元素的开头插入内容。

(3) after()

用于在被选元素之后插入内容。

(4) before()

用于在被选元素之前插入内容。

4. 删除元素

(1) remove()

$("选择器").remove()

用于删除被选元素（其子元素也会被一并删除）。

此方法还可以接收参数，用于删除指定的元素：

$("选择器").remove(选择器)

例如：

删除 p 元素中 class 为 text 的元素：

$("p").remove(".text");

(2) empty()

$("选择器").empty()

用于删除被选元素的子元素。

5. 类

可以通过预先为类设置 CSS 样式，然后为需要设置的元素增加类名的方式，来方便地修改 CSS 样式。

.blue{
	color:blue;
}

<p class="blue">我想变成蓝色</p>

(1) addClass()

用于添加类。

$("选择器").addClass("类名")

(2) removeClass()

用于删除类。

$("选择器").removeClass("类名")

(3) toggleClass()

用于在添加类/删除类的操作之间切换。

6. CSS

(1) css()

css() 用于设置或返回被选元素的 CSS 样式。

(2) 返回 CSS 属性

$("选择器").css("属性名")

(3) 设置 CSS 属性

设置单个 CSS 属性：

$("选择器").css("属性名", "属性值")

设置多个 CSS 属性：

$("选择器").css("属性名":"属性值", "属性名":"属性值")

7. 尺寸

(1) width() 和 height()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）；

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

(2) innerWidth() 和 innerHeight()

innerWidth() 方法返回元素的宽度（包括内边距）；

innerHeight() 方法返回元素的高度（包括内边距）。

(3) outerWidth() 和 outerHeight()

outerWidth() 方法返回元素的宽度（包括内边距和边框）；

outerHeight() 方法返回元素的高度（包括内边距和边框）。

​

六、jQuery 遍历

1. 父

(1) parent()

返回元素的直接父元素。

(2) parents()

返回元素的所有父元素。

一路向上遍历，直至文档根元素

(3) parentsUntil()

$("选择器1").parentsUntil("选择器2")

返回元素 1 之上，元素 2 之下的所有元素。

2. 子

(1) children()

返回元素的所有直接子元素。

(2) find()

在元素的所有后代中筛选元素。

$("div").find("span");

在 div 的后代中筛选 span 。

$("div").find("*");

找到 div 的所有后代。

3. 兄弟

(1) siblings()

返回元素的所有兄弟元素。

(2) next()

返回被选元素的下一个兄弟元素。

(3) nextAll()

返回被选元素之后的所有兄弟元素。

(4) nextUntil()

$("选择器1").nextUntil("选择器2")

返回元素 1 之后，元素 2 之前的所有兄弟元素。

(5) prev(), prevAll() 和 prevUntil()

与之前的方法类似，只不过方向发生了变化。

4. 过滤

(1) first() 和 last()

返回被选元素中的首个/最后一个元素。

(2) eq()

返回被选元素中指定下标的元素。

(3) filter()

用于在被选元素中筛选符合条件的元素。

$("p").filter(".intro");

在 p 中删选带有 .intro 类的元素。

(4) not()

返回不符合标准的所有元素。

与 filter() 恰好相反。

​

七、兼容性问题

除了 jQuery 以外，许多 JavaScript 框架也会用到 $ 符号，这将会导致不同框架之间出现冲突问题。

1. noConflict()

(1) 不用简写

$.noConflict();

jQuery("p").text("jQuery 仍在运行！");

(2) 设置自己的简写

var jq = $.noConflict();

jq("p").text("jQuery 仍在运行！");

​

参考

• w3school 在线教程