简化的javaScript
jQuery是一个轻量级的js库，兼容css3 和各种浏览器，能使用户更方便的处理HTML，事件，实现动画效果，并且集成了AJAX可以更方便的与网站进行交互。
jQuery的宗旨是write less ，do more。
jQuery的优点：
轻巧方便、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、出色的浏览器兼容性、完善的AjAX、开发源代码。
jQuery的使用
导入jQuery库文件
<script src="jquery-1.6.js"></script>
使用$获取jQuery对象
var $obj = $("#menu");
jQuery对象的变量用$变量名来区分JS的变量
jQuery获取对象的方式使用选择器获取
$("div") 标签选择器
$("#div") ID选择器
$(".div") 类选择器
$("div img") 层叠式级联选择器
获取jquery对象,如果使用jquery获取对象后并找到对应的标签对象，还是会返回object，但是其size为0
jQuery获取的对象是jQuery对象，不是DOM对象
jQuery获取的对象是封装后的数组对象。
jQuery对象的基本方法和属性
属性 length 获取对象的数量
方法 size() 等同length
get() 获取DOM对象的数组
get(index) 获取单个DOM对象
html() 获取对象内的所有内容 等同于 DOM对象的innerHTML
text() 获取对象内的文本内容 等同于DOM对象的innerText
val() 获取对象的值 等同于DOM对象的value
each（） 遍历数组的对象
html() text() val() 可以进行值的写入
this在此时表示被遍历的标签对象,被遍历的对象是DOM类型的对象
//each用于对jquery对象进行循环遍历$obj.each(function(){//this在此时表示被遍历的标签对象,被遍历的对象是DOM类型的对象alert(this.id);});
jQuery 对象 和 DOM对象的转换
jQuery对象转换为DOM对象 get(index)
//将jquery转换成DOM对象的方式通过get(index)方法实现//$obj = $("#div");//var obj = $obj.get(0);
DOM对象转换为jQuery对象 $(DOM对象)
//var obj = document.getElementById("div");//$obj = $(obj);
jQuery对于获取对象的筛选
> 获取父元素的子元素的集合
+ 获取指定对象的下一个同级对象
~ 获取指定对象后的所有同级对象
：first 获取第一个对象
：last 获取最后一个对象
：not 对指定属性进行取反获取
：even 获取索引值为偶数的对象集合
：odd 获取索引值为奇数的对象集合
：eq 获取指定索引值的对象
：gt 获取大于指定索引值的对象集合
：lt
获取小于指定索引值的对象集合
：contains
获取匹配指定文本内容的对象
：empty
获取不包含子元素或文本内容的对象
：has
获取匹配选择器的对象
：parent
获取包含子元素或文本的对象
：hidden
获取隐藏的对象
：visible 获取可见的对象
//获取指定选择器对应的下一级子元素//$obj = $("table>tbody>tr");//获取id为div1标签的下一级元素的input标签对象//级联选择将获取标签中所有对应的子标签对象//alert($("#div1 input").size());//alert($("#div1>input").val());//获取div1的下一个同级的节点对象//$obj = $("#div1+div");//alert($obj.size());//alert($obj[0].id);//获取div1的所有同级的div对象//$obj = $("#div1~div");//alert($obj.size());//$obj.each(function(){// alert(this.id);//})//has方法表示获取满足选择条件的对象或者是包含指定jquery对象的对象//has方法的参数既可以写选择器表达式，也可以写入jquery对象//在div1的所有同级的div对象中获取包含input标签的层对象//alert($obj.has("input").get(0).id);//在div1的所有同级的div对象中获取包含id为a标签的层对象//alert($obj.has($("#a")).get(0).id);//获取id为tab表格中中第一个列//$obj = $("#tab>tbody>tr>td:first");//使用方法获取第一个列//$obj = $("#tab>tbody>tr>td").first();//获取最后一个列//$obj = $("#tab>tbody>tr>td:last");//使用方法获取最后一个列//$obj = $("#tab>tbody>tr>td").last();//获取td中选中的input标签//$obj = $("#tab>tbody>tr>td>input:checked");//获取td中没有选中的input标签//$obj = $("#tab>tbody>tr>td>input:not(:checked)");//alert($obj.size());//$obj.each(function(){// alert(this.value);//})//使用not方法实现 获取td中没有选中的input标//$obj = $("#tab>tbody>tr>td>input").not("input:checked");//$obj = $("#tab>tbody>tr>td>input").not($("input:checked"));//alert($obj.size());//链式访问是jquery的特点//$("#tab>tbody>tr>td>input").not("input:checked").each(function(){// alert($(this).val());//})
//获取所有的奇数的行//根据索引来计算奇数//$("#tab>tbody>tr:odd").each(function(){// alert($(this).html());//})//获取偶数的行//$("#tab>tbody>tr:even").each(function(){// alert($(this).html());//})//获取id为tab表格中的第2行的第2列//$obj = $("#tab>tbody>tr:eq(1)>td:eq(1)");//使用方法来实现上述功能//$obj = $("#tab>tbody>tr").eq(1).find("td").eq(1);//$obj.each(function(){// alert($(this).html());//})//获取第一行以外的所有td//$obj = $("#tab>tbody>tr:gt(0)>td");//$obj.each(function(){// alert($(this).html());//})//使用not实现上述功能//$obj = $("#tab>tbody>tr:not(:eq(0))>td");//$obj = $("#tab>tbody>tr").not(":eq(0)").find("td");//$obj.each(function(){// alert($(this).html());//})//获取#tab中最后行以外的所有行中第2列中的最后一个没有选中的复选框//获取最后行的索引var index = $("#tab>tbody>tr").size()-1;$obj = $("#tab>tbody>tr:lt("+index+")");//each中function的参数表示循环的索引值，从0开始//$obj.each(function(i){// //alert($(this).html());// alert(i);//});//tr的遍历$obj.each(function(){//获取行中的所有tdvar $tds = $(this).find("td");//td的遍历$tds.each(function(i){//如果是第二个列if(i == 1){//获取该列中最后一个没有选中的input标签var $input = $(this).find("input:not(:checked):last");alert($input.val());}})});
var $obj;//获取#parent的下一级层中包含文本"内嵌层"的标签对象//$obj = $("#parent>div:contains(层)");//alert($obj.size());//$obj.each(function(){// alert(this.id); //})//获取#parent的下一级层中为空（即不包含文本，也不包含子标签）的div//$obj = $("#parent>div:empty");//alert($obj.get(0).id);//获取content中所有的非空层对象//$obj = $("#content>div:not(:empty)")//获取包含了input标签的层对象//$obj = $("#parent>div:has(input:checked)");//alert($obj.size());//$obj.each(function(){// alert(this.id); //});//获取指定标签的父元素对象//$obj = $("#parent>div:has(input:checked)");//var $parent = $obj.parent();//alert($parent[0].id);//$obj = $("div:has(input:checked):parent")//alert($obj[0].id);//获取所有隐藏的input标签对象//$obj = $("input:hidden");//alert($obj.val());//获取所有没有隐藏的input对象//$obj = $("input:visible");//$obj = $("input:not(:hidden)");//alert($obj.val());
[attribute] 获取指定属性的对象
[attribute = value]
获取指定属性是指定值的对象
[attribute ^=value ]
获取属性以指定值开始的对象
[attribute $=value]
获取属性以指定值结束的对象
[attribute *= value]
获取属性包含指定值的对象
<div id="container"><div id="div1" class="redStyle"><input type="text" value="a" /></div><div id="div2" class="blueStyle"><input type="password" value="b" /></div><div id="div3"><input type="button" value="c" /></div></div></body><script>//获取具备id属性的div对象var $obj;//$obj = $("div[id]");//具备class属性的div对象//$obj = $("div[class]");//获取id为div2的层对象//$obj = $("div[id=div2]");//匹配包含input标签的div，同时input标签要具备value属性，并且为a//$obj = $("div:has(input[value=a])");//获取id以div开头的所有div对象//$obj = $("div[id^=div]");//获取class以Style结尾的所有div对象//$obj = $("div[class$=Style]");//获取id中包含con的所有div对象//$obj = $("div[id*=con]");//$obj.each(function(){// alert($(this).attr("id"));//})//根据表单元素的类别获取特定的表单元素，方式式根据input标签的type属性的值来实现//获取文本框对象//alert($(":text").val());//获取密码框对象//alert($(":password").val());
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
