jQuery案例2

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

省市联动

//定义省市数据，键值对集合
        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>

jQuery案例2的更多相关文章

python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
Python之路【第十二篇续】jQuery案例详解
jQuery 1.jQuery和JS和HTML的关系首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...
JQuery案例一：实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jquery案例
调用js成员 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>& ...
黑马day16 jquery案例演示
案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
JQuery案例：折叠菜单
折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...
Jquery案例——某网站品牌列表的效果
一下是效果图.点击"显示全部品牌",高亮推荐品牌,并显示全部品牌. HTML文件: <!DOCTYPE html> <html lang="en&quo ...
JQuery案例二：实现全选、全不选和反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
JQuery案例：购物车编辑
购物车编辑实现了:商品的加减,总价的变动实现了:全选/全不选(使用prop而不是attr) 实现了:删除(遮罩层) <html> <head> <meta chars ...

随机推荐

003dayPython学习初始模块和字节码
一.注释: 1.单行注释 # 被注释的内容 2.多行注释 """ 被注释的内容 """ 二.模块我们在编程的时候,往往是一个主.py文件, ...
angular4 富文本编辑器
使用quill富文本编辑器实现,angular项目中用到了ngx-quill插件. quill的GitHub地址:https://github.com/quilljs/quill ngx-quill的 ...
for ，foreach ，map 循环的区别
一.for循环 1.for - 循环代码块一定的次数遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...
vue 中生成二维码之爬坑之路
最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www ...
IP通信基础课堂笔记----第三章（自认为的重点）
网络层协议IP IP数据包格式:固定部分 { 标识(16):计数器,源站每发送一个分组,标识+1:源IP地址的标识是全网唯一的. (包含TCP/UDP首部) | 标志(3):当最低 ...
18-09-16如何从pychram的第三方包导入设计器
1 在pychrm 中的操作 2 找到pycharm 中找到对应的包 3 找到设计器中文件夹后进行复制即可
xss处理
今天学习了xss,主要记载如下: https://blog.csdn.net/sdauzyh/article/details/74942737
RF新手常见问题总结
RF新手常见问题总结--(基础篇) 1. 经常有人问这个元素找不到,一般先排除这两个地方,再自己找找A:是否等待了足够的时间让元素加载 (增加sleep xx, wait Until xxx)B: ...
JavaScript的popup框
JavaScript中可以创建三种消息框:警告框.确认框.提示框. 1.警告框警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法:alert(&q ...
python—文件创建
# 1.文件操作# day1.txt# 1.文件路径:E:\day1.txt# 2.编码方式:utf-8.gbk# 3.操作方式:只读,只写,追加,读写,写读# 以什么编码方式储存的方式储存就以什么编 ...

jQuery案例2

jQuery案例2的更多相关文章

随机推荐

热门专题