jQuery选择器和方法

Posted 2021-02-02 chenzhiming

选择器补充

筛选选择器

伪类选择器 :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()