10.jQuery选择器,过滤器,修改样式方法

一.jQuery 的选择器

$('li:event') //找到li 标签的偶数项元素

$('li:odd') //找到li标签的奇数项元素

$('li:lt(3)') //找到第4个前面的标签(都不包括第四个)

$('li:gt(3)') //找到第4个后面的标签(都不包括第四个)

$('li:eq(3)') //找到第4个li标签

$('li:eq(3)').find('span').css('color','red')//找到第三个li里的所有span标签字体颜色变红

二.jQuery过滤

$('li a').filter('.a3') //可以筛选出含有class为a3的(符合条件的)元素

$('li a').not('.a3') //可以移除含有.a3的class属性.

$('li a').first() //获取第一个元素

$('li a').last() //获取最后一个元素

也可以使用截取函数slice

三.jQuery修改class类名

$('div').removeClass('on') //移除removeClass类名

$('div').addClass('on') //添加removeClass类名

$('div').toggleClass('on') // 自动查询类名,有则删除,无则添加,常用于点击事件

四.jQuery修改style样式

$('div').css('color','red') //单个属性

$('div').css({

'color':'red',

'backgroundColor':'#999',

'border':'2px solid blue'

})                        //多个属性

五.元素的隐藏和显示 相当于加了个display

$('div').hide() //隐藏

$('div').show() //显示

六.jQuery修改DOM节点

$('li').wrap("") //给所有的li外层包裹一个div标签,可以给div设置样式来达到想要的效果

$('li').append('') //在匹配元素后添加一个标签

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 385评论 0 0
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,466评论 0 44
  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 1,050评论 0 51
  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 490评论 0 1
  • 一.什么是jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整...
    love2013阅读 596评论 0 4