jQuery选择器与一些常用的方法
1、jQuery是JavaScript里面一些函数的库，下载的地址为jquery.com
2、jQuery中的常规选择器
1) jQuery中有的选择器 class类 元素类 id类 群组选择器 后代选择器 通配
选择器（*）
2) jQuery中的选择器与CSS中的选择器非常相似 只是有些许的不同
3) class类与元素类都可以选择多个进行设置
4) id类只能选择一个 若一个页面中出现多个id值时 只会选择第一个 不会
选择多个（一个页面中的标准格式是一个id值只可以出现一次）
5) length属性可以返回获得的元素的长度 在获得id的长度时 无论页面中
有多少个id值 都只会获得一个
6) eq()方法与get()方法的区别
eq()返回的是一个jQuery对象 通过()中的数字决定获得的是第几个元素
get()返回的是html对象 通过()中的数字决定获得的是第几个元素
7) 群组选择器 可以一起设置多个元素的相同的属性 可以用过元素名
class值 id值今次那个设置 多个名称之间用","隔开
8) 后代选择器 可以通过元素之间的父级子级关系对元素进行进行设置
9) 通配选择器（*）可以选择页面中的所有的代码从html开始选择
10) 可以给class id值前面加上元素的前缀 也可以实现多个class进行设置
3、JQuery中的属性选择器
1) 元素[元素含有的属性]
$('a[title]').css('color','red');
此代码表示a标签含有title属性 改变它的字体颜色
2) 元素[元素含有的属性=属性的值]
$('a[title=num1]').css('color','red');
此代码表示a标签含有title属性 而且title的值与里面的值相等 改变
它的字体颜色
3) 元素[元素属性!=属性的值]
$('a[title!=num1]').css('color','red');
此代码表示a标签里不含有title属性 或者title属性的值不是num1
改变它的字体的颜色
4、jQuery中的一些常用的方法
1) next()、prev()方法可以找到指定元素下面、上面的同级的第一个元素
()内部是要找的元素名
2) nextAll()、prevAll()方法可以找到指定元素下面、上面的同级的所有
元素()内部是要找的元素名
3) siblings()方法可以获得上面的所有元素 也可以获得下面的所有元素
相当于nextAll()、prevAll()方法一起使用
4) first()方法 可以获得第一个元素
5) last()方法 可以获得最后一个元素
6) not()方法 可以获得不是里面的属性的其它的元素
()内部可以填一些id值 class值
7) parent()方法 获得元素的父级的元素
8) 元素:hidden;
此属性可以设置隐藏的元素 display:none;
9) 元素:visible;
此属性可以设置显示的元素 display:block;
10) first-child属性 获得每一个元素的第一个元素对象
11) last-child属性 获得每一个元素的最后一个元素对象
12) only-child属性 获得只有一个子元素的对象
13) nth-child()方法 可以获得()内指定的条件的元素
索引值从1开始
even 获得是偶数位的元素
odd 获得是奇数位的元素
()内部可以直接写数字 表示要找到的对象的位置
可以填入"数字n" 如"2n"表示找到是2的
倍数的元素
()内部可以写"2n+1"表示的含义是获得2
的倍数的
后一个元素
14) is()方法 用来进行判断 内部可以传入选择器 DOM对象 jQuery对
象 function()函数
15) hasClass()方法 用来进行判断 内部传入class的名字 不能加"."
判断是否有元素有这个class值
16) slice()方法 获取整个代码中的元素值
从第一参数~第二个参数之间的元素
参数可以是负值 负值表示从后面开始
17) end()方法 获取上一个元素 与parent()方法不同
它可以
是同级的元素
18) contents()方法 可以获得元素中的文本
children()方法 只能获得元素中的标签
不能获得元素中的文本
19) filter()方法 灵活性特别高 可以在里面传入各种选择器
的值 之间用","隔开 也可以在里面传入函数
对条件进行限制 使其更为准确
代码如下：
HTML代码：
<title>常规选择器</title>
<link rel="stylesheet" href="jQ.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQ.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li class="red">2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
jQuery代码：
$(function(){
$('li').filter(function(){
return $(this).attr('class') == 'red';
}).css('background','pink');
$('li').filter('li:last,li:first').css('background','yellow');
});
运行结果：
扫一扫
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
