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")必须写在表达式中。

转载于:https://www.cnblogs.com/mzywucai/p/11053376.html

jQuery中的筛选（六）：first()、last()、has()、is()、find()、siblings()等相关推荐

jQuery中的Ajax （六个Ajax的操作方法）细解！！！
jQuery中的Ajax 六个Ajax操作方法 load()方法 $.get()方法 $.post()方法 $.ajax()方法 $.getScript()方法 $.getJSON()方法 load( ...
[Ajax] jQuery中的Ajax -- 01-jQuery中的Ajax
jQuery中的Ajax 参考文档 jQuery中的Ajax 六个Ajax操作方法 load()方法 $.get()方法 $.post()方法 $.ajax()方法 $.getScript()方法 $ ...
第六章 jQuery中的Ajax应用
第六章 jQuery中的Ajax应用 1.Ajax:客户端javascript所发起的http请求的代号,无刷新的数据更新. 2.编程模型: (1).同步代码:按钮按下执行耗时操作等待执行返回 ...
【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
Java程序员从笨鸟到菜鸟之（九十）跟我学jquery（六）jquery中事件详解
由于jQuery本身就是web客户端的有力帮手,所以事件对于它来说就显得尤为重要了,事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点. 在传统的JavaScript中,注册一个事件也是非常 ...
六、jQuery 中的 AJAX 跨域问题
第 2 章:jQuery 中的 AJAX 官方中文文档:https://jquery.cuishifeng.cn/jQuery.Ajax.html 2.1 get 请求 $.get(url, [dat ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
jQuery 基础教程（四）之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组 ...

jQuery中的筛选（六）：first()、last()、has()、is()、find()、siblings()等

jQuery中的筛选（六）：first()、last()、has()、is()、find()、siblings()等相关推荐

最新文章

热门文章