JQuery 链式编程

最新推荐文章于 2022-11-09 12:35:37 发布

houyanhua1

最新推荐文章于 2022-11-09 12:35:37 发布

阅读量625

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/houyanhua1/article/details/78827614

版权

JQuery 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<!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>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 链式编程

$(function() { $('li').hover(function() {//鼠标指向 $(this).css({ 'color': 'red', 'cursor':'pointer' }); },
复制链接

扫一扫