博客列表 >jQuery常用的过滤方法

jQuery常用的过滤方法

梁凯达的博客
梁凯达的博客原创
2018年05月05日 12:04:19978浏览

过滤方法,是指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>

运行实例 »

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



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议