jquery链式语法

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.panle {

padding: 60px;

background-color: red;

color: #fff;

font-size: 50px;

font-weight: bold;

width: 600px;

text-align: center;

}

</style>

<script src="../jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

//第一行代码,在文档中添加四个按钮

$(‘<input type="button" value="click me"/><input type="button" value="triggle click me"/><input type="button" value="detach handler"/><input type="button" value="show/hide text"/>‘).appendTo($(‘body‘));

//第二行代码,分别选中四个按钮,并为它们绑定不同的时间处理函数

$(‘input[type="button"]‘).eq(0).click(function(){//找到第一个按钮,并绑定click事件处理函数

alert(‘you clicked me!‘);

}).end().eq(1) //返回所有按钮,再找到第二个

.click(function(){ //为第二个按钮绑定click事件处理函数

$(‘input[type="button"]:eq(0)‘).trigger(‘click‘);

}).end().eq(2) //返回所有按钮,再找到第三个

.click(function(){ //为第三个按钮绑定click事件处理函数

$(‘input[type="button"]:eq(0)‘).unbind(‘click‘);

}).end().eq(3) //返回所有按钮,再找到第四个

.toggle(function(){ //为第四个按钮绑定toggle事件处理函数

$(‘.panel‘).hide(‘slow‘);

},function(){

$(‘.panel‘).show(‘slow‘);

});

});

</script>

</head>

<body>

<div class="panel">welcome to jquery!</div>

</body>

</html>

时间: 2024-10-10 14:18:14

jquery链式语法的相关文章

jQuery链式语法演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta htt

jquery html标签的链式语法

<div id="ProductNet"> <table border='0' cellspacing='2' cellpadding='0' style='text-align: center; width: 674px;'> <tr> <td class='PNetTD'> 日期类型 </td> <td class='PNetTD'> 更新日期 </td> <td class='PNetTD'

如何在Objective-C中实现链式语法?

在接触到开源项目 Masonry 后,里面的布局约束的链式写法让我颇感兴趣,就像下面这样: 1 2 3 4 5 6 7 8 UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [view1 mas_makeConstraints:^(MASConstraintMaker *make) {     make.top.equalTo(superview.mas_top).with.offset(padding.top); //with i

jQuery链式操作

讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时候会这样去写: $("div").css("background","#eee") $("div").text("关注前端,关注用户体验-冀"); 这重复的去获取DIV这个节点非常影响性能,这时你可能会想到这样

jQuery链式操作[转]

用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide(); }); 1.jQuery的链式操作

jQuery——链式编程与隐式迭代

链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

jQuery链式操作如何返回上一级DOM

有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather").show().find("a").addClass("now").end().addClass("highLight") 此段代码表示由ID为divFather往下取得了a标签加上now类之后,再返回到divFather就行添加hight

[jQuery]jQuery链式编程(六)

链式编程 节约代码量 <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(fun

实现函数,类似jQuery链式调用.

1 var origin = [ 2 {id:1,title:'title1'}, 3 {id:2,title:'abcd'}, 4 {id:3,title:'title2'}, 5 {id:4,title:'efg'} 6 ]; 7 8 var find = function(data){ 9 // your code here 10 } 11 12 var result = find(origin).where({'title':/\d$/}).order('id','desc'); //d