JQ笔记之选择器

用JQ有一段时间了,今天对JQ的一些知识进行一些总结。

首先在JQ中分为几大模块:选择器,属性/CSS,操作,遍历,事件,效果,Ajax,还有核心。

一、选择器

1、基本选择器

.class  用法$(“.class”)

element 用法 $(“element”)

#id    用法  $(“#id”)

Selector1,selectorN  用法 $(“Selector1,selectorN”)

2、层级选择器

parent> child 用法$(“parent> child”)

E>F元素组合器和E F 都作为后代组合,但他们有所不同,更具体的是E>F只会选择第一级的后代。

prev+next选择所有紧跟在prev后的next元素

prev ~ siblings 匹配prev后的所有兄弟元素,具有相同的父元素,并匹配过滤siblings选择器。

3、基本筛选

:animated选择所有正在执行动画的元素

:eq(index)在匹配集合中选择索引为index的元素。(index为正数从0开始计数,负数从最后一个开始计数)

:even选择索引为偶数的元素,从0开始计数。

:odd选择索引为奇数的元素,从0开始计数。

:first选择第一个匹配的元素。

:gt选择匹配集合中所有大于给定index的元素。若index为负数,从最后一个元素开始反向计数。从0开始的索引值。

:lt选择匹配集合中所有小于给定index的元素。若index为负数,从最后一个元素开始反向计数。

:header选择所有标题元素。

:lang选择指定语言的所有元素。例如:$(“div:lang(en)”)将匹配<div lang=”en”>和<div lang=”en-us”>

:last选择最后一个匹配的元素。

:not(selector)选择所有元素,去除不匹配给定的选择器的元素。

:root选择该文档的根元素,在HTML中,永远是<html>元素。

:target选择由文档URI的格式化识别码表示的目标元素。

4、内容筛选

:contains(text)选择所有包含指定文本的元素。Text中的文本是区分大小写的。

:empty选择所有没有子元素的元素(包括文本节点)。

:has()例如:$(“div:has(p)”)匹配一个<div>,那么应该有一个<p>存在于<div>后代元素的任何地方,不是直接的子元素也可以。

注意:因为:has()是一个JQ延伸出来的一个选择器。并且不是CSS规范的一部分,使用:has()查询不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。

:parent选择所有含有子元素或文本的父级元素。

5、可见性筛选

:hidden选择所有隐藏的元素。例如:$(“div:hidden”)

:visible选择所有可见的元素。(在文档中占据一定空间,被认为是可见的)

元素可以被认为是隐藏的几个情况:

他们的CSS display值为none;

他们是type=’hidden’的表单元素;

元素的宽和高都显示的设置为0;

一个祖先元素是隐藏的,因此自身不会在页面上显示。

元素visibility:hidden或opacity:0被认为是可见的,因为他们还占据空间。

6、属性

[attribute|=value]选择指定元素值等于给定字符串或该字符串前缀的元素。

[arrribute*=value]选择指定属性具有包含一个给定子字符串的元素。

[attribute~=value]选择指定属性用空格分隔的值中包含一个给定元素值得元素。

[attribute$=value]选择指定属性是以给定值结尾的元素。区分大小写。

[attribute=value]选择指定属性等于给定值的元素。

[attribute!=value]选择不存在指定属性,或指定属性不等于给定值的元素。等同于:not([attr=value])

[attribute^=value]选择指定属性以给定字符串开始的元素。

[attribute] 选择所有指定元素,属性可以是任何值。

[  ][  ]   多条件属性查询。

7、子元素筛选

:first-child选择所有父级元素下第一个子元素。相当于:nth-child(1)

:last-child 选择所有父级元素下最后一个子元素。

:first-of-type选择所有相同元素名称的第一个兄弟元素。

:last -of-type 选择所有相同元素名称的最后一个兄弟元素。

:nth-child(n)选择他们所有父元素的第n个子元素。从一开始计数。

:nth-last-child(n)选择他们所有父元素的第n个子元素。从最后一个开始计数到第一个。

:nth-last-of-type(n)选择他们所有父元素的第n个子元素。从最后一个开始计数到第一个。

:nth-of-type选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。

:only-child如果某个元素是其父元素唯一的子元素,那么他就会被选中。

:nth-of-type如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配。

8、表单

:button匹配所有按钮和类型为按钮的元素。

:checkbox选择类型为复选框的元素。

:checked选择所有勾选的元素。

:disabled选择所有被禁用的元素。

:enabled选择未被禁用的元素。

:focus选择当前获取焦点的元素。

:file选择文件类型为file的元素。

:image选择所有图像类型的元素。

:input选择所有inputtextarea select button 元素。

:password选择所有类型为密码的元素。

:radio选择所有类型为单选框的元素。

:reset选择类型为重置的元素。等价于[type=’reset’]

:select获取select元素中所有被选中的元素。

:submit选择所有类型为提交的元素。

:text选择所有类型为文本的元素。

时间: 2024-07-29 23:17:35

JQ笔记之选择器的相关文章

CSS学习笔记(1):选择器

一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p {color:blue;} </style> </head> &

JQ基础之选择器

JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $('.two')   ( '.'代表类 ) 元素选择器 $('ul') ( 选取'ul'标签 ) $('#one>span') 属性选择器 $('[class]')    ( 所有具有'class'属性的元素 ) $('li[class]')           ( 选中'li'下的具有'class

js jq 笔记小结

Js第一课   1.vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 2.什么是js JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScr

jq基础2选择器1

html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <!--<link href="css.css" type="text

jq基础2选择器2

子元素选择器 :nth-child('intn').css() intn如3n就是3的倍数 或者 :nth-child('intn+1').css() i 其他方法 dom(1) css css方法属性 jq dom(1)(动态的) 创建节点 var none=$('<div id="box">text</div>') 插入节点(插入到那些位置) $('body').append(none) 插入节点的方法 jq dom(2) 包裹节点 删除节点 表单选择器 常

jq 笔记

http://bbs.miaov.com/forum.php?mod=forumdisplay&fid=40 2014.10.10jquery 2.0 不兼容ie 6 7 8,以上更适合做移动端开发,代码更少 1.js对于集合 document.getElementByTagName('div')[0] 只有一个div的情况 2.$==jQuery 用jQuery是为了防止冲突 起了两个这样的名字 3.jq () 中参数问题 html() css()等 ()没有参数就是获取,有参数就是赋值,设置

精通CSS version2笔记之⒈选择器

1.常用的选择器:①元素选择器   指定希望应用样式的元素.比如:p {color:#fff;}②后代选择器   寻找特定元素或者元素的后代. 比如:body p{color:#ccc;}   这个选择器和子选择器body>p的区别是:body>p是指body下作为子元素的所有节点P,而后代选择                    是body下面所有的节点P,可以说子元素选择器是一种特殊的后代选择器. ③类选择器  指定特定的类应用样式比如.a{color:#ccc;} 类选择器命名最好根据

JQ笔记

参数形式$("input:text",document.forms[0])选择form[0]所有input=text$("<p>123</p>")直接对字符串标签操作$(document.body)直接对标签操作$(function(){})直接操作函数 each(callback)$("ul").each({function(index){ this.li.html("xxx")}}) get(i)$

HTML 学习笔记 CSS(选择器2)

CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的标记文档后 才能使用这些选择器 所以使用这两种选择器 通常要做一些构想和计划 要考虑样式而不是考虑具体设计的元素 最常用的方法就是使用类选择器 修改HTML代码 在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作.为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值.