<!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. Java 获取、删除Word文本框中的表格

    本文介绍如何来获取Word文本框中包含的表格,以及删除表格. 程序测试环境包括: IDEA JDK 1.8.0 Spire.Doc.jar 注:jar导入,可通过创建Maven程序项目,并在pom.x ...

  2. SetupDi系列函数

    SetupDiClassGuidsFromName WINSETUPAPI BOOL SetupDiClassGuidsFromNameA( PCSTR ClassName, LPGUID Class ...

  3. 论文笔记：（2019）LDGCNN : Linked Dynamic Graph CNN-Learning on PointCloud via Linking Hierarchical Features

    目录 摘要 一.引言 A．基于视图的方法 B．基于体素的方法 C．基于几何的方法 二.材料 三.方法 A．问题陈述 B．图生成 C．图特征提取 D．变换不变函数 E．LDGCNN架构 F．冻结特征提取 ...

  4. 自学linux——17.selinux的了解及使用

    SElinux是强制访问控制(MAC)安全系统,是linux历史上最杰出的新安全系统.对于linux安全模块来说,SElinux的功能是最全面的,测试也是最充分的,这是一种基于内核的安全系统. 1.S ...

  5. python自动化之(自动化测试报告)

    前言: 给予你们最关心的3步骤 什么是自动化测试报告?  答:在自动化测试过程中自动生成的测试报告 为什么要做自动生成测试报告? 答:真正的解放双手; 可以形成直观的测试结果; 给自己一个装X的机会; ...

  6. Python3中dict字典的相关操作函数

    字典对象的内建函数 1. clear() 清空字典. 例: >>> a = {1:3, 2:4} >>> a.clear() >>> a {} 2 ...

  7. Linux 硬盘与硬件管理

    硬件以文件系统(Filesystem)角度来看 文件系统:一个可被挂载的数据称为文件系统,每个操作系统可以使用的文件系统并不一样,windows98是FAT或者FAT16文件系统,而windows20 ...

  8. awk-06-常用内置函数

    常用内置函数 示例 1.int 2.sqrt 3.rand rand()并不是每次运行都会产生一个随机数,会一直保持不变 所以需要srand() 函数一起 但是还是有很大的几率会生成一样 4.asor ...

  9. MongoDB-02-复制集

    复制集(ReplicationSet) 基本原理 基本构成是1主2从的结构,自带互相监控投票机制(Raft(MongoDB) Paxos(mysql MGR 用的是变种)) 如果发生主库宕机,复制集内 ...

  10. Java TreeMap 和 LinkedHashMap【笔记】

    Java TreeMap 和 LinkedHashMap[笔记] TreeMap TreeMap基本结构 TreeMap 底层的数据结构就是红黑树,和 HashMap 的红黑树结构一样 与HashMa ...