jQuery的学习笔记2

jQuery学习笔记

Day two

Chapter two 选择器

类选择器

语法结构：
$(“.classname”)

javascript里面没有类选择器所以这个时候使用jQuery会更加的简便

通配选择器

语法结构：
jQuery（“*”）

例如下列代码就是匹配body里面的所有的元素

<script type="text/javascript">

$(function() {

$("*").css("color","red");

alert("hello");

}

)

</script>

注意：在书本上说可以在* 之前加上body表示范围，但是实际操作上会有问题，我加了body就没有办法显示出我想要的效果，但是如果我没有加body就会显示出我想要的效果，同时他还可以用另一种方法来代替，如下：
<script type="text/javascript">

$(function() {

var all=document.getElementsByTagName("*");

$("all").css("color","red");

alert("hello");

}

)

</script>

组选择器

语法结构：

jQuery（“selector1，selector2，selectorN）；

其实组选择器就是上面四种选择器的组合

2.2层级选择器

包含选择器

语法结构：
jQuery（”包含选择器 被包含选择器“）

作用：他能够作用于包含选择器下所有的被包含选择器，不管这个被选择器是在子节点还是子子节点，他唯一不作用的就是外面的节点

注意：在有多个CSS的时候，属性和属性值之间要用冒号，属性与属性之间要用逗号，所有的属性要用大括号包含起来；

<script type="text/javascript">

$(function() {

$("form input").css({"border":"groove 2px red",

"background":"blue"});

}

)

</script>

子选择器

语法结构：
jquery(“父选择器>子选择器”）

作用：他只能够作用于父亲节点下的第一层的子节点，不作用子子节点，更不作用于外面的节点

相邻选择器

语法结构：

jQuery（“相邻的前一个选择器+相邻的后一个选择器”）

作用：他只能作用于和他相邻的同级的一个选择器，但是要保证前一个选择器是唯一的，不然它无法判断你所寻找的到底是哪一个选择器的后面一个选择器。

兄弟选择器

语法结构：
    JQuery（“相邻的前一个选择器~同级的选择器”）

作用：它能够作用于和他同级的后面的所有的选择器，可见他的作用会比相邻选择器强

2.3简单的伪类选择器

特殊位置选择器

：firs表示匹配集合的第一个元素

：last 表示匹配集合的最后一个元素

：eq(index) 表示匹配集合中的第index元素，注意eq是从0开始算起的

指定范围选择器

：even 表示匹配索引值是偶数的，也就是行数是基数的

：odd  表示匹配索引值是奇数的，也就是行数是偶数的

：gt （index）表示匹配大于索引值是index的元素

：lt(index)  表示匹配小于索引值是index的元素

排除选择器：
语法结构：
JQuery（“selector1：not（selector2）”）；

作用能够匹配除了selector2以外的元素。

特殊选择器：

JQuery(“selector:animated”) 用来匹配动画元素

JQuery（“selector:header”) 用来匹配标题元素

2.4 与内容相关的伪类选择器

匹配包含给定文本的元素

语法结构：

JQuery（”selector：contains（text）”）；

作用：它能够根据指定的文本把包含这个文本的标签里面的内容全部设置成你定义的模式

注意：contains过滤函数中必须使用单引号包含关键字，否则JQuery就无法识别

匹配包含元素选择器

语法结构：
JQuery（“selector:has(selector2)”);

作用：是能够过滤出selector选择器里面的selector2选择器，因此selector2必须包含在selector选择器里面，否则是没有作用的。

包含判断选择器

语法结构:
Jquery(“selector:empty”):  作用：过滤出匹配元素中包含空内容的元素

Jquery(“selector:parent”);   作用：过滤出匹配元素中包含非空内容的元素

2.5 与元素显示状态相关的伪类选择器

语法结构：

Jquery(“selector:hidden”):  作用：过滤出匹配元素中所有不可见的元素

Jquery(“selector:visible”);   作用：过滤出匹配元素中所有可见的元素

注意：他是hidden而不是hide，hide是一个函数名很容易弄混

2.6匹配子元素的为类选择器

语法结构：
：nth-child  作用：匹配其父元素下的第N个或奇偶数

他的具体用法例如：

：nth-child(even);

注意：他和eq()的最大的不同就在于，eq是从0开始算起，但是nth-child是从1开始算起的

:first-child  作用：为每个父元素匹配第一个子元素

:last-child  作用：为每个父元素匹配最后一个子元素

:only-child  作用：父元素中含有其他元素将不会被匹配

注意：他是匹配父元素之中的元素，因此必须是父元素中的元素，否则不能匹配。

2.7与表单对象相关的为类选择器

语法结构：

：表单元素名；

例如：input，text，submit等

2,8与表单属性相关的为类选择器

语法结构：

：enabled 匹配所有可用的元素

：disabled匹配所有不可用的元素

：checked 匹配所有选中的被选中的元素

：selected 匹配所有选中的option元素

2.9属性选择器

属性选择器就是根据属性和属性值作为选择过滤条件，来进行匹配ＤＯＭ元素