jQuery的使用、jquery选择器、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") //根据给定的样式名称选择匹配的元素，返回：集合元素  
$("p") //根据给定的元素名称选择匹配的元素，返回：集合元素  
$("#myDiv,p.myClass,span") //根据给定的规则选择匹配的元素，返回：集合元素  
$("*") //选择页面所有元素，返回：集合元素  

层次选择器

$("p span") //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素  
$("p>span") //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素  
$(".myClass+p") //选择样式名称为myClass的下一个DIV元素，返回：集合元素  
$(".myClass+p") //等价于 $(".myClass").next("p");  
$(".myClass~p") //选择样式名称为myClass之后的所有DIV元素，返回：集合元素  
$(".myClass~p") //等价于 $(".myClass").nextAll();  
$(".myClass").siblings("p") //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素  

过滤选择器（index从0开始）

$("p:first") //选择所有DIV元素下的第一个DIV元素，返回：单个元素  
$("p:last") //选择所有DIV元素下的最后一个DIV元素，返回：单个元素  
$("p:not(.myClass)") //选择所有样式不包括myClass的DIV元素，返回：集合元素  
$("p:even") //选择所有索引是偶数的DIV元素，返回：集合元素  
$("p:odd") //选择所有索引是奇数的DIV元素，返回：集合元素  
$("p:eq(index)") //选择所有索引等于index的DIV元素，返回：集合元素  
$("p:gt(index)") //选择所有索引大于index的DIV元素，返回：集合元素  
$("p:lt(index)") //选择所有索引小于index的DIV元素，返回：集合元素  
$(":header") //选择所有标题元素（h1,h2,h3），返回：集合元素  
$("p:animated") //选择所有正在执行去画的DIV元素，返回：集合元素  

子元素过滤选择器（index从1开始）

$(":nth-child(index/even/odd)") //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素  
$(":first-child") //选择每个父元素下的第一个子元素，返回：集合元素  
$(":last-child") //选择每个父元素下的最后一个子元素，返回：集合元素  
$("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素，返回：集合元素  

内容过滤选择器

$(":contains(text)") //选择所有内容包含text的元素，返回：集合元素  
$("p:empty") //选择所有内容为空的DIV元素，返回：集合元素  
$("p:has(span)") //选择所有含有SPAN子元素的DIV元素，返回：集合元素  
$("p:parent") //选择所有含有子元素的DIV元素，返回：集合元素  

可见性选择器

$(":hidden") //选择所有不可见的元素（type="hidden"），返回：集合元素  
$(":visible") //选择所有可见的元素，返回：集合元素  

属性过滤选择器

$("[id]") //选择所有含有id属性的元素，返回：集合元素  
$("[class=myClass]") //选择所有class属性值是myClass的元素，返回：集合元素  
$("[class!=myClass]") //选择所有class属性值不是myClass的元素，返回：集合元素  
$("[alt^=begin]") //选择所有alt属性值以begin开始的元素，返回：集合元素  
$("[alt^=end]") //选择所有alt属性值以end结束的元素，返回：集合元素  
$("[alt*=some]") //选择所有alt属性值含有some的元素，返回：集合元素  
$("p[id][class=myClass]") //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素  

表单对象属性选择器

$("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素，返回：集合元素  
$("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素  
$("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素  
$("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素  

表单选择器

$(":input") //选择所有<input> <select> <button> <textarea>元素，返回：集合元素  
$(":text") //选择所有单行文本框元素，返回：集合元素  
$(":password") //选择所有密码框元素，返回：集合元素  
$(":radio") //选择所有单选框元素，返回：集合元素  
$(":checkbox") //选择所有复选框元素，返回：集合元素  
$(":submit") //选择所有提交按钮元素，返回：集合元素  
$(":image") //选择所有图片按钮元素，返回：集合元素  
$(":reset") //选择所有重置按钮元素，返回：集合元素  
$(":button") //选择所有按钮元素，返回：集合元素  
$(":file") //选择所有上传域元素，返回：集合元素  
$(":hidden") //选择所有不可见域元素，返回：集合元素  
$(":text") //选择所有单选文本框元素，返回：集合元素