1.jQuery的基本选择器
id选择器:一个用来查找的ID,即元素的id属性
$( "#id" )
类选择器,顾名思义,通过class样式类名来获取节点
描述:
$( ".class" )
类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选
如: $(".clsaa名称").css("border","3px solid red");
元素选择器:根据给定(html)标记名称选择所有的元素
描述:
$( "element" )
搜索指定元素标签名的所有节点,这个是一个合集的操作。
在CSS中,经常会在第一行写下这样一段样式
* {padding: 0; margin: 0;}
通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素
描述:
$( "*" )
抛开jQuery,如果要获取文档中所有的元素,通过document.getElementsByTagName()中传递"*"同样可以获取到
不难发现,id、class、tag都可以通过原生的方法获取到对应的节点,但是我们还需要考虑一个兼容性的问题,我这里顺便提及一下,比如:
- IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的
- getElementById的参数在IE8及较低的版本不区分大小写
- IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A
- IE8及较低的版本,浏览器不支持getElementsByClassName
看到了吧,作为一名合格的前端不是那么简单的,就一个基本的选择器上面都需要做这么多兼容,幸好有jQuery的出现,让我们省了很多功夫,
2层级选择器
子选择器:选择所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant")
后代选择器:选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子,孙子,曾孙等
$("prev + next")
相邻兄弟选择器:选择所有紧接在“prev”元素后的“next”元素
$("prev ~ siblings")
一般兄弟选择器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器
仔细观察层级选择器之间还是有很多相似与不同点
- 层级选择器都有一个参考节点
- 后代选择器包含子选择器的选择的内容
- 一般兄弟选择器包含相邻兄弟选择的内容
- 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下
3jQuery选择器之基本筛选选择器
$(":first") 匹配第一个元素 $(":last") 匹配最后一个元素 $(":not(selector)") 一个用来过滤的的选择器,选择所有元素去除不匹配给定的选择器元素 $(":eq(index)") 在匹配的集合中选择索引值为index的元素 $(":gt(index)") 选择匹配集合中所有大于给定index(索引值) $(":even") 选取索引值为偶数的元素,从0开始计数 $(":odd") 选取索引值为奇数的元素,从0开始计数 $(":lt(index)") 选取匹配集合中所有索引值小于给定index参数的元素 $(":header") 选择所有标题元素,像h1,h2,h3等 $(":lang(language)") 选择指定语言的所有元素 $(":root") 选择该文档的根元素 $(":animated") 选择所有正在执行动画效果的元素
遇到一些简称的代码,去查清楚全称,记忆会更牢固,就比如eq全称是equal(意思是“等于”);gt全称是greater than(意思是大于);lt全称是less than(意思是小于)。
$("input:not(:checked)+p").css("background-color", "red"); 选择input中没有被选中的元素,然后找出这些元素的直接兄弟元素;你把这个选择拆开看就好懂了
rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
基本筛选器
:first/:last/:even/:odd
div:first
:even
:odd
:even
:odd
:even
div:last
:odd
<script type="text/javascript">
//找到第一个div
$(".div:first").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:even 选择所引值为偶数的元素,从 0 开始计数
$(".div:even").css("border", "3px groove red");
</script>
<script type="text/javascript">
//:odd 选择所引值为奇数的元素,从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
</script>
:eq/:gt/:lt
:lt(3)
:lt(3)
:eq(2)
:gt(3)
:gt(3)
<script type="text/javascript">
//:eq
//选择单个
$(".aaron:eq(2)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
</script>
:not
Aaron
慕课
其他
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色
$("input:not(:checked)+p").css("background-color", "#CD00CD");
</script>
4jQuery选择器内容筛选选择器
1. $(":contains(text)"),匹配中包含文本text的元素 2. $(":parent"),匹配中所有含有子元素或者文本的元素 3. $(":empty"),匹配中没有子元素的元素 4. $(":has(selector)"),匹配中包含指定选择器元素的元素
- :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
- :parent与:empty是相反的,两者所涉及的子元素,包括文本节点
5JQ选择器之可见性筛选选择器
元素有显示状态与隐藏状态,jq根据元素的状态扩展了可见性筛选选择器:visible与:hidden 选择器 描述 $(":visible") 选择所有显示的元素 $(":hidden") 选择所有隐藏的元素 这两个选择器是jq延伸出的,虽然看上去比较简单,但是元素可见性依赖于使用的样式 :hidden选择器,不仅仅包含样式是 display="none"的元素,还包括隐藏表单、visibility等等 以下几种方式可以隐藏一个元素: 1.css display的值是none; 2.type="hidden"的表单元素; 3.宽度和高度都显式的设置为0; 4.一个祖先元素是隐藏的,该元素不会在页面上显示; 5.css visibility的值是hidden; 6.css opacity的值是0 如果元素占据文档中一定空间,那么元素被认为是可见的 可见元素的宽度或者高度是大于0 元素的visibility:hidden或者opacity:0被认为是可见的,因为他们仍然占用空间布局 不在文档中的元素是被认为不可见得,如果他们被插入到文档中,jq不能知道他们是否可见,因为元素的可见性依赖于适用的样式。
6属性筛选选择器:
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。 $("[attribute|='value']") 选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-”)的元素 $("[attribute*='value']") 选择指定属性具有包含一个给定的字符串的元素(选择给定的属性是以包含某些值的元素) $("[attribute~='value']") 选择指定属性用空格分隔的值中包含一个给定值的元素 $("[attribute='value']") 选择指定属性是给定值的元素 $("[attribute!='value']") 选择不存在指定属性,或者指定的属性值不等于给定值的元素 $("[attribute^='value']") 选择指定属性是以给定字符串开始的元素 $("[attribute$='value']") 选择指定属性是以给定字符串结尾的元素,这个比较是区分大小写的 $("[attribute]") 选择所有具有指定属性的元素,该属性可以是任何值 $("[attributeFilter1][attributeFilterN]") 选择匹配所有指定的属性筛选器的元素具体如下:
$('div[name=p1]'): //查找所有div中,属性name=p1的div元素 $('div[p2]'): //查找所有div中,有属性p2的div元素 $('div[name|="-"]')//查找所有div中,有属性name中的值只包含一个连字符“-”的div元素,或以连字符‘-’相连的前缀为字符“-”的div $('div[name~="a"]') //查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素,以空格风格的属性中有属性值a $('div[name^=imooc]') //查找所有div中,属性name的值是用imooc开头的 $('div[name$=imooc]') //查找所有div中,属性name的值是用imooc结尾的 $('div[name*="test"]')//查找所有div中,有属性name中的值包含一个test字符串的div元素 $('div[testattr!="true"]')//查找所有div中,有属性testattr中的值没有包含"true"的div
7子元素筛选选择器
子元素筛选选择器不常使用。 1.$(":first-child")选择所有父级元素下的第一个元素。 2.$(":last-child")选择所有父级元素下的最后一个子元素 3.$(":only-child")如果某个元素是其父元素的唯一子元素,那么它就会被选中 4.$(":nth-child")选择的父元素下面的第几个子元素 5.$(":nth-last-child")选择父元素下面的倒数第几个元素
注意事项:
- :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
- :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
- 如果子元素只有一个的话,:first-child与:last-child是同一个
- :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
- jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
- nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算
8表单选择器
$(':input') 选择所有input,text,area,select和button元素 $(':text') 匹配所有文本框 $(':password') 匹配所有密码框 $(':radio') 匹配所有单选按钮 $(':checkbox') 匹配所有复选框 $(':submit') 匹配所有提交按钮 $(':image') 匹配所有图像域 $(':reset') 匹配所有重置按钮 $(':button') 匹配所有按钮 $(':file') 匹配所有文本域 除了input筛选选择器,几乎每一个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如:$(':password') = = $('[type = password]')
9表单对象属性 选择器
表单对象属性选择器也是专门针对 表单元素的选择器 可以附加在其他选择器的后面 对表单元素进行筛选 $(":enabled") 选取可以使用的表单元素 $(":disabled")选取不可以使用的表单元素 $(":checked")选取被选择中的<input> $(":selected")选取被选择中的<option>元素
注意事项:
- 选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素
10jQuery选择器之特殊选择器this
相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?
this是JavaScript中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者
下面例子中,imooc是一个对象,拥有name属性与getName方法,在getName中this指向了所属的对象imooc
var aaa= { name:"name值", getName:function(){ //this,就是aaa对象 return this.name; } } imooc.getName(); //name值
当然在JavaScript中this是动态的,也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法),具体的大家可以查阅相关资料
同样的在DOM中this就是指向了这个html元素对象,因为this就是DOM元素本身的一个引用
假如给页面一个P元素绑定一个事件:
p.addEventListener('click',function(){ //this === p //以下两者的修改都是等价的 this.style.color = "red"; p.style.color = "red"; },false);
通过addEventListener绑定的事件回调中,this指向的是当前的dom对象,所以再次修改这样对象的样式,只需要通过this获取到引用即可
this.style.color = "red"
但是这样的操作其实还是很不方便的,这里面就要涉及一大堆的样式兼容,如果通过jQuery处理就会简单多了,我们只需要把this加工成jQuery对象
换成jQuery的做法:
$('p').click(function(){ //把p元素转化成jQuery的对象 var $this= $(this) $this.css('color','red') })
通过把$()方法传入当前的元素对象的引用this,把这个this加工成jQuery对象,我们就可以用jQuery提供的快捷方法直接处理样式了
总体:
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。