<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>筛选</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

    <style type="text/css">

    	body{

    		font-family: "Microsoft YaHei"

    	}

    	.cGreen{color: #4CA902}

    	.cPink{color: #ED4A9F}

    	.cBlue{color: #0092E7}

    	.cCyan{color: #01A6A2}

    	.cYellow{color: #DCA112}

    	.cRed{color: #B7103B}

    	.cPurple{color: #792F7C}

    	.cBlack{color: #110F10}

    	.cOrange{color: #FF4500}

    	.cGray{color: #A9A9A9}

    	.hide{display: none;}

    	span {

    		float:left;

    	}

    	ul li {

    		width:120px;

    		float: left;

    		margin-left: 10px;

    	}

    </style>

    <script type="text/javascript">

    /*

    first()、last()、is()、parent()、has()、find()、

    siblings()。

    */

    $(document).ready(function() {

    	// <input type="button" id="btn1" value="first()筛选中国的第一个城市">

        $("#btn1").click(function() {

			$("#chn li").first().addClass("cGreen");

			console.log($("#chn li").first().text());

		});

        // <input type="button" id="btn2" value="last()筛选美国的最后一个城市">

        $("#btn2").click(function() {

			$("#chn li").last().addClass("cGreen");

			console.log($("#chn li").last().text());

		});

        // <input type="button" id="btn3" value="is()判断广州（li）的父元素是否是ul元素，若是则输出该元素的id值">

        $("#btn3").click(function() {

			if ($("#gz").parent().is("ul")) {

				console.log("广州的父元素是ul，并且它的id对应的值为："+

						$("#gz").parent().attr("id"));

			}

		});

        // <input type="button" id="btn4" value="has()筛选加粗的城市并将其颜色设置为红色">

        /* has针对于寻找特定元素 */

        $("#btn4").click(function() {

			// 也可以直接$("li")但是速度会慢一点！文档较长的时候会慢很多。

        	$("ul li").has("span").addClass("cRed");

		});

        // <input type="button" id="btn5" value="find()查找美国城市中所有的span元素">

        /* find着重于搜索 */

        $("#btn5").click(function() {

			$("#usa li").find("span").addClass("cBlue");

		});

        // <input type="button" id="btn6" value="parent()查找城市(li元素)的父元素，并且父元素的id为chn">

        $("#btn6").click(function() {

			$("ul li").parent("#chn").addClass("cPurple");

		});

        // <input type="button" id="btn7" value="siblings()选取广州(li元素)的所有兄弟城市">

        $("#btn7").click(function() {

			$("#gz").siblings().addClass("cYellow");

		});

	});

    </script>

  </head>

  <body>

  	<span>中国城市</span>：<br>

    <ul id="chn">

    	<li id="bj"><span style="font-weight: bold;">北京</span></li>

    	<li id="sh">上海</li>

    	<li id="gz">广州</li>

    	<li id="sz">深圳</li>

    	<li id="hk">香港</li>

    </ul>

    <br><br>

    <span>美国城市</span>：<br>

    <ul id="usa">

    	<li id="wst"><span style="font-weight: bold;">华盛顿特区</span></li>

    	<li id="ny">纽约</li>

    	<li id="la">洛杉矶</li>

    	<li id="scg">芝加哥</li>

    </ul>

    <br><br>

    <span>德国城市</span>：<br>

    <ul id="ger">

    	<li id="mnh">慕尼黑</li>

    </ul>

    <div style="clear:both;"></div>

    <br><br>

    <hr>

    <input type="button" id="btn1" value="first()筛选中国的第一个城市">

    <input type="button" id="btn2" value="last()筛选美国的最后一个城市">

    <input type="button" id="btn3" value="is()判断广州（li）的父元素是否是ul元素，若是则输出该元素的id值">

    <input type="button" id="btn4" value="has()筛选加粗的城市并将其颜色设置为红色">

    <input type="button" id="btn5" value="find()查找美国城市中所有的span元素">

    <input type="button" id="btn6" value="parent()查找城市(li元素)的父元素，并且父元素的id为chn ">

    <input type="button" id="btn7" value="siblings()选取广州(li元素)的所有兄弟城市">

  </body>

</html>

其实个人感觉这个方法.first()比前面的基本过滤选择器中的(":first")更加的实用，因为这个.first()可以单独使用一直在方法后面连缀！不像(":first")必须写在表达式中。

jQuery中的筛选（六）：first()、last()、has()、is()、find()、siblings()等的更多相关文章

  1. jQuery中的筛选（六）

    1. eq(index|-index) 获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个.当参数为负数时为反向选取,比如-1 ...

  2. 从零开始学习jQuery (六) jquery中的AJAX使用

    本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即 ...

  3. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  4. 从零开始学 Web 之 Ajax（六）jQuery中的Ajax

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. jQuery中ajax请求的六种方法（三、六）：load()方法

    6.load()方法 load的html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  6. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  7. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  8. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

随机推荐

  1. SpringBoot自动装配-自定义Start

    SpringBoot自动装配 在没有使用SpringBoot之前,使用ssm时配置redis需要在XML中配置端口号,地址,账号密码,连接池等等,而使用了SpringBoot后只需要在applicat ...

  2. Echarts入门踩坑记录

    关于Echarts,官网上,是这样介绍的,"Echarts,一个使用JavaScript实现的开源可视化库",也就是说,在使用过程中,将其作为普通的JavaScript组件库使用即 ...

  3. PAT乙级：1056 组合数的和 (15分)

    PAT乙级:1056 组合数的和 (15分) 给定 N 个非 0 的个位数字,用其中任意 2 个数字都可以组合成 1 个 2 位的数字.要求所有可能组合出来的 2 位数字的和.例如给定 2.5.8,则 ...

  4. 忘记Apple ID密码，如何从iPhone/iPad上移除iCloud账号

    忘记Apple ID密码?不用担心!在本文中,我们将分享3种有效方法,即使您不知道密码,也可以轻松移除iPhone或iPad设备上的iCloud账号. 注意:移除iCloud 账号前请备份数据 在开始 ...

  5. redis的单线程

    一.redis为什么这么快 1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1):2.数据结构简单 ...

  6. element UI+vue关于日期范围选择的操作，picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  7. Django JSONField/HStoreField SQL注入漏洞（CVE-2019-14234）

    复现 访问http://192.168.49.2:8000/admin 输入用户名admin ,密码a123123123 然后构造URL进行查询,payload: http://192.168.49. ...

  8. 电脑桌面与群晖NAS双向实时同步-20210105

      电脑桌面与群晖NAS双向实时同步 2021年1月15日星期五   一.购买群晖DS920+网络存储服务器.NEC超轻笔记本电脑(重量小于800克).小米10至尊版安卓智能手机和intel i9 1 ...

  9. pom.xml中web.xml is missing and <failOnMissingWebXml> is set to true错误的解决

    .personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...

  10. PDL语言/ 盒图N-S/ PAD图

    PDL语言 伪码伪代码 基本语法 算法用Begin开始,以End结束(如果只表示中间部分的算法可以不要) 每一条指令,占一行.指令的结束不用任何符号 注释 用"//"表示 用Pri ...