JQ入门学习实战演练

选择器是JQuery一大特点，全部的DOM操做、事件操做、Ajax操做都离不开选择器。熟练掌握JQuery的选择器，能够节省不少代码，很大程序上简化咱们的脚本编程工做。 
JQuery的选择器很相似于样式表的选择器。 

JQuery选择器的特色： 
1.简化代码编写 
$("#标记ID")至关于document.getElementById("标记ID")，是经过元素id来获取元素对象。 
$("标记名称")至关于document.getElementByTagName("标记名称")，是经过元素名称来获取元素组。 

2.隐式迭代 
$("标记名称").css("background-color","red"); 
“$("标记名称")”表明页面中一组元素； 
$("标记名称").css("background-color","red")则是为这组元素中每一个元素的样式都加上红色背景。 
JQuery自动迭代每一个元素，这就免去了咱们编写代码编历每一个元素对象的操做了。 

3.无需判断对象是否存在 
若是页面上不存在id为test的DOM 元素，$("#test").css("background-color","red")不会产生任何异常，而document.getElementById("test").style.backgroundColor='red'就会产生未找到对象的异常。 

JQuery选择器的分类：基本选择器，层次选择器，过滤选择器，表单选择器 

 

 

 :checked选取全部被选中的元素（radio,checkbox中的checked） 
$("input:checked")：选取全部被选中的元素（单选按钮和复选框） 

30. :selected选取被选中的选项元素（select中的option=selected） 
$("select :selected")：选取全部被选中的列表项 
如： 
$("select :selected").each(function () { 
str += $(this).text() + ","; 
}); 
编历每一个选中项，并把项的内容拼接到字符串str中。 

 

 

1. :input选取全部的<input><textarea><select><button>等表单元素 
2. :text选取全部的单行文本框 
3. :password选取密码框 
4. :radio选取全部的单选按钮 
5. :checkbox选取全部的复选框 
6. :submit选取全部的提交按钮 
7. :image选取全部的图片按钮 
8. :reset选取全部的重置按钮 
9. :button按钮全部的按钮 
10. :file选取全部的上传域 
11. :hidden选取全部的不可见元素（前面讲过“过滤选择器-14”） 

 

:[selector1][selector2]...[selectorN]选取同时知足select1至selectorN的元素 
$("div[id][title*=es]")：组合属性选择器,首先选取有属性id的div元素，而后在结果中 选取属性title值 含有 es 的元素 
$("div[id][title*=es]").css("background","#bbffaa"); 

 

 

 

实例：简单的一个JQ下拉框的效果

 

 

 

 

 

 

 

参考书籍：《锋利的JQuery》  （原创：灰灰虫的家http://hi.baidu.com/grayworm）