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 ...
随机推荐
- java解析HTML之神器------Jsoup
背景:公司项目要对接第三方商城的商品到自己的商城来卖,商品详情给了个链接url,因为对方的商品详情有他们的物流说明,售后信息,所以要求去掉这部分的代码 @Test public void getIte ...
- 递归与动态规划II-汉诺塔
题目描述 有一个int数组arr其中只含有1.2和3,分别代表所有圆盘目前的状态,1代表左柱,2代表中柱,3代表右柱,arr[i]的值代表第i+1个圆盘的位置.比如,arr=[3,3,2,1],代表第 ...
- nginx 学习（一）
今天不会nginx被怼了一顿.我必然不能忍,所以就赶忙来补充一下nginx知识!! nginx简介 nginx是一款高性能的http服务器,目前国内包括BAT在内的众多互联网企业均采用其作为反向代理服 ...
- CC2640蓝牙芯片开发备记
server ,characteristic UUID ,handle sever ,一个工程里可以有多个服务,按键服务,心率计服务,马达服务. characteristic , 一个服务可以有多个的 ...
- The eventual following stack trace is caused by an error thrown for debugging purposes as well as to attempt to terminate the thread which caused the illegal access, and has no functional impact.
好久没有冒泡了,最近在新环境上搭建应用时,启动报错: INFO: Illegal access: this web application instance has been stopped alre ...
- linux之时间设置
date 显示与设置系统时间 %Y year %m moth 月 %d day 日期 %H hour 小时 %M minute 分钟 %S sec 秒 +%F ...
- 2018-计算机系机试-A
#include<stdio.h> #include<cstdio> #include<cmath> #include<cstring> #includ ...
- ES6 —— 数组总结
1. map:映射 一个对一个 arr.map(function(item) { ... }) 可以配合箭头函数:arr.map(item => ... ) let arr1 = [1 ...
- Angular/cli 安装（windows环境）。
1.卸载先前安装的Angular/cli npm uninstall -g angular-clinpm uninstall --save-dev angular-clinpm uninstall - ...
- 安装Java8以后，Eclipse运行异常解决方案
再输入cmd,java后提示运行环境配置中,安装的是jdk1.7,但要求是jdk1.8,也就是说Java8. 网上删除注册表,下载彻底清除软件均不能解决问题的,请按照下边提示完成操作即可. 1.在文件 ...