$(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="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>