jQuery案例2
$(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>
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 ...
随机推荐
- Python随笔--代理ip
- Bouml快速使用指南
一.Bouml简介 Android 系统中有大量Java.C++代码,继承以及依赖关系非常复杂,Bouml可以用c++.Java.Idl.Php和Python建模及生成代码,反之也可通过uml工具更好 ...
- Thread 详解
转自:http://www.mamicode.com/info-detail-517008.html 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 ...
- @EnableHystrix
@EnableHystrix 启动熔断降级服务 @Component把普通的pojo类实例到spring容器中去,相当于配置文件中的<bean id="" class=&qu ...
- 声明一个set集合，使用HashSet类，来保存十个字符串信息，然后通过这个集合，然后使用iterator()方法，得到一个迭代器，遍历所有的集合中所有的字符串；然后拿出所有的字符串拼接到一个StringBuffer对象中，然后输出它的长度和具体内容； 验证集合的remove()、size()、contains()、isEmpty()等
package com.lanxi.demo1_3; import java.util.HashSet; import java.util.Iterator; import java.util.Set ...
- Spring MVC流程
这是spring mvc框架结构图,图片是很早在网上撸过来的,具体在哪忘了…… 早期学习Springmvc 并没有具体了解过,只知道这样用很爽,最近了解下基本结构流程及组件所在…… 执行流程 Spri ...
- 如何在linux环境安装数据库
1.1 获取oracle 数据库安装包: 注意:获取的是database的安装包,不是客户端的安装包 1.2 以root用户登陆云主机,修改主机名 Hostname 1.2.1 ...
- ie9上传后下载json
1.保持后台控制器返回的数据为字符串格式 2.js:dataType类型保持为html格式 dataType: 'html',//默认就是html类型,不写对火狐有影响 3.将上传后后台返回的字符串转 ...
- Hadoop Hive HBase Spark Storm概念解释
HadoopHadoop是什么? 答:一个分布式系统基础架构. Hadoop解决了什么问题? 答:解决了大数据(大到一台计算机无法进行存储,一台计算机无法在要求的时间内进行处理)的可靠存储(HDFS) ...
- 在过去五分钟内，TypeScript语言服务以外终止了5次
这个问题困扰了我两次...第一次重装了VS CODE 具体的原意找到之后我直接想骂娘....... 各位如果碰到这个问题....请打开你的360安全卫士!!! 注意看看您家360的防护日志有木有贴心帮 ...