jQuery中的end()方法使用介绍
转自:微点阅读 https://www.weidianyuedu.com
定义和用法
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
以上是官方说法,比较难理解。
还是用一个例子来说明
<!DOCTYPE html>
<html>
<head>
<style>p {margin:10px; padding:10px;}</style>
<script type="text/javascript"src="/jquery/jquery.js"></script>
</head>
<body>
<p><span>Hello</span>,how are you?</p>
<script>$("p").find("span").end().css("border","2px redsolid");</script>
</body>
</html>
$("p").find("span")表示查找P元素下的SPAN元素
但是我想更改P的边框,这时我就要返回到P元素(即从SPAN返回到P,就是还原为之前的状态)
$("p").find("span").end()这个语句就返回来了。
$("p").find("span").end().css("border","2px red solid")把P的边框设置了。
-------------------
对于end()方法,jQuery文档是这样解释的:jQuery回到最近的一个"破坏性"操作 之前。即:将匹配的元素列表变为前一次的状态。
但给的例子并不是很明显,相信不少人并没有理解它的用法。
下边我们以一个非常简单的例子来说明下用法,html代码如下:
<divid="test">
<h1>jQueryend()方法</h1>
<p>讲解jQuery中end()方法。</p>
</div>
JS代码:
$(document).ready(function(){undefined
$("#test").click(function(){undefined
$(this).find("p").hide().end().hide();
});
});
点击id为test的div时,首先找到div里边的p标签,将其隐藏。接下来使用end()方法结束了对p标签的引用,此时返回的是#test(jQuery对象),从而后边的hide()方法隐藏了div。这样相信大家已经理解了jQuery中end()方法。
----------------------
<script type="text/javascript"src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function(){undefined
$("<input type="button" value="click me"/><input type="button" value="triggleclick me" /><input type="button"value="detach handle" /><inputtype="button" value="show/hide text"/>").appendTo($("body"));
$("input[type="button"]").eq(0).click(function(){undefined
alert("youclicked me!");
})
.end().eq(1).click(function(){undefined
$("input[type="button"]:eq(0)").trigger("click");
})
.end().eq(2).click(function(){undefined
$("input[typw="button"]:eq(0)").unbind("click");
})
.end().eq(3).toggle(function(){undefined
$(".panel").hide("slow");
},function(){undefined
$(".panel").show("slow");
});
})
//-->
</script>
<style type="text/css">
.panel{undefined
padding:20px;
background-color:#000066;
color:#FFFFFF;
font-weight:bold;
width:200px;
height:50px;
}
</style>
<div class="panel">welcome tojQuery!</div>
jQuery中的end()方法使用介绍相关推荐
- ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/ ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- jQuery中animate( )的方法及$(“body“).animate({‘scrollTop‘:top},500)不被Firefox支持问题的解决
jQuery中animate( )的方法及$("body").animate({'scrollTop':top},500)不被Firefox支持问题的解决 参考文章: (1)jQu ...
- jquery中的map()方法与js中的map()方法
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- jQuery 中的 end 方法
如有错误,欢迎批评指正! jQuery 中的 end 方法,我从 stackoverflow 上的一个回答开始讲: 原文链接: What does the .end() function do in ...
- 原生JS中的三大家族(offset/scroll/client)与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
- JQuery中ajax,get方法在asmx中的使用
喜大普奔,今天终于完成了一个月前就想完成的一个代码实现.就是在点击一个按钮后禁用按钮,弹出正在操作的提示框,执行完事件后再启用按钮. 以前的想法是Ajax和aspx联用,这样,省页面,也不用对后台代码 ...
- js中的onclick事件和JQuery中的click方法以及on方法事件用法总结
1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有(js中的),Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么 2.click方法(jquery中 ...
- 关于JQuery中的appendTo方法
JQuery中的appendTo方法是会改变页面原有的结构,包括原从页面中取到结构的地方,比如如下代码(代码来自慕课网): <!DOCTYPE html> <html> < ...
最新文章
- java使用ireport生成报表_JasperReport(3)——Java简单使用IReport生成的文件建立报表...
- Eclipse下配置struts很让我痛苦
- 卧槽!面试官 5 连问一个 TCP 连接可以发多少个 HTTP 请求?
- boost::hana::extract用法的测试程序
- WebSphere Application Server 5.0在Linux平台上中文界面乱码问题的解决
- c++第二次上机实验项目二
- 解析rtcm32报文工具_RTKLIB编译及RTCM数据读取样例
- 卡巴斯基破解版 KISV8.0.0.432 Beta 江南混混汉化特别版
- 阿里如何做好双11技术保障?大队长霜波分享4点经验
- python 泰勒展开式_python函数的Taylor级数sympy表达式
- codeforce比赛规则介绍(转)
- 快速搭建小程序,实现线上引流获客
- 简历项目描述过程详解
- Jlink命令行烧录
- java-opencv 米粒数_opencv学习之米粒分割 #201906121549
- 一名前端爱好者的学习之路 - 说说我和前端的认识过程我的前端学习路线(结束更新了 希望之后顺利~)
- Cucumber Hooks
- php 服务器 css 失效,如何解决css文件失效的方法
- SQL刷题记录(一)
- linux服务器开发人员必须要彻底理解的关于【Linux】IO的线程模型