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 ...
随机推荐
- JDBC-day1
package cn.gzsxt.test; import java.sql.Connection;import java.sql.DatabaseMetaData;import java.sql.D ...
- Problem 1: Multiples of 3 and 5
小白一枚,python解法,共同学习,一起进步. Problem 1: Multiples of 3 and 5 If we list all the natural numbers below 10 ...
- MSBuild 命令参数
Build a Visual Studio project or solution using MSBuild Command Line Arguments 常用命令行参数 详解: MSBuild ...
- soapui 测试 带hear 验证的写法
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web=& ...
- IP通信基础课堂笔记----第三章（自认为的重点）
网络层协议IP IP数据包格式:固定部分 { 标识(16):计数器,源站每发送一个分组,标识+1:源IP地址的标识是全网唯一的. (包含TCP/UDP首部) | 标志(3):当最低 ...
- java学习初体验NO.1
一.学习目标: 1.理解Java编译原理 在Java编程语言中,所以源代码首先以用.Java扩展名结尾的纯文本件编写,然后,编译器将这些源文件编译成.Class文件.然后,Java启动器工具使用Jav ...
- OpenStack源码分析 Neutron源码分析（一）-----------Restful API篇
原文:https://blog.csdn.net/happyanger6/article/details/54586463 首先,先分析WSGI应用的实现. 由前面的文章http://blog.csd ...
- C语言---指针变量详解3
指针可以指向一份普通类型的数据,例如 int.double.char 等,也可以指向一份指针类型的数据,例如 int *.double *.char * 等.如果一个指针指向的是另外一个指针,我们就称 ...
- Tomcat 加腾讯云 实现二级域名访问
搬家这个时间段不能用,从原网站https://blog.csdn.net/qq_36570464/article/details/86157394 截图过来的.也是自己写的. Tomcat 加腾讯云实 ...
- 合肥工业大学oj G-诺德森海岸
#include<iostream> #include<vector> #include<bits/stdc++.h> using namespace std; v ...