jquery选择器之基础训练第一篇

jquery是前端开发者最喜欢的javascript开发框架之一,就像他的宣传语一样,写更少的代码,做更多的事情,现在拥有一大波开发者粉丝,甚至微软将它作为官方库,这一切说明jquery在开发者心中确实有很高的地位.

jquery有一个强大的构造函数jQuery() 也就是我们常常简写的 $ ,这个构造函数强大之处在于,它能识别复杂的选择表达式进而找到你想要的元素.

所以使用jquery的前提是会使用他的选择表达式,下面几种类似css选择器

$(document)//选择整个文档对象  

$('#documentID')//选择ID为myId的网页元素    

$('a[name=menu]')//选择name属性是menu的a标签

$('body.cssClass')//选择body下 class为cssClass的元素      

还有些jquery本身特殊支持的选择器

$('input:first')//选择网页中第一个输入框元素    

$('#subForm :input')//选择提交表单中的输入框元素

$('tr:odd')//选择表格的奇数行        

$('p:visible') //选择可见的p段落元素    

$('div:gt(1)')//选择页面所有的div元素，不包括第一个   

jquery还有些提供过滤的选择器,缩小你的结果集

$("#selCity").find("option:selected").text()//城市下拉列表中被选中项的文本

$('p').has('span'); //选择包含span元素的p元素    

$('div').not('.old'); //选择class不等于old的div元素    

$('div').filter('div[name=old]'); //选择name=old的所有div元素

$('form>input').first(); //选择form表单写第1个输入框元素    

$('div').eq(3); //选择第3个div元素 

jquery还提供了dom移动选择器,依靠dom的前后左右,同级上级关系来选择

$('div.old').children(); //选择div class=old 下的所有子元素    

$('select>option').siblings(); //选择下拉列表中option元素的同级元素 

$('#content').next('p'); //选择ID为content元素后面的第一个p元素    

$('span').parent(); //选择span元素的父级元素    

$('div').closest('form'); //选择离div最近的那个form父元素