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

随机推荐

PC端车牌识别朱凯茵从事图像识别算法、OCR算法
大家好,我是从事图像识别的pc端车牌识别朱凯茵,多多交流OCR算法,不限于车牌识别等,技术需要突破,你我成就梦想.
Linux相关问题总结
1.linux没有ifconfig命令可以使用以下命令查询ip地址: ip addr show ifconfig命令在net-tools工具里,安装命令: yum install net-tools
2016/12/21 dplの课练
1.将/etc/passwd第行的最后一段全部改成/bin/bash cat 1 |sed -n '1,$p' |egrep '.*:' -o |sed 's/$/\bin\/bash/' 2.将/e ...
Qt代码
ui->LoginPushButton->setStyleSheet(//正常状态样式 "QPushButton{" "background-color:rg ...
log4j:WARN Please initialize the log4j system properly解决办法
使用log4j,报警如下: log4j:WARN No appenders could be found for logger log4j:WARN Please initialize the log ...
AIX下core文件的分析
笔者曾在AIX系统下使用C语言开发多个应用系统.众所周知,C语言编写程序时容易出现内存使用不当的BUG,例如内存越界.使用野指针.内存未初始化等等.在程序运行时,这些BUG很可能造成程序崩溃,但在测试 ...
VB Mouse Pointer
Qt设置创建部分半透明，上面控件不透明
//头文件#pragma once #include <QWidget> #include "ui_widgetFullAD.h" class widgetFullAD ...
html css+div+jquery实现图片轮播
一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...
搭建vue的开发环境
随手笔记:win7 64bit 1.安装node,直接从node官网下载,安装即可. 2.命令行输入 node -v 查看是否安装成功,显示node的版本号即安装成功.安装成功后,输入node,进入n ...

jQuery案例2

jQuery案例2的更多相关文章

随机推荐

热门专题