jquery知识点整理
1. 获得内容、属性 - text()、html() 、 val()、attr()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- attr() - 设置或返回属性
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置多个属性：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
回调函数：
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
2.添加新元素/内容 -
用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }
3. 删除元素/内容
删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
4. 过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
5. jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
6. css() 方法设置或返回被选元素的一个或多个样式属性。
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
7. jQuery 尺寸 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
8. jQuery 遍历 - 祖先
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent() --返回被选元素的直接父元素。
- parents() --返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
- parentsUntil() --返回介于两个给定元素之间的所有祖先元素。
9. jQuery 遍历 - 后代
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children() --方法返回被选元素的所有直接子元素。
- find() --返回被选元素的后代元素，一路向下直到最后一个后代。
10. jQuery 遍历 - 同胞
有许多有用的方法让我们在 DOM 树进行水平遍历：
- siblings() --返回被选元素的所有同胞元素。
- next() --返回被选元素的下一个同胞元素。
- nextAll() --返回被选元素的所有跟随的同胞元素。
- nextUntil() --返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素： $(document).ready(function(){ $("h2").nextUntil("h6"); });
- prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
- prev()
- prevAll()
- prevUntil()
11. 缩写搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(document).ready(function(){ $("p").filter(".intro"); });
not() 方法返回不匹配标准的所有元素。
$(document).ready(function(){ $("p").not(".intro"); });
