简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery常用的过滤方法
Blogger Information
Blog 250
fans 3
comment 0
visits 321067
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery常用的过滤方法
梁凯达的博客
Original
975 people have browsed it

过滤方法，是指jquery中常用的一些函数，对象获取方法。其中包括了：

写法:   $(‘li’).get(1).css('background','red')

1、get（1）：过滤函数，用于获取$('x')对象中的某个位置

2、eq（2）：eq更有序列的意思，准确来说，eq可以获取某个序列中的索引

3、first（）：first中的值一般为空，索引中第一个位置

4、last（）：last中的值一般为空，索引中第一个位置

5、toArray（）：作用为控制其包含的运行函数部分内容

6、find（）:用于获取后代元素，孙元素，子元素都可获取

7、children（）:用于返回子元素

8、each（）元素遍历：规定为每个匹配元素规定运行的函数

9、siblings（）元素遍历：选中了元素之外的其他元素

10、next（）选中元素的下级元素

11、nextAll（）选中元素下面的的全部元素

12、add（）加入一个索引在jquery中，使其继承该函数

13、slice(2.5) 范围选择，选中元素位置2~5

代码部分：

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		li{
			list-style: none;
			margin: 20px;
		}
		ul{
			text-align: center;
			margin-top: 200px;
		}
		a{
			margin-left: 20px;
		}
		.cls{
			background: brown;
		}
		.red{
			color: red;
		}
		.green{
			color: green;
		}
	</style>
</head>
<body>
	<ul>
		<li>(1)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(2)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(3)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(4)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(5)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(6)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(7)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(8)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<p>我是你大哥</p>
		<li>(9)测试li文本变化<a href="">测试文本颜色变化</a></li>
		<li>(10)测试li文本变化<a href="">测试文本颜色变化</a></li>
	</ul>	
</body>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
      $('li').get(1).style.color="blue"
      //使用过滤函数，get到第二个li，并使他的颜色变为蓝色，该方式无法使用.css
      $('li').eq(2).css('color','royalblue')
      //使用过滤函数eq(),索引第三个li标签，并使得他的颜色变为蓝色
      $('li').first().css('color','yellow')
      $('li').last().css('color','yellow')
 	  //调取函数first、last，设置了第一个和最后一个li标签的颜色
 	  var li=$('li').toArray()
 	  $('*').removeAttr('style')
 	  for(var i=0;i<li.length;i++){
 	  	li[i].style.color='orange'
 	  }
//调取了一个回调函数toArray,作用为控制其包含的运行函数部分内容。其中设置了全局元素清楚，
//    利用for标签设置了循环（此处循环为变量名为i，不能设置为li，如果设置为li的话会导致冲突，变量无法生成
//    回调函数中，设置了li中的循环，颜色为橘黄色。
      $('*').removeAttr('style')
      $('li').find('a').css('color','red')
      //fine函数，用于获取后代元素，此处获取了li标签中的a标签
      $('*').removeAttr('style')
      $('ul').children('li').css('color','orange') 
      $('ul').children('p').css('color','orange') 
      //此处只返回下一级的元素，对于孙元素并不见效，children元素用于返回下级子元素。
 	  $('*').removeAttr('style')
      $('li').each(function(){
      	$(this).css('color','red')
      }
      )
      //元素遍历，each函数返回了绝对的位置，并在function中增加了对这个位置的动作，样式修改等等。
      $('*').removeAttr('style')
      $('li').eq(2).next().css('background','darkgoldenrod')
//    $('li').eq(2).next().css('background','darkgoldenrod')
	  $('li').eq(2).siblings().css('background','darkgoldenrod')
	  //此处为元素遍历，eq/next设置了位置+1.位置的下一个位置、eq/nextAll则设置了位置下面的全部/eq/siblings则设置了元素之外的其他选中
	  $('*').removeAttr('style')
	  $('li').add('p').css('background','aquamarine')  
	  //add函数是加入了其他的元素，一个jq语法中，适合加入判断，加入样式修改等等
	  $('*').removeAttr('style')
	  $('li').slice(2.5).css('background','black')
	  //slice函数（1,2）=（起始，结束），（3）=（3~结束），语法如上
      
      </script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！