jQuery案例2

时间：2025-02-27 20:34:08

$(this).index用来获取取到的所有元素的序号

省市联动

<!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>
        //$.each(obj,fun(i,n))
        //如果obj是数组，则i是索引，n是元素
        //如果obj是对象或键值对，i是键，n是值

//定义省市数据，键值对集合
        var datas = {
            "北京": ["朝阳", "海淀", "昌平", "丰台"],
            "山东": ["青岛", "济南", "烟台"],
            "山西": ["大同", "太原", "运城", "长治"],
            "河南": ["洛阳", "开封", "郑州", "驻马店"],
            "河北": ["石家庄", "张家口", "保定"]
        };
        $(function() {
            //创建省的select
            var select = $('<select id="selectProvince"></select>');
            //最后写change事件：为省的select绑定change事件
            select.change(function () {
                //找到市信息
                var citys = datas[$(this).val()];
                //删除市的原有option
                $('#selectCity').empty();
                //添加option
                $.each(citys, function(index,item) {
                    $('<option>' + item + '</option>').appendTo('#selectCity');
                });
            });
            //追加到body中
            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>

密码强度验证

<!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>
        onload = function () {
            //为文本框注册失去焦点事件，失去焦点时，进行密码验证
            document.getElementById('txtPwd').onblur = function () {
                var msg = this.value;

//获取提示框
                var msgPwd = document.getElementById('msgPwd');

if (msg.length < 6) {
                    msgPwd.innerText = '弱爆了';
                } else {
                    //纯字符：弱，两种混合：中，三种混合：强
                    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;
                    }
                }
            };
        };
    </script>
</head>
<body>
    <input type="text" id="txtPwd" /><span id="msgPwd"></span>
</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>
        onload = function() {
            //jquery->$
            //jquery对象：本质就是dom的一个数组
            //js对象
            //dom对象：操作html的对象
            //通过jquery选择器得到的都是jquery对象，可以使用jquery提供的方法
            $('#btnShow');
            //dom
        };
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="显示"/>
</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>
</head>
<body>
    <input type="button" id="btnShow" value="显示"/>
    <img src="data:images/idle.png" />
    <script>
        //操作属性
        //获取属性的值：只写第一个参数，属性的名字
        //alert($('#btnShow').attr('value'));
       
        //设置属性的值：写两个参数，第一个表示属性的名字，第二个表示值
        //$('#btnShow').attr('value', 'Hello World');
       
        //prop表示html的原有属性，attr而表示扩展属性
        //如：img的src操作使用prop，而href操作使用attr
        //一般使用attr因为各种情况都适用
        //$('img').attr('href', 'abc');

//移除属性
        //$('#btnShow').removeAttr('value');
    </script>
</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>
</head>
<body>
    <input type="button" id="btnShow" value="显示"/>
    <script>
        //对于value属性的一种简写操作
    //$('#btnShow').attr('value');=>
        //$('#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(1);
        });
        $('#btnShow').click(function() {
            alert(2);
        });
    </script>
</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>
        //为window的onload事件注册处理函数，表示页面加载完成后触发执行
        //标签加载完成，并且标签指定的资源也加载完成
        //onload = function() {
        //};

//表示加载完成后执行此代码:dom就绪，指标签加载完成，这时，标签指定的资源可能还没有加载完成
        //$(document).ready(fun);简写如下：
        $(function() {
            $('#btnShow').click(function() {
                alert(1);
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="显示"/>
</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>
        //表示加载就绪，是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>

过滤选择器

<!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() {
            $('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>

表格操作

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        td {
            color: white;
        }
    </style>
    <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);
            });
            //前三名变粗
            $('#list tr:lt(3)').css('font-weight', 'bold');
        });
    </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>

li练习2

<!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()//恢复最近的一次链的破坏
                .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>

相关文章