首页 > 代码库 > jQuery 学习笔记(TryjQuery)

jQuery 学习笔记(TryjQuery)

第一集.
页面加载完成后执行 js 代码: 

$(document).ready(function(){

  $("h1").text("Where to?");

});

 

第二集.
查找网页元素的方式:

$("h1") 使用标签获取网页元素

$("#ID") 使用标签ID获取网页元素

$(".ClassName") 使用标签类名获取网页元素

CSS

p { ... }
#container { ... }
.articles { ... }


jQuery

$("p");
$("#container");
$(".articles");

 

第三集.
获取网页元素中的子元素和多种方式获取网页元素的集合:

$("#destinations li"); 获取 id 为 destinations 的网页元素中包含的所有标签为 li 的元素,包含儿子、孙子、子孙万代...。

$("#destinations > li"); 获取 id 为 destinations 的网页元素中直属的标签为 li 的元素,仅包含儿子。

$(".promo, #france"); 获取类名为 promo 或 id 为 france 的多个子元素。

$("#destinations li:first");

$("#destinations li:last");

$("#destinations li:odd");

$("#destinations li:even");

watch out, the index starts at 0

 

第四集.
使用.first() 的效率比使用伪类:first效率更高:

$("#destinations li");

$("#destinations").find("li");  //速度快

$("li:first");

$("li").first();  //速度快

$("li:last");

$("li").last();  //速度快

$("li").first().next().prev();

$("li").first().parent();

$("#destinations").children("li");

children(), unlike find(), only selects direct children

 

第五集.
把元素<element>添加到目标元素的下级的后面、下级的前面、同级的后面、同级的前面

.append(<element>)

.prepend(<element>)

.after(<element>)

.before(<element>)

 

把目标元素添加到元素<element>下级的后面、下级的前面、同级的后面、同级的前面

.appendTo(<element>)

.prependTo(<element>)

.insertTo(<element>)

.insertBefort(<element>)

 

第七集.

.closest() 从当前元素开始遍历,沿DOM树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。
 
.parents() 从父元素开始遍历,沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。

 

第八集.
获取自定义属性的值

jQuery 学习笔记(TryjQuery)