<!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. Git初始化本地已有项目

    1.初始化仓库 git init 2.remote git remote add origin 仓库地址 3.从远程分支拉取master分支并与本地master分支合并 git pull origin ...

  2. Pytest单元测试框架之FixTure内置临时文件tmpdir操作

    1.前言:某些接口需要引用上个接口返回的值,作为下个接口的入参,但笔者又不想在本地维护及创建此文件,此时引出fixture内置函数中的临时文件存储tmpdir 2.首先下面的源码是使用flask框架写 ...

  3. javascript中“==”，“===”和“Object.is(a,b)”的区别

    作为两个量比较的三种方式"==","==="和"Object.is(a,b)"有一定区别,如下(具体见MDN): (1)Object.is( ...

  4. npm 安装、卸载模块

    npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录:[npm install -g xxx]利用npm安装全局模块xxx:本地安装时将模块写入packa ...

  5. Clip Studio Paint EX 1.10.6安装破解教程

    clip studio paint是一款牛逼的绘图软件,简称csp.做动漫.漫画设计的同学的必备神器.本文教大家如何安装并破解 clip studio paint ex 1.10.6版本,文章教程提供 ...

  6. OpenFaaS实战之四：模板操作(template)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. SQL语句（六）分页查询和联合查询

    目录 一.分页查询 语法格式 应用 二.联合查询 语法和作用 特点 应用 UNION和UNION ALL的区别 一.分页查询 语法格式 SELECT 查询列表 FROM 表 WHERE ... GRO ...

  8. Java架构师-十项全能学习笔记（1）

    Java架构师-十项全能学习笔记(1) @Configuration @EnableStateMachine public class OrderStateMachineConfig extends ...

  9. PWN——uaf漏洞学习

    PWN--uaf漏洞 1.uaf漏洞原理 在C语言中,我们通过malloc族函数进行堆块的分配,用free()函数进行堆块的释放.在释放堆块的过程中,如果没有将释放的堆块置空,这时候,就有可能出现us ...

  10. C语言运算符（关系运算符）+（逻辑运算符）

    下表显示了 C 语言支持的所有关系运算符.假设变量 A 的值为 10,变量 B 的值为 20,则: 实列: 1 #include <stdio.h> 2 3 int main() 4 { ...