jQuery的元素选择举例

1、jQuery的一个很重要的特点就是它的链式操作
$('div').find('h2').eq(2).text()

这一行代码的意思就是:找到文档里的所有div,然后把这些div里面的所有h2找出来,返回一个伪数组,这个伪数组里装着全部的h2,然后找到它们中的第三个h2并且获取它的text内容。

$('div').find('h2').eq(0).text('你好').end()

这时的end要注意下,选择div时进入一个栈,find时又进入下一个栈,eq时又进入了一个栈,在当前的栈里将内容全部改成了‘你好’,通过end()方法退出当前栈回到上一个栈,也就是find('h2')这里,这样就可以对它进行其它的操作了。

2、元素选择
  • filter() 和 not()
 $('h2').filter('.h2').css('background','red')

选择所有的h2标签中class是h2的元素,把它的背影变成红色
与filter相反的是not

$('h2').not('.h2').css('background',red)

在h2中排除掉.h2,把剩下的h2背影变成红色
注意:filter和not都是在当前栈中进行的操作

  • has() 包含
$('div').has('span').css('font-size','15px')

操作的是包含了span标签的div,依然是在当前栈中进行的操作。注意:这里的包含是指子元素,不是包含什么id啊class什么的

  • next() 和 prev()
$('div').filter('.father').next().css('background','blue')

next()和prev()选择的都是兄弟节点,不一定是得和自己一样的标签这里之前理解有误,这两个方法也会进入新的栈

  • find()
$('div').find('h2')

这是找到div子元素中的h2并返回一个伪数组,和filter不同,filter是在当元素中过滤,而find则是在后代元素中找。

  • eq()
$('div').find('h2').eq(0)

当前元素列中的第几个

  • index()
$('div').index()

div元素在兄弟元素中的具体位置,返回一个数值

  • 获取和设置内容text() html()
$('div').text()  // $('div').text('新的内容')

空的就是获取,有内容就是设置新的内容

  • sibings()
$('div').siblings()  // $('div').siblings('h2')

返回div的所有兄弟元素,返回div兄弟元素中是h2的元素

  • children() // parent()类似
$('div').children()

返回的是全部的子元素,和find()不同,find()是在所有的后代元素里找

3、元素选择和获取的其它API
parents()   //获取所有的祖先元素,可用参数进行匹配
siblings()   //获取兄弟(除自己以外)
nextAll()    //DOM树中元素同级兄弟元素中接下来的全部
prevAll()    //原理同上
nextUntil()  //往下截止(不包含截止元素)
prevUntil()  //兄弟元素往上截止(不包含)
parentsUntil() //同上

4、closest()

它必须要写筛选的参数,它是从自己开始找,不停往祖先元素找匹配的元素,并且只能找到一个元素

5、clone()

这个API很重要

<script>
     $('span').clone().appendTo('#div1')
</script>
<script>
     $('span').click(function(){
       console.log('span被点击了')
     })
     $('span').clone(true).appendTo('#div1')
     
  </script>

参数true就是克隆了之前的全部操作。

6、元素的包装
 $('span').wrap('<div>')  //这是对每个span标签外面都包一层
 $('li').wrapAll('<div>')    //这是对所有的li外面整体包一层,注意如果li里混进了其它标签,在整体包装的时候会被排队出去。
$('span').wrapInner('<p>')    //把span标签的子节点用一个p标签包起来
$('li').unwrap()  //删除包装,但是不删body

注意括号里是<div>标签

7、add()
let a = $('li')
let b = a.add('div')

在一个元素集合里添加新的元素,构成新的元素集合,之前的元素集合依然不变。

8、slice()
$('li').slice(1,3).css('color','red')

类似切片,理解理解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 647评论 0 3
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 693评论 0 9
  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 928评论 0 2
  • 失恋这件小事 有一个比我小两岁的表弟,从小一起长大,两个人常常打架到负伤,但是隔一会就又在一起破坏家里...
    诺佳阅读 595评论 2 3