jQuery中的筛选（六）：first()、last()、has()、is()、find()、siblings()等
<!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()等的更多相关文章
- jQuery中的筛选（六）
1. eq(index|-index) 获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个.当参数为负数时为反向选取,比如-1 ...
- 从零开始学习jQuery (六) jquery中的AJAX使用
本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 从零开始学 Web 之 Ajax（六）jQuery中的Ajax
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery中ajax请求的六种方法（三、六）：load()方法
6.load()方法 load的html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（4）jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
随机推荐
- MapReduce学习总结之Combiner、Partitioner、Jobhistory
一.Combiner 在MapReduce编程模型中,在Mapper和Reducer之间有一个非常重要的组件,主要用于解决MR性能瓶颈问题 combiner其实属于优化方案,由于带宽限制,应该尽量ma ...
- Appium - monkey自定义脚本实践（四）
monkey自定义脚本实践 一.获取元素坐标点位置 二.Monkey脚本API简介 常规Monkey测试执行的是随机的事件流,但如果只是想让Monkey测试某个特定场景这时候就需要用到自定义脚本了,M ...
- Leetcode3.无重复字符的最长子串——简洁易懂
> 简洁易懂讲清原理,讲不清你来打我~ 输入字符串,找到无重复.最长.子串,输出长度 ;数据 4- ...
- Liferay Portal CE 反序列化命令执行漏洞（CVE-2020-7961）
影响范围 Liferay Portal 6.1.X Liferay Portal 6.2.X Liferay Portal 7.0.X Liferay Portal 7.1.X Liferay Por ...
- IDEA输出乱码“淇℃伅”
尝试过在IDEA中tomcat的vmoptions中加入代码 -Dfile.encoding=GBK 没什么用 最后找到了这个方法 参考链接 ①在Tomcat文件夹下找到conf ②找到logging ...
- AndroidStudio 插件总结
工作中常用的插件备注如下: Alibaba Java Coding GuidelinesCheckStyle-IDEAAndroid Drawable PreviewGsonFormatTransla ...
- linux中的dhcp
目录 一.DHCP服务 二.DHCP的租约过程 三.使用DHCP动态配置主机地址 四.安装DHCP服务器 一.DHCP服务 ① DHCP (Dynamic HostConfiguration Prot ...
- 100的累加和 for循环
1 int main() 2 { 3 int sum ; 4 int i; 5 for(i = 0; i<101; i++) 6 { 7 sum += i; 8 } 9 printf(" ...