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

随机推荐

练习 HashSet 去重复
package com.rf.xs.list; import java.util.HashSet; public class Person { private String name; private ...
cscope和ctags自动更新
1.写一个shell脚本,定时更新数据库文件,命名为auto_load_cscope.sh,在/usr/local/bin里设置软链接为autocs #!/bin/bash cd $1 while : ...
结对作业_core组
github地址:https://github.com/ljw-wakeup/expression_project2 对于这种结对的工作,由于有过电子设计实践的基础,大概知道建一个工程需要做的事,有点 ...
初读"Thinking in Java"读书笔记之第八章 --- 多态
再论向上转型在某些方法中,仅接收基类作为参数,而不是特殊的导出类,会使得程序更容易扩展. 转机方法调用绑定前期绑定(编译期绑定):在编译期将一个方法调用和方法主体关联起来. 后期绑定(动态绑定或 ...
PTA-栈
1-1 若一个栈的输入序列为1,2,3,…,N,输出序列的第一个元素是i,则第j个输出元素是j−i−1. (2分) T F 作者: DS课程组单位: 浙江大学 1-2 若一个栈的 ...
KendoUi 学习笔记(二) Grid
Kendo.ui.Grid Kendo Ui Grid控件,继承至Widget. 一.构造 allowCopy Boolen|Object (默认:false) 当他设置true, ...
用indexof来统计字符出现的次数
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
unsigned char idata temp[8];
unsigned char 是无符号字符,单字节 idata 表示变量位于内部数据区,外部数据区是 xdata,代码区是 codeidata:固定指前面0x00-0xff的256个RAM,其中前128 ...
小试牛刀 WiFi 远控 + wendu
废话少说直接上代码 DH11三根线信号线接2 WiFi 模块 r-------t t--------r en&vcc------3.3v 剩下的共地的啦 double Fahre ...
background属性冲突导致的部分浏览器背景图片不显示问题
前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

jQuery案例2

jQuery案例2的更多相关文章

随机推荐

热门专题