1.获取元素的个数。
在jQuery中可以通过size()方法获取选择器中元素的个数,它类似数组中的length属性,返回整数值,例如:
$("img").size()
获取页面中,所有图片的数目
如下是一个实例,通过不断的点击添加div块并计算页面中的
页面中一共有0个DIV块。单击鼠标添加
2.提取元素
在jQuery中选择器中,如果想提取某个元素,最直接的方法是采用方括号加序号的形式,例如;
$("img[title]")[1]
获取了所有设置了title属性的img标记中的第二个元素。jQuery也提供了get(index)方法来提取元素,以下的代码与上面的完全等效
$("img[title]")get(1)
get方法在不设置任何参数时,可以将元素转化为一个元素对象的数组,如下的例子:
上面代码将页面本身的6个
get(index)方法可以获取指定位置的元素,反过来,index(element)方法可以查找元素的element所处的位置。例如
var iNum=$("li").index($(li[title=isaac]")[0])
以上取
例:用index()方法获取元素的序号
单击的是第个div。
以上代码块本身用this关键字传入index()方法中,获取自身的序号,并且利用click()添加事件,将序号显示出来。
3.添加、删除、过滤元素
除了获取选择元素外,jQuery还提供了一系列的方法来修改元素集合,例如用add()的方法添加元素。
$("img[alt]").add("img[title]")
以上代码将设置了alt元素的图像和说呀设置了title属性的图像组合在一起,供别的方法统一调运。它完全等同于
$("img[alt],img[title]")
例如,可以讲组合后的元素集统一添加css属性。
$("img[alt]").add("img[title]").addClass("altcss")
与add()方法相反,not()方法可以去除元素集合中的某些元素形成集合
$("li[title]").not("[title*=isaac]")
以上代码表示,选中所有设置了title属性的标记 ,但不包括title的值中包含"isaac"的
例:
以上的Jquery通过not()的方法去掉风格为"green"和"blueone"的
not()方法所接收的参数都不能包含特定的元素,只能是通过通用的表达式例如下面的代码是错误的
$("li[title]").not("img[title*=isaac]")
正确的写法是:
$("li[tile]").not("[title*=isaac]")
除了add()和not()外,jQuery还提供了更强大的filter()方法来筛选元素。filter()可以接受两种类型的参数,一种与not()方法一样,接受通用的表达式。代码如下:
$("li").filter("[title*=isaac]")
以上的代码表示:筛选出title值包含isaac字符串的li元素组合。
与
$("li[title*=isaac]")
所筛选的组合相同。
以上代码中其中4个class属性为middle,Jq先给所有的div块都添加了css1样式,然后通过filter()方法,把class中包含middle的div添加css2样式。
在filter()的参数中,不能直接的等于匹配(=),只能使用前匹配(^=)、后匹配(&=),或者任意匹配(*=).
filter()另外一种类型的参数是函数,对于返回ture元素匹配保留,否则排除集合。函数参数功能十分强大,可以让用户自定义筛选函数。
例如:
以上jq执行:
将所有的div添加css1然后利用filter()返回的函数将div列表中第一个(index为1),id是fourth的div元素筛选出来,添加css2.
4.查询过滤新元素组
jq还提供了 一些很有的用的方法组合,通过查询来获取新元素组合。例如find()方法。通过匹配选择器来筛选元素
$("p").find("span")
表示查找到
标记下含有标记的组合
完全等于
$("span",$("p"))
$(function(){
$("p").find("span").addClass("css1");
});
Hello, how are you?
表示给Hello添加css1的样式.
另外,还可以通过is()方法来检测是否包含指定的元素,例如可以通过下面代码检测页面中
var himg = $("div").is("img");
试想下,is()还可以结合filter()使用,是不是很惬意?
以上就是本文的全部内容了,虽然有点长,但是还是建议小伙伴们仔细读一下,希望大家能够喜欢。
![大前端线上培训班](http://m.sbmmt.com/img/upload/article/000/000/001/6176124da5ca5514.png)
相关文章推荐
• innerhtml是jquery方法么• javascript怎么设置标签的背景颜色• jquery select 不可编辑怎么办• javascript 怎么将时间转毫秒• 浅谈怎么利用node提升工作效率jquery 基础视频教程
jQuery 很容易学习,希望通过我们的《jquery 基础视频教程》可以帮助大家来更好的学习jQuery。 jQuery 是一个 JavaScript 库,简化了 JavaScript 编程。
jQuery教程45757次播放
javascript三级联动视频教程
《javascript三级联动视频教程》介绍了javascript开发的三级联动功能,该功能在日常使用中还是经常能用的到的一个。
JavaScript教程26839次播放
独孤九贱(3)_JavaScript视频教程
javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。没有它,你的前端生涯是不完整的。《php.cn独孤九贱(3)-JavaScript视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了javascript知识。
JavaScript教程113582次播放
独孤九贱(6)_jQuery视频教程
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。
jQuery教程93279次播放