jq 选择器

层次选择器:

$(‘div p‘);//选取div下的所有的p元素

$(‘div>p‘).css(‘border‘,‘1px solid red‘);//只选取div下的直接子元素

//相邻的元素

$(‘div ~ p).css(‘border‘,‘1px solid red‘);与$(‘div‘).nextAll(‘p‘)等价;//表示div后面的

所有p兄弟元素

$(‘div ~ *‘).css(‘border‘,‘1px solid red‘);//表示div后面的所有兄弟元素

$(‘div +p‘).css(‘border‘,‘1px solid red‘);与$(‘div‘).next(‘p‘)等价//这种写法表示div后

只找紧挨着的第一个兄弟元素,并且该元素是p。

获得兄弟元素的方法:

next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)

nextAll();//当前元素之后的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素(上一个)

prevAll();//当前元素之前的所有兄弟元素

siblings();//当前元素的所有兄弟元素

基本过滤选择器:

$(‘p:first‘)与$(‘p‘).first()是等价的。获取所有p元素中的第一个P元素

$(‘p:last‘)与$(‘p‘).last()

$(‘p:eq(2)‘)在所有的p元素中找到索引为2的元素

$(‘p:even‘)选取所有奇数的p标签

$(‘p:odd‘)选取所有偶数的p标签

$(‘p:not(.tst)‘).css();选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称

$(‘p:gt(1)‘)选取所有索引值大于1的p元素

$(‘p:lt(3)‘)选取所有索引值小于3的p元素。

$(‘:header‘)选取页面上所有的h1-h6的元素。(如果这样写的话,中间绝对不能有空格。)

属性过滤选择器:

$("div[id]")选取有id属性的<div>

$("div[title=test]")选取title属性为“test”的<div>,jQuery中没有对getElementsByName

进行封装,用$("input[name=abc]")

$("div[title!=test]")选取title属性不为“test”的<div>

还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等,条件还

可以复合。【[属性1=a][属性2=b]…】(*)

表单对象属性选择器(过滤器):

$("#form1 :enabled")选取id为form1的表单内所有启用的元素

$("#form1 :disabled")选取id为form1的表单内所有禁用的元素

