jquery 进阶
jquery特殊效果
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box,.box2{
width: 300px;
height: 300px;
background: gold;
/* display: none; */
}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
var $btn = $("#btn");
var $div = $('.box');
$btn.click(function () {
// 隐藏
$div.hide();
// 显示
$div.show();
// 自动显示 隐藏
$div.toggle();
// 制作淡入和淡出动画
// 淡入
$div.fadeIn();
// 淡出
$div.fadeOut();
// 自动淡入淡出
$div.fadeToggle();
// 制作向下展开和向上卷起
// 向上卷起
$div.slideUp();
// 向下展开
$div.slideDown();
// 自动 向下展开 向上卷起
$div.slideToggle();
// 最后一次有效 stop
$div.stop().slideToggle();
});
})
</script>
</head>
<body>
<input type="button" value="动画" id="btn">
<div class="box"></div>
</body>
</html>
链式调用 – 重要特性
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
操作元素属性
1、html() 取出或设置html内容
2、prop() 取出或设置某个属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $a = $("#link01");
var $div = $("#div1");
// prop 读取属性值
var sId = $a.prop('id');
alert(sId);
// prop 设置属性值
$a.prop({"href":'http://www.baidu.com', 'title':'你猜链接去哪里的', 'class':'big'});
// 操作元素包裹的内容
// 读取内容
var sTr = $div.html();
alert(sTr);
// 写入也叫做设置 修改元素包裹的内容
$div.html('改变的文字');
$div.html("<ul><li>list</li><li>list</li></ul>");
})
</script>
</head>
<body>
<a href="#" id="link01" title="去百度的链接">链接</a>
<div id="div1">这是一个div</div>
</body>
</html>
jquery事件
事件函数列表:
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单
表单验证
1、什么是正则表达式:
能让计算机读懂的字符串匹配规则。
2、正则表达式的写法:
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
3、规则中的字符
1)普通字符匹配:
如:/a/ 匹配字符 ‘a’,/a,b/ 匹配字符 ‘a,b’
2)转义字符匹配:
\d 匹配一个数字,即0-9
\D 匹配一个非数字,即除了0-9
\w 匹配一个单词字符(字母、数字、下划线)
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false
4、量词:对左边的匹配字符定义个数
? 出现零次或一次(最多出现一次)
+ 出现一次或多次(至少出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
7、修饰参数:
g: global,全文搜索,默认搜索到第一个结果接停止
i: ingore case,忽略大小写,默认大小写敏感
8、常用函数
test
用法:正则.test(字符串) 匹配成功,就返回真,否则就返回假
正则默认规则
匹配成功就结束,不会继续匹配,区分大小写
正则表达式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 创建正则表达式
// 第一种方式:
var reTest01 = new RegExp("a")
alert(reTest01);
// 第二种方式:
var reTest02 = /a/;
// 忽略大小写
var reTest03 = /a/i;
// 数字匹配
var reTest04 = /\d+/;
// 限制开头结尾
var reTest05 = /^\d+$/;
var sTr01 = 'abc';
var sTr02 = 'Abc';
var sTr03 = '123434324';
var sTr04 = '12334abcde';
// 使用正则表达式
// test 返回 True 或者 False
alert(reTest02.test(sTr01));
alert(reTest02.test(sTr02));
alert(reTest03.test(sTr02));
alert(reTest04.test(sTr03));
alert(reTest04.test(sTr04));
alert(reTest05.test(sTr03));
alert(reTest05.test(sTr04));
// \d 数字
//
</script>
</head>
<body>
</body>
</html>