<!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. File类与常用IO流第一章File类

    第一章:File类 一.1个重点单词: file:文件:directory:文件夹/目录:path:路径(绝对路径:absolutePath) 二.4个静态成员变量: 1.static String ...

  2. window对象之计时器--v客学院技术分享

    setTimeout()和setInterval()可以用来注册在指定的时间之后单次或者重复调用的函数.因为它们都是客户端JavaScript中重要的全局函数,所以定义为window对象的方法,但是作 ...

  3. ssh保持长连接的方式

    方法有以下三种:1.修改server端的etc/ssh/sshd_configClientAliveInterval 60 #server每隔60秒发送一次请求给client,然后client响应,从 ...

  4. Apache HBase 1.7.1 发布，分布式数据库

    Apache HBase 是一个开源的.分布式的.版本化的.非关系的数据库.Apache HBase 提供对数十亿个数据的低延迟随机访问在非专用硬件上有数百万列的行. 关于 HBase更多内容,请参阅 ...

  5. 电子物流中的EDI 应用

    电子物流中的EDI 应用 背景 EDI 全称是Electronic data interchange, 即电子数据交换.在传统企业里,很多流程上的操作或者通信一般是由纸质媒介完成的,比如说采购订单.发 ...

  6. 【转载】PHP 程序员进阶之路

    原文:没有Nginx,你还能做什么? PHP程序员的未来不是Java,Java拯救不了你. 已经1368年了,你扪胸自问,没有了Nginx的你,还能用PHP做什么.有一些高端的刁民会愤怒地说:&quo ...

  7. P6845 [CEOI2019] Dynamic Diameter

    P6845 [CEOI2019] Dynamic Diameter 题意 一颗带权树,每次更改一条边的权,每次修改后求出最大直径.强制在线. 思路 \(O(n\log^2n)\) 的暴力做法. 根据经 ...

  8. Windows下删除顽固文件夹

    参考链接: https://www.cnblogs.com/azbane/p/9808802.html 第一步:修改当前文件夹所有者为管理员 takeown /f * /a /r 第二步:修改管理员权 ...

  9. 如何获取SQL Server数据库连接字符串的某些部分

    有的时候需要获取SQL Server数据库连接字符串的某些部分.用正则表达式可能有点麻烦. 其实有一个比较简单的方法--使用SqlConnectionStringBuilder. var builde ...

  10. 利用swagger和API Version实现api版本控制

    场景: 在利用.net core进行api接口开发时,经常会因为需求,要开发实现统一功能的多版本的接口.比如版本V1是给之前用户使用,然后新用户有新需求,这时候可以单独给这个用户写接口,也可以在V1基 ...