2017.12.21-JQuery

作业:密码加强验证

<!DOCTYPE html>
<html>
<head>
<meta 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
{
//纯字符:弱;两种混合:中;三种混合:强。
//if (/^[a-zA-Z]+$/.test(msg)
// || /^[0-9]+$/.test(msg)
// || /^[!@#$%^&*()]+$/.test(msg)
//)
//{
// msgPwd.innerText = "弱";
//}
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;
default:
}
}
};
};
</script>
</head>
<body>
<input type="text" id="txtPwd" name="name" value="" />
<span id="msgPwd"></span>
</body>
</html> 【2017.12.23--JQuery 01】 第一:什么是JQuery
1、当前应用非常广泛的一个js类库,封装了大量方法,可以快速完成常用功能;
2、在使用前需要先引入jquery.js文件,才可以使用这个库中的成员;
3、$对象是jquery对象的简写方式,一般都使用$而不书写jquery,简便快捷。 第二:为什么使用它?
1、官方网址:http://jquery.com/,很好地解决了浏览器兼容问题;
2、体积小,使用方便(Write Less,Do More)
3、链式编程,隐式迭代,插件丰富,开源,免费
4、注意:只是为常用操作提供了方法,并不能实现所有操作,如果没有实现的操作,还需要手写js
已经在vs的项目框架中集成了jquery 第三:主要功能
1、对象处理
2、属性、css
3、选择器、筛选
4、文档处理
5、事件
6、效果
7、ajax
8、工具 第四:具体实现
1、基本选择器
使用$('选择器')符号进行筛选,用于获取页面上的标签,返回一个jq对象
id选择器:#id
元素选择器:标签
类选择器:.class
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>//使用 JQuery 必需引入jquery库文件
<script>
onload = function () {
//jquery对象:本质就是DOM的一个数组
//js对象;dom对象:操作HTML的对象
//通过jquery选择器得到的都是jquery对象,可以使用juerqy提供的方法
$('#btnShow').click = function () {
}
};
</script>
</head>
<body>
<input type="button" name="name" id="btnShow" value="" />
</body>
</html> 2、属性操作
用于对标签元素的属性进行操作
获取属性值:attr(属性)
设置属性值:attr(属性,值)
如果是操作标签的值可以简写为:text(),html()
如果是操作控件的值可以简写为:val()
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="显示" />
<img src="data:images/1.jpg" />
<script>
//操作属性
//获取属性的值;只写第一个参数,属性的名字
alert($('#btnShow').attr('value'));
//设置属性的值:写两个参数,第一个参数表示属性的名字,第二个表示值
$('#btnShow').attr('value', "Hello World");
//prop表示html的原有属性,attr而表示扩展属性
//如:img的src操作使用prop,2而href操作使用attr
$('#img').attr('href', 'abc');
//移除属性
$('#btnShow').removeAttr('value');
</script>
</body>
</html> 3、事件注册处理程序
方式一: bind(事件类型,处理函数)
方式二:事件类型(处理函数)
事件类型与dom的相同,去掉on前缀
卸载事件处理程序
unbind();//移除所有事件处理程序
unbind(‘click’);//移除所有的click事件处理程序
unbind('click',函数名称);//移除click事件的指定名称的处理函数,这种方法无法移除匿名函数
说明:dom事件不支持多播,而jquery事件支持多播
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="显示" />
<script>
alert( $('#btnShow').attr('value'));
////对于value属性的一种简写操作
//alert($('#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(3);
});
$('#btnShow').click(function () {
alert(4);
});
</script>
</body>
</html> 4、页面加载事件
js方式:window.onload=fn;
jq方式:$(document).ready(fn);->可简写为$(fn);
区别一:window.onload表示页面所有资源加载完成后才会被触发执行;$(fn)表示只要文档结构加载完成后就会执行,即所有标签加载完成
区别二:window.onload重复赋值会被覆盖,即不支持多播委托;$(fn)可以添加多个事件处理程序,即在jq中定义的事件支持多播
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
//为window的onload事件注册处理函数,表示页面加载完毕后触发执行
//标签加载完成,并且标签指定的资源也要加载完成,才能注册事件
onload = function () {
};
//表示加载完成后执行此代码,(dom就绪)只要标签加载完成后 即可注册(效率比较高)
$(document).ready(function () {
});
//简写如下
$(function () {
$('#btnShow').click(function () {
alert(123);
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="" />
</body>
</html> 5、示例
点谁谁哭
点击按钮,设置div中的内容text(),html()
点击按钮,让所有的p中都显示“我们都是P”
例子1:
<!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>
例子2:
<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() {
$('#btnShow').click(function () {
//对于标签对,使用text()、html()进行设置或获取
$('#txt1').text('这是个div');
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="显示" />
<div id="txt1"></div>
</body>
</html> DOM对象与JQ对象的转换
为什么要转换呢?
为了使用jq中的方法,需要将dom对象转换成jq对象
jq并没有完成所有操作的封装,需要将jq对象转换成dom对象,再调用dom方法
dom->jq:$(dom对象名称)
jq->dom:jq对象.get(index)或jq对象[index]
对于dom对象,有属性、事件成员
对于jq对象,只有方法成员
例子3:
<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 () {
//将jquery对象转换成dom对象:通过[下标]的形式返回dom对象
//通过jquery的选择器得到的数组,才是jquery对象,才可以调用jquery的成员
//将dom对象转换成jquery对象:$(dom对象)
$('#btnShow').click(function() {
$('p').text('都是P');//隐式迭代
$(this).val('abc'); var temp = [1, 2, 3];
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="都是P"/>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</body>
</html> 6、合成事件处理程序
hover(fn1,fn2):fn1表示mouseover的处理函数,fn2表示mouseout的处理函数
toggle(fn1,fn2...fnN):当元素被click后,轮流执行fn1、fn2、fnN方法
one(type,fn):表示注册的事件只响应一次,然后失效,type表示事件类型
例子:
<!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 () {
//合成指向、移开事件
//$('#btnShow').hover(function() {//指向
// this.style.color = 'red';
//}, function() {//移开
// this.style.color = 'black';
//}); //合成点击事件,指定在n个函数间切换,点击次数为m
//$('#btnShow').toggle(function() {//第m%n==1次点击时执行此函数
// alert(1);
//}, function() {//第m%n==2次点击执行此函数
// alert(2);
//}, function() {//第m%n==0次点击执行此函数
// alert(3);
//}); //合成事件:只将绑定的事件执行一次
//$('#btnShow').one('click', function() {
// alert(1);
//});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="显示"/>
</body>
</html> 7、调用JS成员
直接使用,不需要任何转换,因为jq就是js
如:array是js对象,不需要进行jq转换
如:方法parseInt()是js中的方法,在jq编码时可以直接使用
例子:
<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 () {
//找到按钮,并绑定点击事件
$('#btnShow').click(function() {
//找到文本框并获取值
var num = parseInt($('#txtNum').val());//直接调用js的成员进行操作
num++;
//将值显示到文本框
$('#txtNum').val(num);//传递参数时,表示将值赋给value
});
});
</script>
</head>
<body>
<input type="text" id="txtNum"/><input type="button" id="btnShow" value="显示"/>
</body>
</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 () {
//为按钮绑定点击事件
$('#btnAdd').click(function () {
//获取文本框中的值,并转换成整数
var num1 = parseInt($('#txtNum1').val());
var num2 = parseInt($('#txtNum2').val());
//运算
var result = num1 + num2;
//显示
$('#txtResult').val(result);
});
});
</script>
</head>
<body>
<input type="text" id="txtNum1"/>+
<input type="text" id="txtNum2"/>
<input type="button" id="btnAdd" value="="/>
<input type="text" id="txtResult"/>
</body>
</html> 8、文档处理
创建元素:$('标签字符串')
添加元素:
append(),appendTo():追加子元素
prepend(),prependTo():前加子元素
after(),insertAfter():后加兄弟元素
before(),insertBefore():前加兄弟元素
动态删除元素
empty():清空子元素
remove(selector):删除当前元素,无参表示删除全部,有参表示删除符合条件的元素
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('#btnAppend').click(function () {
//动态创建Jquery对象
var hello= $('<b>Hello World</b>');
//追加:在子元素中,显示结果: 你好!!!Hello World,在div文本之后追加
$('#divContainer').append(hello);
//追加:在子元素中,显示结果: Hello World 你好!!!,在div文本之前追加
$('#divContainer').prepend('preappend');
//追加:在元素中,显示结果: 你好!!!Hello World,在div文本之后追加
$('#divContainer').insertAfter('insertAfter');
//追加:在同级元素中,显示结果: Hello World 你好!!!,在div文本之前追加
$('#divContainer').insertBefore('insertBefore');
});
$('#btnAppendTo').click(function () {
//追加到:
$('<b>Hello World</b>').appendTo('#divContainer');
$('<b>Hello World</b>').prependTo('#divContainer');
});
$('#btnEmpty').click(function () {
//清空元素
$('#divContainer').empty();
});
$('#btnRemove').click(function () {
//移除元素
$('#divContainer').remove($('b'));
});
});
</script>
</head>
<body>
<input type="button" id="btnAppend" value="Append" />
<input type="button" id="btnAppendTo" value="AppendTo" />
<input type="button" id="btnEmpty" value="Empty" />
<input type="button" name="name" id="btnRemove" value="remove" />
<div id="divContainer">你好!!!</div> </body>
</html> 9、省市联动
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
//定义省市数据,键值对集合
var datas = {
"北京": ["朝阳", "海淀", "昌平", "丰台"],
"山东": ["青岛", "济南", "烟台"],
"山西": ["大同", "太原", "运城", "长治"],
"河南": ["洛阳", "开封", "郑州", "驻马店"],
"河北": ["石家庄", "张家口", "保定"]
};
$(function () {
//创建省的select
var select = $('<select id="selectProvince"></select>');
//为省的select绑定change事件
select.change(function () {
var citys = datas[$(this).val()];
//删除市的原有option
$('#selectCity').empty();
//添加option
$.each(citys, function (index,item) {
$('<option>' + item + '</option>').appendTo(selectCity);
});
});
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> 10、层级选择器
符号一:空格,表示取子元素,无论是几层的子元素,都会被选择到
符号二:大于号>,表示直接子元素,不包含后代子元素
符号三:加号+,表示之后紧临的一个同级元素
符号三:波浪号~,表示之后的所有同级元素 next(),表示下一个同级节点
prev(),表示上一个同级节点
nextAll(),表示之后所有同级节点
prevAll(),表示之前所有同级节点
siblings(),表示所有同级节点
parent(),表示父级节点
children(),表示子级节点
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//空格表示查找所有子级
$('#d1 div');
//大于号 表示查找直接子级,不包含后代
$('#d1>div');
//加号+表示 找到后面紧邻同级的div,若是没有则返回空数组
$('#d1+div');
//波浪号 表示之后的所有同级元素
$('#d1~div');
});
</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> 11、操作样式与类
样式操作:css(),按照键值对的格式对样式进行设置
如果只设置一个样式,则可直接赋值,如:css('color','red');
如果设置多个样式,则使用css({键1:值1,键2:值2})的格式
操作后生成的代码,都是对标签的style属性进行设置
类操作:addClass,hasClass,removeClass,toggleClass
也可以使用属性方法进行操作:attr('class','className');
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//设置样式
$('#btnShow').css('color', 'grren');
$('#btnShow').css('background-color', 'red');
//设置多个样式
$('#btnShow').css({
'color': 'white',
'background-color': 'blue',
'font-size':'25px'
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="显示" />
</body>
</html> 12、事例实现
示例1:开关灯
按钮点一下背景变白
再点一下背景变黑
如此往复
例子1:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('#btnLight').click(function () {
if (this.value == '关灯') {
$('body').css('background-color', 'black');
$(this).val('开灯');
} else {
$('body').css('background-color', 'white');
$(this).val('关灯');
} });
});
</script>
</head>
<body>
<input type="button" id="btnLight" name="name" value="关灯" />
</body>
</html>
示例2:点击按钮后,让页面中所有p的文字都变成黄色,文字都显示为‘都是P’(体会:链式编程)
例子2:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('#btnChange').click(function () {
//链式编程:只查找一次,支持逐个使用方法
$('p').text('都是P').css('color','yellow');
});
});
</script>
</head>
<body>
<input type="button" id="btnChange" name="name" value="都是P" />
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
</body>
</html>
示例3:ul中li的练习
鼠标指向li时文本变为红色,提示手图标
鼠标移开li时文本变为黑色
点击li时移到另外一个ul中
例子3:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {//指向
$(this).css({
'color': 'red',
'cursor': 'pointer'//变成小手
})
}, function () {//移开
$(this).css('color', 'black');
}).click(function () {//链式编程,编写点击事件
$(this).appendTo('#ul2');
});
}); </script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<ul id="ul2"></ul>
</body>
</html> 13、过滤选择器
用于对选择结果执行进一步过滤
:first 第一个、:last 最后一个 、:eq() 搜索第几个、:gt() 大于、:lt() 小于、:not(选择器)、:even偶数、:odd奇数
说明1:索引下标从0开始
说明2:以下标判断奇偶,下标从0开始
标题的快速获取
普通方法:$('h1,h2,h3...h6')
快捷方法:$(':header')
例子:
<html>
<head>
<meta 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> 14、
根据数据生成表格(数据见备注)
使表格中奇偶行显示不同背景色
当鼠标指向行时高亮显示
当鼠标离开时离开行时恢复到原来颜色
设置列表中前三名粗体显示
例子1:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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)
});
});
</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> 15、
设置ul中的li效果
移上时显示为红色背景
此节点之前的节点显示为黄色背景
此节点之后的节点显示为蓝色背景
移开时全都显示白色背景
提示:方法end() 恢复到最近的"破坏性"操作之前
例子2:
<html>
<head>
<meta 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 id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<ul id="ul2"></ul>
</body>
</html>

  

上一篇:eWebeditor编辑器上传图片路径错误解决方法[疑难杂症]【转,作者:unvs】


下一篇:CAS SSO:汇集配置过程中的错误解决方法