$(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.

$("select :selected")选取所有选中的选项元素(下拉列表)

表单滤选择器:

$(‘#form1:enabled‘);//这个表示能够启用的且id为form1的标签

$(‘#form1  :enabled‘);//这个表示能够启用的且id为form1下的所有启用的元素。

$(‘input:checked‘)

$(‘input:disabled‘)

$ (‘select:selected‘)

$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样,

$("input")只获得<input>

$(":text")选取所有单行文本框,等价于

$("input[type=text]"),$(‘input[type=text]‘),$(‘:text‘);

$(“:password”)选取所有密码框。

内容过滤选择器:

:contains(text):过滤出包含给定文本的元素。

:empty包含没有子元素的或者是内容为空的元素。

:has(selecttor)

:parent  获得有子元素的元素。

可见性过滤器:

:hidden

选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)

1.表单元素type=“hidden”

2.设置css的display:none

3.高度和宽度明确设置为0的元素。

4.父元素时隐藏的,所以子元素也是隐藏的

visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本

jQuery不太一样,1.3.2之前)

 :visible

选取所有可见元素

子元素过滤选择器:

first-child  与first的区别:first只能选取第一个,而first-child,则能选取每个子元素的第一个元素。

last-child:

only-child:匹配当前父元素中只有一个子元素的元素。

nth-child:对比eq()来理解,eq()值匹配一个,nth-child()为每个父元素都要匹配一个子元素。

nth-child(index),index从1开始

nth-child(even)

nth-child(odd)

nth-child(3n),选取3的倍数的元素

nth-child(3n+1)满足3的倍数+1的元素

注意:

1.通过jQuery选择器选择的对象本身就是一个jQuery对象,选择器具有隐式迭代     的作用,例如:

$(‘p‘).click(function(){

alert(this.innerText);

});

是为所有的p都注释了click事件。

2.无论选择器选择了几个元素返回的一个元素都是一个集合对象,如果没有找到相应的元素,则这个集合对象的length值为0,如果选择到了元素,这个length的元素就是选择的元素的索引值。所以也根据这个属性来判断元素是否存在。例如:

Iif($(‘#div‘).length>0)//判断元素是否存在

3.在事件中this还是表示当前触发事件的元素的对象,但是这里的this是dom对象而不是jQuery对象。如果需要执行jQuery中的方法或属性时,应该把this转换为jQuery对象

转换方式为:$(this);

时间: 2024-10-03 14:55:46

jq 选择器的相关文章

2015.7.20 第十课 课程重点(jq选择器:id、类、标签、特殊、属性、包含、位置、过滤)

1.在VS中新建jq项目: 新建web窗体时选择第二个: 将系统生成的多余文件夹删掉,仅留下Scripts和Web.config: 将Scripts文件夹改名为我们熟悉的js(也可以不改,仅推荐改),并新建文件夹css和image,并在对应位置添加页面,html.css.js 将上图鼠标所指的.min.js文件拖动到html中,将自己新建的js文件拖动到它下方,如图: *两者上下位置关系千万别弄饭了,min.js一定要在最上面. 将Script文件夹中的第一个js文件(_references.j

JQ选择器...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQ选择器</title> <style type="text/css"> .focused{ background:#abcdef; } </style> </head> <body> &

Jquery 第一课(jq选择器:id、类、标签、奇偶、eq、nth-child、子元素、属性、包含、位置、过滤)

一.什么是jQuery? jQuery是一款比较优秀的js框架.是将js中比较常用的方法封装底层.口号是"write less,do more". 二.如何使用jQuery呢?(使用jQuery的整体思路) 1.页面加载完之后 2.找到对象 3.执行你要的事件 4.声明一个事件(function()) 5.完成事件里面的内容 三.第一个jQuery程序 注意小点:1.引入jQuery文件的时候,把jQuery的文件放js文件之前(页面由上而下执行). 2.$的作用 一个是页面加载 还有

类jq选择器扩展.

这几天一有空就在折腾类jq选择器,昨天晚上自己实现了选择器的大致雏形.今天接着折腾给这个简陋的选择器增添新的方法. 我们平时用jq选择器,不只能够用$(str)方法获取元素,也支持$(dom对象集合): 为了造的更像我们常用的这个轮子,接着对昨天晚上做的选择器又进行了一点扩展. 以下是昨天坐的选择器雏形, 利用getEle(str)方法便可获取dom元素集合. function getByClass(oParent,sClass){ if(oParent.getElementsByClassNa

JQ 选择器篇1

基本选择器  1)id # 选择器 找到 id 相对应的元素 eg: $(“#container”)  找到id 为container的元素的集合 2). class  类选择器 找到 class 包含 此类的元素 eg $(“.content”)  找到只要class里面包含content类的的元素的集合 3)元素选择器 顾名思义可以找到 相对应的元素 eg:$(“img”)  找到所有的img 元素 4) * 选择器 (任意元素选择器 ) 可以找到任意元素 eg: $(“*”) 找到的是整个

jq选择器汇总

1 $("div") //标签 2 $(".box") //类 3 $("#box") //ID 4 $("a[href][name]") //多个属性 5 $("a[name]") //选取带有name的a 6 $("a[name='aaa']") //选取带有name并且值为aaa的a 7 $("a[name~=aaa]") //选取属性值中包含aaa的a 8 $

第十课 课程重点(jq选择器:id、类、标签、奇偶、eq、nth-child、子元素、属性、包含、位置、过滤)

1.在VS中新建jq项目: 新建web窗体时选择第二个: 将系统生成的多余文件夹删掉,仅留下Scripts和Web.config: 将Scripts文件夹改名为我们熟悉的js(也可以不改,仅推荐改),并新建文件夹css和image,并在对应位置添加页面,html.css.js 将上图鼠标所指的.min.js文件拖动到html中,将自己新建的js文件拖动到它下方,如图: *两者上下位置关系千万别弄饭了,min.js一定要在最上面. 将Script文件夹中的第一个js文件(_references.j

[转载]JQ 选择器大全

Warning:  Format string is not a string literal (potentially insecure) [objc] view plaincopy NSString * str = nil; str = [NSString stringWithFormat:@"---%d---", 18] ; NSLog(str); 解决1: [objc] view plaincopy NSLog(str,nil); 解决2: [objc] view plainc

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g

JQ选择器篇2

  1)层级选择器 a.子代选择器  > eg: 查找div 子代的类包含content的元素 $(“div>.content”) b.所有子代选择器  (某个元素里面的所有元素) eg 查找表单from里面的所有input元素  $(“form input”) c.prev+next 匹配所有紧接在 prev 元素后的 next 元素 eg :查找紧接着所有lable元素后面为input的元素 $(“lable+input”) d.prev~slibings 匹配 prev 元素之后的所有同