共计 10085 个字符,预计需要花费 26 分钟才能阅读完成。
概述
本章会介绍jquery事件的用法,我们想要给当前元素添加事件, 只需要选中当前元素, 这里调用 click 即可, 和原生 js 不同>的是: 不用’on’开头;
animate的用法,以及一些动画效果;jquery三个属性操作方法,html(),val(),prop()的使用;
使用正则表达式完成表单的验证。
一. 绑定事件
给元素绑定click事件,可以用如下方法:
添加绑定事件
使用方法:
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('.box')
$div.click(function(){
console.log('haha')
console.log($(this))
console.log(this)
})
})
</script>
</head>
<body>
<div class="box">哈哈</div>
</body>
点击之后的结果:
获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()方法获取
使用方法:
var $li = $('.list li').eq(1);
alert( $li.index() ); // 弹出1
<ul class="list">
<li>1</li>
<li>2</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function () {
var $li = $('li')
$li.click(function(){
console.log( $(this).index() )
})
})
</script>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
运行结果:
小案例
选项卡的制作
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('input')
var $div = $('.tab_cons div')
// console.log($btn)
$btn.click(function(){
var index = $(this).index()
// console.log($btn[index])
// 给当前点击元素添加样式
$($btn[index]).addClass('active')
// 给其他元素去除样式
$($btn[index]).siblings().removeClass('active')
// 给当前点击元素添加样式
$($div[index]).addClass('current')
// 给其他元素去除样式
$($div[index]).siblings().removeClass('current')
})
})
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
或者可以写成这样:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('input')
var $div = $('.tab_cons div')
$btn.click(function(){
// 当前元素添加, 其他元素去除
$(this).addClass('active').siblings().removeClass('active')
$div.eq( $(this).index() ).addClass('current').siblings().removeClass('current')
})
})
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
总结:
- 我们想要给当前元素添加事件, 只需要选中当前元素, 这里调用 click 即可, 和原生 js 不同的是: 不用’on’开头
- 在点击事件之中,$(this) 就代表当前选中元素(jquery对象), 想要获取当前元素的索引值,可以使用 index( )方法
- 如果当前元素是一个dom对象, 变成 jquery 对象的方法是外边加
$
符号: $(dom元素) - 调用 jquery对象的下标,获取的是 dom元素对象: $div[0] ===> dom元素对象
二. jquery动画
通过 animate 方法可以设置元素21某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
使用方法:
/*
animate参数:
参数一:要改变的样式属性值,写成字典的形式
参数二:动画持续的时间,单位为毫秒,一般不写单位
参数三:动画曲线,默认为‘swing’,缓冲运动,还可以设置为‘linear’,匀速运动
参数四:动画回调函数,动画完成后执行的匿名函数
*/
$('#div1').animate({
要改变的属性值
},动画持续时间,动画的效果,function(){
动画执行完成之后调用的代码
});
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>
$(function(){
$('.btn').click(function(){
$('.box').animate({
'width':'200px'
},1000,'swing',function () {
$('.box').animate({
'height':'200px'
},1000,'swing',function(){
})
})
})
})
</script>
</head>
<body>
<div class="box"></div>
<button class="btn">按钮</button>
</body>
总结:
- 我们使用 animate( ) 方法来设置动画
- 动画内部有四个参数: 要更改的元素属性, 动画时长( 以毫秒计 ), 动画曲线, 动画完成之后所做操作
- 我们可以使用这样的方式来做一些简单动画.
三. jquery特殊效果
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
使用方式:
$('div').fadeIn()
例如:
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
display:none;
}
</style>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.btn').click(function(){
$('.box').fadeIn()
})
})
</script>
</head>
<body>
<button class="btn">按钮</button>
<div class="box"></div>
</body>
显示效果:
fadeIn()效果:
fadeOut( )效果:
fadeToggle( )效果:
hide()效果:
show()效果:
toggle()效果:
slideDown()效果:
slideUp()效果:
slideToggle()效果:
总结:
- jquery 帮助我们封装了一些特殊的动画效果, 我们可以直接调用这些动画效果来实现一部分常见的操作
- 这些动画效果的使用方式都是一样的: 1. 找到当前标签 2. 调用标签的对应动画效果
- 使用格式:
$(获取元素).动画效果()
四. jquery链式调用
jquery 对象的方法会在执行完后返回这个 jquery 对象,所有 jquery 对象的方法可以连起来写:
$('#div1') // id为div1的元素
.children('ul') // 该元素下面的ul子元素
.slideDown('fast') // 高度从零变到实际高度来显示ul元素
.parent() // 跳到ul的父元素,也就是id为div1的元素
.siblings() // 跳到div1元素平级的所有兄弟元素
.children('ul') // 这些兄弟元素中的ul子元素
.slideUp('fast'); // 高度实际高度变换到零来隐藏ul元素
层级菜单
层级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级菜单</title>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
}
body,ul{
margin:0px;
padding:0px;
}
ul{list-style:none;}
.menu{
width:200px;
margin:20px auto 0;
}
.menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu .level1{
border-bottom:1px solid #afc6f6;
}
.menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menu li ul li{
border-bottom:1px solid #afc6f6;
}
.menu li ul{
display:none;
}
.menu li ul.current{
display:block;
}
.menu li ul li a:hover{
background-color:#f6b544;
}
</style>
<script src="./jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $a = $('.level1')
$a.click(function(){
$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp()
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">手机</a>
<ul class="current">
<li><a href="#">iPhone X 256G</a></li>
<li><a href="#">红米4A 全网通</a></li>
<li><a href="#">HUAWEI Mate10</a></li>
<li><a href="#">vivo X20A 4GB</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">笔记本</a>
<ul>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">ThinkPad</a></li>
<li><a href="#">外星人(Alienware)</a></li>
<li><a href="#">惠普(HP)薄锐ENVY</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">电视</a>
<ul>
<li><a href="#">海信(hisense)</a></li>
<li><a href="#">长虹(CHANGHONG)</a></li>
<li><a href="#">TCL彩电L65E5800A</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">鞋子</a>
<ul>
<li><a href="#">新百伦</a></li>
<li><a href="#">adidas</a></li>
<li><a href="#">特步</a></li>
<li><a href="#">安踏</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">玩具</a>
<ul>
<li><a href="#">乐高</a></li>
<li><a href="#">费雪</a></li>
<li><a href="#">铭塔</a></li>
<li><a href="#">贝恩斯</a></li>
</ul>
</li>
</ul>
</body>
</html>
五. jquery 属性操作
html ( )
使用: html( ) 取出元素文本 或设置元素内容
作用类似于 innerHTML( )
使用方式:
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字</span>');
val( )
val( ) 方法返回或设置被选元素的值。
元素的值##是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数,则返回被选元素的当前值。
使用方式:
// 取出html内容
var val = $("input").val();
// 设置html内容
$("input").val("Hello World");
prop( )
取出或设置某个属性的值
这里的属性是指标签除 css 样式以外的其他属性
使用方式:
// 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
<head>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
var $a = $('#link01');
// 读取元素包裹的内容
var sTr = $div.html();
// alert(sTr);
// 写入或者叫设置元素包裹的内容
$div.html('改变的文字');
$div.html('<a href="http://www.baidu.com">百度网</a>')
$div.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>');
// 操作元素标签内除样式之外的其他的属性
// 读取属性值:
alert( $a.prop('id') );
// 写入或者叫设置属性值
$a.prop({'href':'http://www.itcast.cn','title':'这是去到传智播客的网站的链接'});
$a.html('传智播客');
})
</script>
</head>
<body>
<div id="div1">这是一个div</div>
<a href="#" id="link01">这是一个链接</a>
</body>
六. jquery循环
each( )
对 jquery 选择的对象集合分别进行操作,需要用到 jquery 循环操作,此时可以用对象上的each方法:
使用方式:
$(selector).each( function(){} )
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $li = $('li')
// 使用for循环写法:
// var length = $li.length
// for(var i = 0;i < length; i++){
// $li.eq(i).css({'background-color':'red'})
// }
$li.each(function(){
$(this).css({'background-color':'pink'})
})
$li.click(function(){
$(this).css({'background-color':'pink'})
})
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
七. jquery事件
事件函数列表:
比原生 js 省略了 ‘on’
这里涉及到一些事件冒泡的内容, 主要原理:
我们点击子元素的时候,子元素会将事件传递到父元素去,进而触发父元素的事件.
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单
例如:
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $input = $('#input1')
// 默认,一上来就选中
$input.focus()
// 取消焦点时调用的方法
$input.blur(function(){
// alert('haha')
})
var $div1 = $('.box')
// mouseover和mouseout的使用
// $div1.mouseover(function(){
// $div1.stop().animate({'margin-top':'60px'})
// })
// $div1.mouseout(function(){
// $div1.stop().animate({'margin-top':'0px'})
// })
// mouseenter和mouseleave的使用
// $div1.mouseenter(function(){
// $div1.animate({'margin-top':'100px'})
// })
// $div1.mouseleave(function(){
// $div1.animate({'margin-top':'0px'})
// })
// hover的使用
$div1.hover(function(){
$div1.animate({'margin-top':'100px'})
},function(){
$div1.animate({'margin':'0px'})
})
})
</script>
</head>
<body>
<input type="text" id="input1">
<div class="box">
<div class="son"></div>
</div>
</body>
再例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $form = $('#form1')
var $user = $('#name')
$form.submit(function(){
alert($user.val())
// 阻止提交事件
return false
})
})
</script>
</head>
<body>
<form action="" id="form1">
<p>
<label for="name">姓名:</label>
<input type="text" id="name">
</p>
<p>
<label for="pswd">密码:</label>
<input type="password" id="pswd">
</p>
<input type="submit">
</form>
</body>
八. 表单验证
正则表达式
能让计算机读懂的字符串匹配规则。
正则表达式的写法
使用方法:
// 定义一个正则表达式(两种方法)
var re = new RegExp('规则', '可选参数');
var re = /规则/参数;
// 测试正则表达式:
var result = re.test(要测试的字符串)
// result ---> true
// result ---> false
规则中的字符
普通字符匹配
规则使用方式:
/a/ 匹配字符 ‘a’
/a,b/ 匹配字符 ‘a,b’
转义字符匹配
规则使用方式:
\d 匹配一个数字,即0-9
\D 匹配一个非数字,即除了0-9
\w 匹配一个单词字符(字母、数字、下划线)
\W 匹配任何非单词字符。单词字符包括:a-z、A-Z、0-9,以及下划线。
\s 匹配一个空白符
\S 匹配一个非空白符
. 匹配一个任意字符
例如:
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false
量词
对左边的匹配字符定义个数
规则使用方式:
? 出现零次或一次(最多出现一次)
+ 出现一次或多次(至少出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次
任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9]
: 匹配a到z或者0到9中的任意一个字符
限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
修饰参数
g: global: 全文搜索,默认搜索到第一个结果接停止
i: ingore case: 忽略大小写,默认大小写敏感
常用函数 test
使用方法:
正则.test(字符串)
// 匹配成功,就返回真,否则就返回假
正则默认规则
匹配成功就结束,不会继续匹配,区分大小写
常用正则规则
// 用户名验证:(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
// 邮箱验证:
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
// 密码验证:
var rePass = /^[\w!@#$%^&*]{6,20}$/;
// 手机号码验证:
var rePhone = /^1[34578]\d{9}$/;
例如:
<script src="./jquery-1.12.4.min.js"></script>
<script>
// var str = 'helloA world'
// var reg = /a/i
var str = 'a123ab'
var reg = /^\d/
var result = reg.test(str)
alert(result)
</script>