JQuery 链式编程

来源：互联网发布：阿里云网站官方网站编辑：程序博客网时间：2024/06/07 22:39

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script src="scripts/jquery-1.7.1.min.js"></script>    <script>        $(function() {            $('li').hover(function() {//鼠标指向                $(this).css({                    'color': 'red',                    'cursor':'pointer'                });            }, function () {//鼠标移开                $(this).css('color', 'black');            }).click(function() {//链式编程，编写点击事件，直接在后面 .hover().click()                $(this).appendTo('#ul2');            });        });    </script></head><body>    <ul id="ul1">        <li>北京</li>        <li>上海</li>        <li>广州</li>        <li>深圳</li>    </ul>        <ul id="ul2">            </ul></body></html>

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="scripts/jquery-1.7.1.min.js"></script>    <script>        $(function () {            $('li').hover(function () {//鼠标移上                $(this).css('background-color', 'red')                    .prevAll()//这个方法找到当前节点的所有节点，破坏了当前的链                    .css('background-color', 'yellow')                    .end()//恢复最近的一次链的破坏之前的JQuery对象                .nextAll()                .css('background-color', 'blue')                ;            }, function () {//鼠标移开                $(this).css('background-color', 'white')                    .siblings().css('background-color', 'white');//获取左右的兄弟节点            });        });    </script></head><body>    <ul>        <li>北京</li>        <li>上海</li>        <li>广州</li>        <li>深圳</li>    </ul></body></html>

阅读全文

0 0