链式语法 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    //第一行代码，在文档中添加四个按钮
    $('<input type="button" value="第一个按钮"/><input type="button" value="第二个按钮"/><input type="button" value="删除按钮事件处理函数"/><input type="button" value="隐藏或显示文本"/>').appendTo($('body'));
    //第二行代码，分别选中四个按钮，并为它们绑定不同的事件处理函数
    $('input[type="button"]')
    .eq(0).click(function(){	//匹配第一个按钮，并绑定click事件处理函数
        alert('是第一个按钮的事件处理函数');
    }).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>
<title></title>
</head>
<body>
<div class="panel">jQuery链式语法演示</div>
</body>
</html>
posted @ 2023-04-04 09:19  Bre-eZe  阅读(14)  评论(0)    收藏  举报