jQuery选择器和方法

选择器补充

筛选选择器

伪类选择器 :XX()

:eq() 根据索引找元素,从0开始

:first() 第一个子元素

:last()最后一个子元素

:nth-child(index) 根据序号找元素,从1开始

$(\'ul li:eq(3)\').css(\'color\',\'green\');
$(\'ul li:first\').css(\'color\',\'red\');
$(\'ul li:last\').css(\'color\',\'red\');
$(\'ul li:nth-child(4)\').css(\'background\',\'yellow\');

属性选择器

$(\'input:radio\')

------> $(\'input[type = radio])

筛选方法 --- 链式编程

筛选选择器是jQuery延伸出来的用法,有一些选择器已经作为

方法包装在了jQuery中,结果是等价的

.eq()　　根据索引找元素,从0开始

.first()　　第一个子元素

.last()　　最后一个子元素

.text() 相当于JS的 innertext()

.find(\' \') 找儿子和孙子们 ()中可以写选择器

.children(\' \' ) 找儿子们 ()中可以写选择器

.parent() 找亲爹

.siblings() 找兄弟,除自己之外 ()中可以写选择器


$(\'ul\').find(\'li\')
$(\'ul\').children(\'li\')
$(\'ul\').parent()
$(\'ul\').siblings(\'.box\')

siblings实现选项卡

由于是链式编程,速度快,不需像2个for循环那样,先变回原来颜色,几乎是同时操作


$(\'ul li a\').click(function(){                  $(this).addClass(\'active\').parent().siblings(\'li\').find(\'a\').removeClass(\'active\');
})

类的相关方法

.addClass(\'\') 添加类,不需像JS中前面加空格

.removeClass(\'a b c\') 删除类,若是只有一个类也能删除

.toggleClass(\'a\') 若是有类a,就删除,没有就添加

值操作

.html() 中间有值就是修改或添加


获取的文本包括标签
<p>alex</p>

.text() 中间有值就是修改或添加


只获取文本,不获取标签

.val() 中间有值就是修改或添加

.val()方法主要用于获取表单元素的值，如input, select 和 textarea。当在一个空集合上调用，它返回undefined 
获取value属性值
<input type=\'text\' value=\'哈哈哈\'>

$(\'input:text\').val()

对象和标签属性操作

对象属性


#如果有一个参数，表示获取值，两个参数，设置值
.prop()
# 移除单个值或者多个值，多个值用空格隔开
.removeProp()

标签属性


如果有一个参数，表示获取值，两个参数，设置值        .attr(\'href\',\'http://www.baidu.com\')
# 移除单个值或者多个值，多个值用空格隔开
.removeAttr()