<!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. ES6 模块export import

    在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库).ES6 引入了模块化,其设计思想是在编译时就能确定模 ...

  2. VM虚拟机桥接模式无法联网、NAT模式能正常联网

    桥接模式:使虚拟机客户机可以和主机在同一网段,这样,和主机同局域网内的其他主机就也可以ping到虚拟机了: 因此,虚拟机设置为桥接模式,这样以后就可以方便的使用虚拟机了: 有时,虚拟机为桥接模式上不了 ...

  3. nmcli命令行修改网络连接名称

    目前在网上能找到的文章中,使用nmcli命令修改Linux系统中网卡连接的名称都是先创建新的连接,然后删除旧的连接的方式 此种方式其实完全不恰当,简直就是在浪费时间,nmcli命令本身就提供了直接修改 ...

  4. win 10，Maven 配置

    来源:https://www.cnblogs.com/lihan829/p/11503497.html 所需工具 : JDK 1.8 Maven 3.6.2 Windows 10 注Maven 3.2 ...

  5. C++第三十七篇 -- 调试驱动程序

    上一篇写的KMDF程序是通过串口进行配置的,那么我们在VS中Attach to process外,可以直接用Winbdg进行调试,winbdg.exe所在路径为C:\Program Files (x8 ...

  6. xmind2020 zen 10.2.1win/mac/linux安装教程

    xmind是一款优秀的思维导图软件,本文教大家如何安装xmind zen 2020 10.2.1版本,解锁使用全部功能,包括去掉xmind zen水印.上传图片等功能,支持windows/mac/li ...

  7. spring web.xml 标签<param-name>contextConfigLocation</param-name>

    <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</lis ...

  8. NPM 所有的指令已经问题 使用淘宝镜像 出现code EAI_AGAIN

    windows怎么卸载cnpm? npm uninstall cnpm -g windows怎么检测cnpm是否安装成功 cnpm -v 我们直接将node的仓库地址换成淘宝仓库地址即可 单次使用 n ...

  9. Couchdb 垂直权限绕过漏洞（CVE-2017-12635）

    影响版本:小于 1.7.0 以及 小于 2.1.1 首先,发送如下数据包: 修改数据包 { "type": "user", "name": ...

  10. vsftpd安装配置

    vsftpd安装配置 vsftpd测试服务器: 192.168.1.191 1.安装: yum provides */vsftpd yum install vsftpd -y 2.匿名用户最基本配置( ...