jQuery文档操作、选择器

这篇博客主要介绍了jQuery中的核心操作,如通过`length`获取集合长度,使用`get(index)`获取DOM对象,利用`each()`遍历集合并应用操作。示例中展示了如何遍历`<li>`元素,并用`each()`为其添加ID。此外,还讨论了`on()`和`off()`方法用于事件绑定和移除,包括事件委托的概念。
摘要由CSDN通过智能技术生成
文档操作
内部插入
A.append(B)      在A的末尾插入B
B.appendTo(A)    在A的末尾插入B

A.prepend(B)     在A的开头插入B
B.prependTo(A)   在A的开头插入B

外部插入
A.after(B)            在A之后插入B
B.insertAfter(A)      在A之后插入B
A.before(B)            在A之前插入B
B.insertBefore(A)      在A之前插入B

包裹
A.wrap(B)     给A添加父元素B
A.unwrap()    移除A的父元素

替换
A.replaceWith(B)   把A替换成B
B.replaceAll(A)   用B替换A
移除
empty()   清空
remove()   移除
复制
clone()  克隆   clone(true) 克隆结构以及事件处理函数

===============================================
常用事件类型:
click()   不传参数代表触发该事件
传一个函数作为参数,代表给这个事件绑定函数
dblclick()
表单事件
blur()
focus()
change()
submit()
鼠标事件
mouseover()
mousemove()
mouseout()
mousedown()
mouseup()
keydown()
keyup()
resize()
scroll()

on()   绑定事件   on('click',function(){});
off()   移除事件   off('事件类型') 移除该事件类型上的所有函数
off('事件类型',fn)    移除该事件类型上的fn
trigger('事件类型')   触发事件

================================================
基本选择器
#id   .class  *(通配符)   element  sel1 sel2(后代)    sel1>sel2(子代)
sel1,sel2,sel3(群组)
prev+next   匹配所有prev后面的next元素
prev~siblings   匹配所有prev后面的sibling元素

基本筛选
:first
:last
:not(selector)
:even  索引为偶数的
:odd   索引为奇数的
:gt(index)
:lt(index)
:eq(index)

内容筛选:
:contains(text)  筛选集合中包含指定字符串的元素
:empty    筛选集合中为空的元素,没有任何节点
:parent   筛选集合中不为空的元素(包含文本或子元素)
:has(selector)   筛选集合中包含指定选择器的元素的元素

可见性:
:hidden    display:none的元素   行内元素没有内容  type为hidden的input
:visible    除了:hidden的元素

属性选择器:
[attr]   筛选包含attr属性的元素[class]带有class属性的元素
[attr^=val]   筛选包含attr属性并且以val开头的元素
[attr$=val]   筛选包含attr属性并且以val结尾的元素
[attr*=val]   筛选包含attr属性并且包含val的元素
[attr!=val]   筛选包含attr属性并且不等于val的元素
[attr1][attr2][attr3]   筛选同时包含多个属性的元素

子元素选择器:
:first-child    p:first-child 匹配 <p> 的父元素的第一个<p>元素
                选择器匹配其父元素中的第一个子元素。
                ul(空格):first-child ul中的第一个元素以及ul后代元素的第一个元素
:last-child 最后一个子元素
    选择器用来匹配父元素中最后一个子元素。
:nth-child(n) n从1开始/选择器匹配父元素中的第n个子元素。
:only-child  选择器匹配属于父元素中唯一子元素的元素。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
:before   每个 <p>元素之前插入内容:
    p:before
    {
    content:"Read this: ";
    }

表单:
:input 选择input、select、textarea标签
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:button
表单状态:
:enabled
:disabled
:checked  所有选中的元素 包括复选框,单选框

:selected  select中选中的元素



==============================
核心操作
length   集合的长度   $('li').length
get(index)  获取集合中对应索引的DOM对象   
get()把DOM对象全部获取出来放在数组里面
each()   遍历集合
<ul>
        <li class="li1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
 </ul>

$('li').get()//[li.li1, li, li, li]

$('li').each(function (index,item) {//index代表每个对象的索引
函数里的this代表每次遍历的对象
            //item  === this,可不写
            $(item).prop('id','li'+(index+1));

})


on()&off()
on('事件类型',fn1)
on('事件类型',fn2)绑定事件
可以做事件委托
on('click','span',function(){this指向改为span})
off('事件类型')  移除该事件的所有处理函数
off('事件类型',fn1) 移除该事件的fn1

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值