首页 > 代码库 > 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>)
第七集.
第八集.
获取自定义属性的值
jQuery 学习笔记(TryjQuery)