作用:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
基础语法:$(selector).action()
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
$(function(){
// 开始写 jQuery 代码...
});
jQuery选择器:
元素选择器 $("p")
id选择器 $("#test")
class选择器 $(".test")
CSS选择器 $("p").css("background-color","red");
jQuery事件
jQuery 效果
jQuery DOM 操作:
1、设置或获取内容和属性:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr() - 设置或返回属性值
2、添加元素或添加内容
append() - 在被选元素内部的结尾插入指定元素或内容
prepend() - 在被选元素内部的开头插入指定元素或内容
after() - 在被选元素之后插入元素或内容
before() - 在被选元素之前插入元素或内容
创建元素的三种方式:
var txt1="<p>Text.</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("Text."); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
3、删除元素或内容
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
4、获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
5、设置或返回指定元素的尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
6、遍历 - 祖先
parent() - 返回被选元素的直接父元素
parents() - 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
parentsUntil() - 返回介于两个给定元素之间的所有祖先元素
7、遍历 - 后代
children() - 返回被选元素的所有直接子元素
find() - 返回被选元素的后代元素,一路向下直到最后一个后代
8、遍历 - 同胞(siblings)
siblings() - 返回被选元素的所有同胞元素
next() - 返回被选元素的下一个同胞元素
nextAll() - 返回被选元素的所有跟随的同胞元素
nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素
9、遍历- 过滤
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素
first() - 返回被选元素的首个元素
last() - 返回被选元素的最后一个元素
eq() - 返回被选元素中带有指定索引号的元素
filter() - 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not() - 返回不匹配标准的所有元素