2009.11.18——jquery(3)

本文介绍如何使用jQuery生成新的HTML元素及对元素进行选择、过滤、添加等操作的方法。包括利用$()函数创建HTML元素,使用get()获取DOM元素,通过add()添加元素到集合,以及使用not()进行元素筛选。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

2009.11.18——jquery(3)
3.1 生成新的HTML
$()函数不仅能选择现有的页面元素,还能够生产新的HTML
$("<div>Hello</div>") //新建一个div元素
$("<div>") //新建一个空的div元素 但是这个简化的技巧不能创建<script>元素

$("<div class='foo'>I have foo!</div><div>I don't</div>").filter(".foo").click(function(){
alert("I'm foo!");
}).end().appendTo("#name");

这个,首先创建了两个<div>元素,一个带有css类foo,另一个没有,然后收窄选择范围,只选择带有类foo的<div>元素,并给它绑定事件处理程序,点击时,就会触发警告窗口。最后,使用end()函数,还原到包含两个<div>元素的完整集合,并把这两个元素追加到id为name的元素后面

3.2 包装集
jQuery元素包装集和数组非常类似

3.2.1 确定长度——size()

size()
参数:

返回:
元素的个数

$('#name').html('这里有'+$('a').size()+'个链接');
size()将会返回$('a')里面<a>元素的个数
和属性length是一样的

3.2.2 获取元素——get()

get(index)
参数
index 下标,用于指定将被返回的单个元素,如果省略,整个包装集以数组的形式返回
返回
一个DOM元素或DOM元素数组

$('img[alt]').get(0) <===> $('img[alt]')[0] //返回带有alt特性的所有<img>元素的集合的第一个元素

var arr = $('img[alt]').get(); //以数组形式返回带有alt特性的所有<img>元素的集合

3.2.3 添加元素

add(expression)
参数
expression 指定添加到包装集的元素,参数如果是jQuery选择器,则把匹配元素添加到集合;如果是html, 则创建适当的元素并添加到集合;如果是dom元素,则直接添加到集合中
返回:
包装集

$('img[alt]').add('img[title]') <====> $('img[alt],img[title]')
把多个选择器链用"或"的关系联系起来,取并集

3.2.4 整理内容

not,与非操作 取差集
not(expression)
参数
expression jQuery筛选器表达式、元素引用或元素引用的数组,定义从包装集里删除的元素

$('img[title]').not('[title*=puppy]') //包含带有title特性,并且title里面没有puppy文本的img元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值