Jquery学习笔记-过滤选择器

1.根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素。

$("li:first") 第一个

$("li:last") 最后一个

2.如果想从一组标签元素数组中,灵活选择任意的一个标签元素,我们可以使用:eq(index)

其中参数index表示索引号(即:一个整数),它从0开始。

如果index的值为3,表示选择的是第4个元素:$("li:eq(3)")

3.按照文本内容来查找一个或多个元素,那么使用:contains(text)选择器会更加方便,

它的功能是选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。

其中参数text表示页面中的文字。$("li:contains(‘jQuery‘)")

<ol>

<li>强大的"jQuery"</li>

<li>"javascript"也很实用</li>

<li>"jQuery"前端必学</li>

<li>"java"是一种开发语言</li>

<li>前端利器——"jQuery"</li>

</ol>

4.:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素,

其中selector参数就是包含的元素名称,是被包含元素。

$("li:has(‘p‘)")选择器代码,获取了包含<p>元素的全部<li>元素

5.:hidden过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。

$("p:hidden")代码获取隐藏的<p>元素

6.:visible过滤选择器获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,

那么,都可以通过该选择器获取。$("p:visible")选择器代码,获取那个可见的<p>元素

7.属性作为DOM元素的一个重要特征,也可以用于选择器中,通过元素属性获取元素的选择器,

[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。

$("li[title=‘我最爱‘]")属性选择器代码,获取指定的<li>元素

8.[attribute!=value]属性选择器的功能是获取不包含属性名,或者与属性名和属性值不相同的全部元素,

其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。

$("li[title!=‘我最爱‘]")属性选择器代码,获取指定的<li>元素,其中有不包含title属性名,有title属性值不等于“我最爱”

9.功能更为强大的属性选择器[attribute*=value],它可以获取属性值中包含指定内容的全部元素,

其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。

$("li[title*=‘最‘]")属性选择器代码,获取指定<li>元素,这些元素的title属性值中都包含了“最”字符

10.使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。

<ol>

<li>芹菜</li>

<li>茄子</li>

<li>萝卜</li>

<li>大白菜</li>

<li>西红柿</li>

</ol>

<ol>

<li>橘子</li>

<li>香蕉</li>

<li>葡萄</li>

<li>苹果</li>

<li>西瓜</li>

</ol>

<script type="text/javascript">

$("li:first-child").css("background-color", "green");

</script>

11.:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素,它也是一个集合,常用多个集合数据的选择处理。

$("li:last-child").css("background-color", "blue");

时间: 2024-10-09 19:41:00

Jquery学习笔记-过滤选择器的相关文章

jQuery学习之过滤选择器

:first 选取第一个元素:$("div:first") :last 选取最后一个元素:$("div:last") :not(selector) 取出除selector之外的其他元素:$("div:not(.class)") :even 选取索引为偶数的元素:$("div:even") :odd 选取索引为奇数的元素:$("div:odd") :eq(index) 索引等于index:$("di

JQuery学习笔记-基本选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div, span, p {     width: 140px;     height: 140px;     margin: 5px;     background

JQuery学习笔记-层次选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: 

jQuery学习笔记之选择器

目录: 选择器: 选择器应用优化 简单的伪类选择器    内容伪类选择器 显隐伪类选择器 子元素伪类选择器 表单对象伪类选择器 表单属性伪类选择器 属性选择器 HelloWorld 选择器 选择器应用优化 1.简单的伪类选择器 2.内容伪类选择器 3.显隐伪类选择器 4.子元素伪类选择器 5. 表单对象伪类选择器 6. 表单属性伪类选择器 7. 属性选择器

jQuery学习笔记——jQuery常规选择器

一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jQuery学习笔记(2014年8月3日)事件委派

jQuery中的事件委托是通过 closest() 来完成的. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 参考资料: jQuery 遍历 - closest() 方法http://www.w3school.com.cn/jquery/traversing_closest.asp jQuery学习笔记(2014年8月3日)事件委派