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

随机推荐

spring boot读取classpath下的json文件
import org.springframework.beans.factory.annotation.Value; import org.springframework.core.io.Resour ...
Cowboy http服务器 websocket
一.基础介绍 cowboy是一个小巧.快速.模块化的http服务器,采用Erlang开发.其中良好的clean module使得我们可以扩展到多种网络协议之中,cowboy自带的有tcp和ssl,而也 ...
jenkins+svn完整打包并上传到linux服务器上
因为公司用的是svn版本管理工具并且部署在了windows服务器上,所以测试环使用jenkins需要部署两套环境, 一套是在本地windows服务器,jenkins从svn下载代码完成打包并上传到li ...
NLog使用整理
NLog使用中碰到的问题整理 1,日志写mysql数据库报错, 原因: 在sql语句中使用了mysql的函数now() 导致插入失败, 解决办法: 使用参数代替now(). 在nlog配置文件中设置 ...
SpringMVC云题库错题及答案汇总
试题分析:D,BeanNameViewResolver:这个视图解析器跟XmlViewResolver基本相同,它是通过把返回的逻辑视图名称去匹配定义好的视图bean对象 @ModelAttribut ...
nova98 假区域链骗人项目（vexx.pro的前身）
首先,我是受害者. nova98前期是vexx.pro,前期推广送比特龙, 送3个,然后推广一个新人可以再拿到1.5个. 然后呢,现在就又推出一个新网站,nova98,把之前推广的人领到币全部清零,而 ...
JS快排
c/c++ 栈与队列实现车库的出入与收费
/* 设停车场是一个可停放n辆车的狭长通道,且只有一个大门可供汽车进出.汽车在停车场内按车辆到达时间的先后顺序,依次由北向南排列 (大门在最南端,最先到达的第一辆车停放在车场的最北段),若停车厂内 ...
在终端中使用vim命令修改某些文件，会提示文件只读模式，可以执行以下命令强制写入
在末行模式中输入以下命令 :w !sudo tee % 回车后可能需要输入密码
Redis的主从复制（十一）
1>什么是主从复制持久化保证了即使redis服务重启也不会丢失数据,因为redis服务重启后(在使用aof和rdb方式时,如果redis重启,则数据从aof文件加载)会将硬盘上持久化的数据恢复 ...

jQuery案例2

jQuery案例2的更多相关文章

随机推荐

热门专题