本文详细介绍了jQuery的基础用法，包括选择器、事件处理、DOM操作、动画效果等核心功能，并提供了多种实用示例。
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
百度 CDN:
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
新浪 CDN:
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
菜鸟教程 CDN:
jQuery 语法
$(
selector
).
action
()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
文档就绪事件
$(function(){ // 开始写 jQuery 代码... });
$(this)
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first")
$("[href]")
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
常见 DOM 事件：
若div有自己的事件,也有委托事件,则会先执行委托事件,后执行自己的事件.
hide() 和 show() 方法来隐藏和显示 HTML 元素
$(
selector).hide(
speed,callback);
$(
selector).show(
speed,callback);
.可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
.可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
toggle() 方法来切换 hide() 和 show() 方法 显示被隐藏的元素，并隐藏已显示的元素
jQuery hover() 方法
$(
selector).hover(
inFunction,outFunction)
等同于：$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
等同于：$( selector ).on( "mouseover mouseout", handlerInOut );
jQuery Fading 淡入淡出效果
- fadeIn() 淡入已隐藏的元素
$(
selector).fadeIn(
speed,callback);
- fadeOut() 淡出可见元素
- fadeToggle() fadeIn() 与 fadeOut() 方法之间进行切换 淡出 淡入效果
- fadeTo() 渐变为给定的不透明度（值介于 0 与 1 之间）
- $("#div1").fadeTo("slow",0.15);
jQuery 滑动方法
- slideDown() 向下滑动元素
- slideUp() 向上滑动元素
- slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换
jQuery 效果- 动画
animate() 方法用于创建自定义动画。
$(
selector).animate({
params}
,speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){ $("div").animate({left:'250px'}); });
animate() - 操作多个属性
$
(
"button"
).
click
(
function
(){
$
(
"div"
).
animate
({
left
:
'250px'
,
opacity
:
'0.5'
,
height
:
'150px'
,
width
:
'150px'
});
});
animate() - 使用相对值
height
:
'+=150px'
,
width
:
'+=150px'
animate() - 使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$
(
"button"
).
click
(
function
(){
$
(
"div"
).
animate
({
height
:
'toggle'
});
});
animate() - 使用队列功能
$
(
"button"
).
click
(
function
(){
var
div
=
$
(
"div"
);
div
.
animate
({
height
:
'300px'
,
opacity
:
'0.4'
},
"slow"
);
div
.
animate
({
width
:
'300px'
,
opacity
:
'0.8'
},
"slow"
);
div
.
animate
({
height
:
'100px'
,
opacity
:
'0.4'
},
"slow"
);
div
.
animate
({
width
:
'100px'
,
opacity
:
'0.8'
},
"slow"
);
});
jQuery 停止动画
stop() 方法用于在动画或效果完成前对它们进行停止
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$(
selector).stop(
stopAll,goToEnd);
Callback 回调方法
$
(
"button"
).
click
(
function
(){
$
(
"p"
).
hide
(
"slow"
,
function
(){
alert
(
"段落现在被隐藏了"
);
});
});
jQuery - 链(Chaining)
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery - 获取内容和属性
DOM 操作 :
都有回调函数
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- attr() - 获取属性
$
(
"#btn1"
).
click
(
function
(){
alert
(
"Text: "
+
$
(
"#test"
).
text
());
});
$
(
"#btn2"
).
click
(
function
(){
alert
(
"HTML: "
+
$
(
"#test"
).
html
());
});
$
(
"#btn1"
).
click
(
function
(){
alert
(
"值为: "
+
$
(
"#test"
).
val
());
});
设置内容 - text()、html() 以及 val()
添加新的 HTML 内容
$("<div></div>") 这样可以直接创建一个节点元素
- append() - 在被选元素的内部结尾插入内容
- appendTo(content) - 把所有匹配的元素追加到另一个指定的元素元素集合中。
- prepend() - 在被选元素的内部开头插入内容
- prependTo(content)- 把所有匹配的元素前置到另一个、指定的元素元素集合中。
- after() - 在被选元素外部之后插入内容,作为兄弟元素
- before() - 在被选元素外部之前插入内容作为兄弟元素
通过 append() 和 prepend() 方法添加若干新元素
function
appendText
()
{
var
txt1
=
"<p>文本。</p>"
;
// 使用 HTML 标签创建文本
var
txt2
=
$
(
"<p></p>"
).
text
(
"文本。"
);
// 使用 jQuery 创建文本
var
txt3
=
document
.
createElement
(
"p"
);
txt3
.
innerHTML
=
"文本。"
;
// 使用 DOM 创建文本 text with DOM
$
(
"body"
).
append
(
txt1
,
txt2
,
txt3
);
// 追加新元素
}
删除元素/内容
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素,可以清空对应的事件.
- clone([Even[,deepEven]]) - 克隆匹配的DOM元素并且选中这些克隆的副本。（true 事件处理函数是会被复制 false 则不会）
- val("") - 是清空元素中的内容
//%("div").html(""); 这样也可以清空div中的内容,但是,如果div上有事件的话,此事件并不会清空,则会引起内存泄露,所以jQuery中必须使用empty()
jQuery 操作 CSS类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
jQuery 尺寸方法
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
向上遍历 DOM 树
- parent() 返回被选元素的直接父元素
- parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
向下遍历 DOM 树
- children() 返回被选元素的所有直接子元素
- find() 被选元素的后代元素，一路向下直到最后一个后代。
- find("*")
在 DOM 树中水平遍历
- siblings() 返回被选元素的所有同胞元素。
- next() 返回被选元素的下一个同胞元素。
- nextAll() 返回被选元素的所有跟随的同胞元素。
- nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()
- prevAll()
- prevUntil()
jQuery 遍历- 过滤
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
$
(
document
).
ready
(
function
(){
$
(
"p"
).
eq
(
1
);
});
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
jQuery - AJAX load() 方法
有回调函数
$(selector).load(URL,data,callback);
必需的
URL 参数规定您希望加载的 URL。
可选的
data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的
callback 参数是 load() 方法完成后所执行的函数名称。
"demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("#div1").load("demo_test.txt #p1");
jQuery - AJAX get() 和 post() 方法
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
$.get() 方法
$.get(
URL,
callback);
必需的
URL 参数规定您希望请求的 URL。
可选的
callback 参数是请求成功后所执行的函数名。
$.post() 方法
$.post(
URL,data,callback);
必需的
URL 参数规定您希望请求的 URL。
可选的
data 参数规定连同请求发送的数据。
可选的
callback 参数是请求成功后所执行的函数名。
jQuery - noConflict() 方法
//隐式迭代:
//设置操作的时候:会给jp内部的所有队形都设置上相同的值.
//获取的时候:只会返回第一个元素对应的值.
封装插件方法
//$.fn = $.prototype,
是给
jQuery
封装插件用的
.
$
.
fn
.
bgc
= function
(
color
){
this
.
css
(
"backgroundColor"
,
color
);
return this
;
//
返回当前对象
,
可以实现链式编程
,
不返回则使用该方法后不能再链式下去
.
};
扫一扫
2970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
