jQuery 基础
jQuery 选择器(外传)
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
jQuery 事件
click():click() 方法是当按钮点击事件被触发时会调用一个函数。
dblclick():当双击元素时,会发生 dblclick 事件。
mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件
mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mouseup():当在元素上松开鼠标按钮时,会发生 mouseup 事件。
hover():hover()方法用于模拟光标悬停事件。
focus():当元素获得焦点时,发生 focus 事件。
blur():当元素失去焦点时,发生 blur 事件。
隐藏和显示
$(selector).hide/show(隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。,隐藏或显示完成后所执行的函数名称。);
toggle() 方法来切换 hide() 和 show() 方法。
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
linear:表示过渡使用哪种缓动函数。译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。
淡入淡出
fadeIn() 用于淡入已隐藏的元素。
fadeOut() 方法用于淡出可见元素。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 方法允许渐变为给定的不透明度
滑动
$(selector).slideDown(规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒, fading 完成后所执行的函数名称。);
slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
动画
$(selector).animate({形成动画的 CSS 属性},规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,动画完成后所执行的函数名称);
停止动画
$(selector).stop(规定是否应该清除动画队列,规定是否立即完成当前动画);
stop() 会清除在被选元素上指定的当前动画。
text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() 方法用于获取属性值。
添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除元素
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
获取并设置 CSS 类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
遍历 - 祖先
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:
$(document).ready(function(){
$("span").parents("ul");
});
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
$(document).ready(function(){
$("span").parentsUntil("div");
});
遍历 - 后代
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素:
$(document).ready(function(){
$("div").find("span");
});
遍历 - 同胞(siblings)
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。