神奇的JQuery学习[基础学习笔记.docVIP

[ 提供] 【随着JavaScript的兴起，一系列JavaScript库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年ExtJs。可以发现，互联网正在掀起一场JavaScript风暴。在这场风暴中，jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。】 Guihua 2010-9-15 【锋利的jQuery学习笔记】  认识JQuery 页面加载事件（可以写多个ready()）$(document).ready(function(){alert(“hello world”);}) 链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等//选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); JQuery中获得一个对象的所有子元素内容$(“#myDiv”).html() JQuery中的变量 与 DOM中的变量var $myVar = “”;var myVar = “”; DOM对象 转换成 JQuery对象var obj = documnet.getElementById(“myDiv”);var $obj = $(obj); JQuery对象 转换成 DOM对象var $obj = $(“#myDiv”);var obj = $obj.get(0);? //或者var obj = $obj[0]; 释放JQuery对$符号的控制权JQuery.noConflict(); JQuery选择器 JQuery完善的处理机制document.getElementById(“test”).style.color = “red”; //如果test不存在，则页面出现异常$(“#test”).css(“color”,”red”); //哪怕页面没有名称为test的元素，也不会报错。它是一个JQuery对象 判断页面是否选择的对象if( $(“.class”).length ; 0 ){// todo something} 基本选择器 $(“#myDiv”)??? //根据给定的ID选择匹配的元素，返回：单个元素$(“.myClass”) //根据给定的样式名称选择匹配的元素，返回：集合元素$(“div”) //根据给定的元素名称选择匹配的元素，返回：集合元素$(“#myDiv,div.myClass,span”) //根据给定的规则选择匹配的元素，返回：集合元素$(“*”) //选择页面所有元素，返回：集合元素 层次选择器 $(“div span”) //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素$(“divgt;span”) //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素$(“.myClass+div”) //选择样式名称为myClass的下一个DIV元素，返回：集合元素$(“.myClass+div”) //等价于 $(“.myClass”).next(“div”);$(“.myClass~div”) //选择样式名称为myClass之后的所有DIV元素，返回：集合元素$(“.myClass~div”) //等价于 $(“.myClass”).nextAll();$(“.myClass”).siblings(“div”) //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素 过滤选择器（index从0开始） $(“div:first”) //选择所有DIV元素下的第一个DIV元素，返回：单个元素$(“div:last”) //选择所有DIV元素下的最后一个DIV元素，返回：单个元素$(“div:not(.myClass)”) //选择所有样式不包括myClass的DIV元素，返回：集合元素$(“div:even”) //选择所有索引是偶数的DIV元素，返回：集合元素$(“div:odd”) //选择所有索引是奇数的DIV元素，返回：集合元素$(“div:eq(index)”) //选择所有索引等于index的DIV元素，返回：集合元素$(“div:gt(index)”) //选择所有索引大于index的DIV元素，返回：集合元素$(“div:lt(index)”) //选择所有索引小于index的DIV元素，返回：集合元素$(“:header”) //选择所有标题元素（