zoukankan      html  css  js  c++  java
  • 2017.12.21-JQuery

    作业:密码加强验证
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            onload = function () {
                //为文本框注册失去焦点事件,失去焦点时,进行密码验证
                document.getElementById('txtPwd').onblur = function () {
                    var msg = this.value;
                    //获取提示框
                    var msgPwd = document.getElementById('msgPwd');
                    if (msg.length < 6) {
                        msgPwd.innerText = '弱爆了!!!';
                    } else
                    {
                        //纯字符:弱;两种混合:中;三种混合:强。
                        //if (/^[a-zA-Z]+$/.test(msg)
                        //    || /^[0-9]+$/.test(msg)
                        //    || /^[!@#$%^&*()]+$/.test(msg)
                        //)
                        //{
                        //    msgPwd.innerText = "弱";
                        //}
                        var pwd = 0;
                        if (/[a-zA-Z]/.test(msg))
                        {
                            pwd++;//有一个字母
                        }
                        if (/[0-9]/.test(msg)) {
                            pwd++;//有一个数字
                        }
                        if (/[!@#$%^&*()]/.test(msg)) {
                            pwd++;//有一个特殊字符
                        }
                        switch (pwd) {
                            case 1: msgPwd.innerText = "弱";
                                break;
                            case 2: msgPwd.innerText = "中";
                                break;
                            case 3: msgPwd.innerText = "强";
                                break;
                            default:
                        }
                    }
                };
            };
        </script>
    </head>
    <body>
        <input type="text" id="txtPwd" name="name" value="" />
        <span id="msgPwd"></span>
    </body>
    </html>
    
    
    
    【2017.12.23--JQuery 01】
    
    第一:什么是JQuery
    1、当前应用非常广泛的一个js类库,封装了大量方法,可以快速完成常用功能;
    2、在使用前需要先引入jquery.js文件,才可以使用这个库中的成员;
    3、$对象是jquery对象的简写方式,一般都使用$而不书写jquery,简便快捷。
    
    第二:为什么使用它?
    1、官方网址:http://jquery.com/,很好地解决了浏览器兼容问题;
    2、体积小,使用方便(Write Less,Do More)
    3、链式编程,隐式迭代,插件丰富,开源,免费
    4、注意:只是为常用操作提供了方法,并不能实现所有操作,如果没有实现的操作,还需要手写js
       已经在vs的项目框架中集成了jquery
    
    第三:主要功能
    1、对象处理
    2、属性、css
    3、选择器、筛选
    4、文档处理
    5、事件
    6、效果
    7、ajax
    8、工具
    
    第四:具体实现
    1、基本选择器
    使用$('选择器')符号进行筛选,用于获取页面上的标签,返回一个jq对象
    id选择器:#id
    元素选择器:标签
    类选择器:.class
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>//使用 JQuery 必需引入jquery库文件
        <script>
            onload = function () {
                //jquery对象:本质就是DOM的一个数组
                //js对象;dom对象:操作HTML的对象
                //通过jquery选择器得到的都是jquery对象,可以使用juerqy提供的方法
                $('#btnShow').click = function () {
                }
            };
        </script>
    </head>
    <body>
        <input type="button" name="name" id="btnShow" value="" />
    </body>
    </html>
    
    2、属性操作
    用于对标签元素的属性进行操作
    获取属性值:attr(属性)
    设置属性值:attr(属性,值)
    如果是操作标签的值可以简写为:text(),html()
    如果是操作控件的值可以简写为:val()
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <input type="button" id="btnShow" name="name" value="显示" />
        <img src="images/1.jpg" />
        <script>
            //操作属性
            //获取属性的值;只写第一个参数,属性的名字
            alert($('#btnShow').attr('value'));
            //设置属性的值:写两个参数,第一个参数表示属性的名字,第二个表示值
            $('#btnShow').attr('value', "Hello World");
            //prop表示html的原有属性,attr而表示扩展属性
            //如:img的src操作使用prop,2而href操作使用attr
            $('#img').attr('href', 'abc');
            //移除属性
            $('#btnShow').removeAttr('value');
        </script>
    </body>
    </html>
    
    3、事件注册处理程序
    方式一: bind(事件类型,处理函数) 
    方式二:事件类型(处理函数)
    事件类型与dom的相同,去掉on前缀
    卸载事件处理程序
    unbind();//移除所有事件处理程序
    unbind(‘click’);//移除所有的click事件处理程序
    unbind('click',函数名称);//移除click事件的指定名称的处理函数,这种方法无法移除匿名函数
    说明:dom事件不支持多播,而jquery事件支持多播
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <input type="button" id="btnShow" name="name" value="显示" />
        <script>
           alert( $('#btnShow').attr('value'));
            ////对于value属性的一种简写操作
            //alert($('#btnShow').val());
            //为按钮绑定点击事件
            $('#btnShow').click(function () {
                alert(this.value);//this是dom对象,不能调用jquery的成员
            });
            //dom的事件注册:一个事件只能注册一个处理函数,不支持多播
            document.getElementById('btnShow').onclick = function () {
                alert(1);
            };
            document.getElementById('btnShow').onclick = function () {
                alert(2);
            };
            //jquery事件注册:支持多播,一个事件可以指定多个处理函数
            $('#btnShow').click(function () {
                alert(3);
            });
            $('#btnShow').click(function () {
                alert(4);
            });
        </script>
    </body>
    </html>
    
    4、页面加载事件
    js方式:window.onload=fn;
    jq方式:$(document).ready(fn);->可简写为$(fn);
    区别一:window.onload表示页面所有资源加载完成后才会被触发执行;$(fn)表示只要文档结构加载完成后就会执行,即所有标签加载完成
    区别二:window.onload重复赋值会被覆盖,即不支持多播委托;$(fn)可以添加多个事件处理程序,即在jq中定义的事件支持多播
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            //为window的onload事件注册处理函数,表示页面加载完毕后触发执行
            //标签加载完成,并且标签指定的资源也要加载完成,才能注册事件
            onload = function () {
            };
            //表示加载完成后执行此代码,(dom就绪)只要标签加载完成后 即可注册(效率比较高)
            $(document).ready(function () {
            });
            //简写如下
            $(function () {
                $('#btnShow').click(function () {
                    alert(123);
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnShow" name="name" value="" />
    </body>
    </html>
    
    5、示例
    点谁谁哭
    点击按钮,设置div中的内容text(),html()
    点击按钮,让所有的p中都显示“我们都是P”
    例子1:
    <!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>
            //表示加载就绪,是ready的简写
            $(function () {
                //获取所有按钮,得到jquery对象,为对象注册点击事件
                //隐式迭代:自动将数组当的每个元素都执行一遍操作
                //当前:会将数组中的每个input进行click绑定
                $('input').click(function () {
                    //将当前点击的按钮的文本变成呜呜
                    //this表示触发当前事件的dom对象
                    this.value = '呜呜';
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="哈哈"/>
        <input type="button" value="哈哈"/>
        <input type="button" value="哈哈"/>
        <input type="button" value="哈哈"/>
        <input type="button" value="哈哈"/>
        <input type="button" value="哈哈"/>
        <input type="button" value="哈哈"/>
        <input type="button" value="哈哈"/>
    </body>
    </html>
    例子2:
    <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() {
                $('#btnShow').click(function () {
                    //对于标签对,使用text()、html()进行设置或获取
                    $('#txt1').text('这是个div');
                });
            });
        </script>
    </head>
        <body>
            <input type="button" id="btnShow" value="显示" />
            <div id="txt1"></div>
        </body>
    </html>
    
    DOM对象与JQ对象的转换
    为什么要转换呢?
    为了使用jq中的方法,需要将dom对象转换成jq对象
    jq并没有完成所有操作的封装,需要将jq对象转换成dom对象,再调用dom方法
    dom->jq:$(dom对象名称)
    jq->dom:jq对象.get(index)或jq对象[index]
    对于dom对象,有属性、事件成员
    对于jq对象,只有方法成员
    例子3:
    <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 () {
                //将jquery对象转换成dom对象:通过[下标]的形式返回dom对象
                //通过jquery的选择器得到的数组,才是jquery对象,才可以调用jquery的成员
                //将dom对象转换成jquery对象:$(dom对象)
                $('#btnShow').click(function() {
                    $('p').text('都是P');//隐式迭代
                    $(this).val('abc');
    
                    var temp = [1, 2, 3];
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnShow" value="都是P"/>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
    </body>
    </html>
    
    6、合成事件处理程序
    hover(fn1,fn2):fn1表示mouseover的处理函数,fn2表示mouseout的处理函数
    toggle(fn1,fn2...fnN):当元素被click后,轮流执行fn1、fn2、fnN方法
    one(type,fn):表示注册的事件只响应一次,然后失效,type表示事件类型
    例子:
    <!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 () {
                //合成指向、移开事件
                //$('#btnShow').hover(function() {//指向
                //    this.style.color = 'red';
                //}, function() {//移开
                //    this.style.color = 'black';
                //});
                
                //合成点击事件,指定在n个函数间切换,点击次数为m
                //$('#btnShow').toggle(function() {//第m%n==1次点击时执行此函数
                //    alert(1);
                //}, function() {//第m%n==2次点击执行此函数
                //    alert(2);
                //}, function() {//第m%n==0次点击执行此函数
                //    alert(3);
                //});
                
                //合成事件:只将绑定的事件执行一次
                //$('#btnShow').one('click', function() {
                //    alert(1);
                //});
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnShow" value="显示"/>
    </body>
    </html>
    
    7、调用JS成员
    直接使用,不需要任何转换,因为jq就是js
    如:array是js对象,不需要进行jq转换
    如:方法parseInt()是js中的方法,在jq编码时可以直接使用
    例子:
    <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 () {
                //找到按钮,并绑定点击事件
                $('#btnShow').click(function() {
                    //找到文本框并获取值
                    var num = parseInt($('#txtNum').val());//直接调用js的成员进行操作
                    num++;
                    //将值显示到文本框
                    $('#txtNum').val(num);//传递参数时,表示将值赋给value
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="txtNum"/><input type="button" id="btnShow" value="显示"/>
    </body>
    </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 () {
                //为按钮绑定点击事件
                $('#btnAdd').click(function () {
                    //获取文本框中的值,并转换成整数
                    var num1 = parseInt($('#txtNum1').val());
                    var num2 = parseInt($('#txtNum2').val());
                    //运算
                    var result = num1 + num2;
                    //显示
                    $('#txtResult').val(result);
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="txtNum1"/>+
        <input type="text" id="txtNum2"/>
        <input type="button" id="btnAdd" value="="/>
        <input type="text" id="txtResult"/>
    </body>
    </html>
    
    
    8、文档处理
    创建元素:$('标签字符串')
    添加元素:
    append(),appendTo():追加子元素
    prepend(),prependTo():前加子元素
    after(),insertAfter():后加兄弟元素
    before(),insertBefore():前加兄弟元素
    动态删除元素
    empty():清空子元素
    remove(selector):删除当前元素,无参表示删除全部,有参表示删除符合条件的元素
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                $('#btnAppend').click(function () {
                    //动态创建Jquery对象
                   var hello= $('<b>Hello World</b>');
                    //追加:在子元素中,显示结果: 你好!!!Hello World,在div文本之后追加
                   $('#divContainer').append(hello);
                    //追加:在子元素中,显示结果: Hello World 你好!!!,在div文本之前追加
                   $('#divContainer').prepend('preappend');
                   //追加:在元素中,显示结果: 你好!!!Hello World,在div文本之后追加
                   $('#divContainer').insertAfter('insertAfter');
                   //追加:在同级元素中,显示结果: Hello World 你好!!!,在div文本之前追加
                   $('#divContainer').insertBefore('insertBefore');
                });
                $('#btnAppendTo').click(function () {
                    //追加到:
                    $('<b>Hello World</b>').appendTo('#divContainer');
                    $('<b>Hello World</b>').prependTo('#divContainer');
                });
                $('#btnEmpty').click(function () {
                    //清空元素
                    $('#divContainer').empty();
                });
                $('#btnRemove').click(function () {
                    //移除元素
                    $('#divContainer').remove($('b'));
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnAppend"  value="Append" />
        <input type="button" id="btnAppendTo" value="AppendTo" />
        <input type="button"  id="btnEmpty" value="Empty" />
        <input type="button" name="name" id="btnRemove" value="remove" />
        <div id="divContainer">你好!!!</div>
    
    </body>
    </html>
    
    9、省市联动
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            //定义省市数据,键值对集合
            var datas = {
                "北京": ["朝阳", "海淀", "昌平", "丰台"],
                "山东": ["青岛", "济南", "烟台"],
                "山西": ["大同", "太原", "运城", "长治"],
                "河南": ["洛阳", "开封", "郑州", "驻马店"],
                "河北": ["石家庄", "张家口", "保定"]
            };
            $(function () {
                //创建省的select
                var select = $('<select id="selectProvince"></select>');
                //为省的select绑定change事件
                select.change(function () {
                    var citys = datas[$(this).val()];
                    //删除市的原有option
                    $('#selectCity').empty();
                    //添加option
                    $.each(citys, function (index,item) {
                        $('<option>' + item + '</option>').appendTo(selectCity);
                    });
                });
                select.appendTo('body');
                //遍历集合
                $.each(datas, function (key, value) {
                    //根据数据创建option并追加到select上
                    $('<option value="' + key + '">' + key + '</option>').appendTo(select);
                });
                //创建市的select
                var selectCity = $('<select id="selectCity"></select>').appendTo('body');
                //获取选中的省信息
                var pro = $('#selectProvince').val();
                //将省名称作为建到集合中获取值
                var citys = datas[pro];
                //遍历市的数组
                $.each(citys, function (index, item) {
                    $('<option>' + item + '</option>').appendTo(selectCity);
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>
    
    10、层级选择器
    符号一:空格,表示取子元素,无论是几层的子元素,都会被选择到
    符号二:大于号>,表示直接子元素,不包含后代子元素
    符号三:加号+,表示之后紧临的一个同级元素
    符号三:波浪号~,表示之后的所有同级元素
    
    next(),表示下一个同级节点
    prev(),表示上一个同级节点
    nextAll(),表示之后所有同级节点
    prevAll(),表示之前所有同级节点
    siblings(),表示所有同级节点
    parent(),表示父级节点
    children(),表示子级节点
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                //空格表示查找所有子级
                $('#d1 div');
                //大于号 表示查找直接子级,不包含后代
                $('#d1>div');
                //加号+表示 找到后面紧邻同级的div,若是没有则返回空数组
                $('#d1+div');
                //波浪号 表示之后的所有同级元素
                $('#d1~div');
            });
        </script>
    </head>
    <body>
        <div id="d1">
            <div id="d11"></div>
            <div id="d12">
                <div id="d121"></div>
                <div id="d122"></div>
            </div>
            <div id="d13"></div>
        </div>
        <div id="d2"></div>
        <div id="d3">
            <div id="d31">
                <div id="d311"></div>
                <div id="d312"></div>
                <div id="d313"></div>
            </div>
        </div>
    </body>
    </html>
    
    11、操作样式与类
    样式操作:css(),按照键值对的格式对样式进行设置
    如果只设置一个样式,则可直接赋值,如:css('color','red');
    如果设置多个样式,则使用css({键1:值1,键2:值2})的格式
    操作后生成的代码,都是对标签的style属性进行设置
    类操作:addClass,hasClass,removeClass,toggleClass
    也可以使用属性方法进行操作:attr('class','className');
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                //设置样式
                $('#btnShow').css('color', 'grren');
                $('#btnShow').css('background-color', 'red');
                //设置多个样式
                $('#btnShow').css({
                    'color': 'white',
                    'background-color': 'blue',
                    'font-size':'25px'
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnShow" name="name" value="显示" />
    </body>
    </html>
    
    12、事例实现
    示例1:开关灯
    按钮点一下背景变白
    再点一下背景变黑
    如此往复
    例子1:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                $('#btnLight').click(function () {
                    if (this.value == '关灯') {
                        $('body').css('background-color', 'black');
                        $(this).val('开灯');
                    } else {
                        $('body').css('background-color', 'white');
                        $(this).val('关灯');
                    }
                    
                });
            });
            </script>
    </head>
    <body>
        <input type="button" id="btnLight" name="name" value="关灯" />
    </body>
    </html>
    示例2:点击按钮后,让页面中所有p的文字都变成黄色,文字都显示为‘都是P’(体会:链式编程)
    例子2:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                $('#btnChange').click(function () {
                    //链式编程:只查找一次,支持逐个使用方法
                    $('p').text('都是P').css('color','yellow');
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnChange" name="name" value="都是P" />
        <p>P1</p>
        <p>P2</p>
        <p>P3</p>
        <p>P4</p>
        <p>P5</p>
        <p>P6</p>
    </body>
    </html>
    示例3:ul中li的练习
    鼠标指向li时文本变为红色,提示手图标
    鼠标移开li时文本变为黑色
    点击li时移到另外一个ul中
    例子3:
    <html>
    <head>
        <meta 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 () {//链式编程,编写点击事件
                        $(this).appendTo('#ul2');
                    });
            });
            
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
        <ul id="ul2"></ul>
    </body>
    </html>
    
    13、过滤选择器
    用于对选择结果执行进一步过滤
    :first 第一个、:last 最后一个 、:eq() 搜索第几个、:gt() 大于、:lt() 小于、:not(选择器)、:even偶数、:odd奇数
    说明1:索引下标从0开始
    说明2:以下标判断奇偶,下标从0开始
    标题的快速获取
    普通方法:$('h1,h2,h3...h6')
    快捷方法:$(':header')
    例子:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                $('div:first');
            });
        </script>
    </head>
    <body>
        <div id="d1">
            <div id="d11"></div>
            <div id="d12">
                <div id="d121"></div>
                <div id="d122"></div>
            </div>
            <div id="d13"></div>
        </div>
        <div id="d2"></div>
        <div id="d3">
            <div id="d31">
                <div id="d311"></div>
                <div id="d312"></div>
                <div id="d313"></div>
            </div>
        </div>
    </body>
    </html>
    
    14、
    根据数据生成表格(数据见备注)
    使表格中奇偶行显示不同背景色
    当鼠标指向行时高亮显示
    当鼠标离开时离开行时恢复到原来颜色
    设置列表中前三名粗体显示
    例子1:
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="scripts/jquery-1.7.1.min.js"></script>
        <script>
            var list = [
                { id: '1', country: '中国', capital: '北京' },
                { id: '2', country: '美国', capital: '华盛顿' },
                { id: '3', country: '日本', capital: '东京' },
                { id: '4', country: '韩国', capital: '首尔' }
            ];
    
            $(function () {
                //遍历集合,创建tr跟td
                $.each(list, function (index, item) {
                    $(' <tr><td>' + item.id + '</td><td>' + item.country + '</td><td>' + item.capital + '</td></tr>').appendTo('#list');
                });
                //为奇偶行指定不同背景颜色
                $('#list tr:even').css('background-color', 'red');
                $('#list tr:odd').css('background-color', 'green');
                $('#list tr').hover(function () {//移上
                    bgcolor = $(this).css('background-color');
                    $(this).css('background-color','blue')
                }, function () {//移开
                    $(this).css('background-color', bgcolor)
                });
            });
        </script>
    </head>
    <body>
        <table border="1" >
            <thead>
                <th width="100"> 编号</th>
                <th width="100"> 国家</th>
                <th width="100"> 首都</th>
            </thead>
            <tbody id="list">
               
            </tbody>
        </table>
    </body>
    </html>
    
    15、
    设置ul中的li效果
    移上时显示为红色背景
    此节点之前的节点显示为黄色背景
    此节点之后的节点显示为蓝色背景
    移开时全都显示白色背景
    提示:方法end() 恢复到最近的"破坏性"操作之前
    例子2:
    <html>
    <head>
        <meta 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()//恢复最近一次链的破坏
                        .nextAll().css('background-color','blue');
                }, function () {//移开
                    $(this).css('background-color', 'white').siblings().css('background-color', 'white');
                });
            });
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
        <ul id="ul2"></ul>
    </body>
    </html>
    

      

  • 相关阅读:
    hihoCoder #1176 : 欧拉路·一 (简单)
    228 Summary Ranges 汇总区间
    227 Basic Calculator II 基本计算器II
    226 Invert Binary Tree 翻转二叉树
    225 Implement Stack using Queues 队列实现栈
    224 Basic Calculator 基本计算器
    223 Rectangle Area 矩形面积
    222 Count Complete Tree Nodes 完全二叉树的节点个数
    221 Maximal Square 最大正方形
    220 Contains Duplicate III 存在重复 III
  • 原文地址:https://www.cnblogs.com/Time_1990/p/8078392.html
Copyright © 2011-2022 走看看