Jquery入门（二）

发表于 | 分类于 | 热度: ℃ |
字数统计: 3,879字 | 阅读时长 ≈ 18分钟

概述

本章会介绍jquery事件的用法，我们想要给当前元素添加事件, 只需要选中当前元素, 这里调用 click 即可, 和原生 js 不同>的是: 不用’on’开头；
animate的用法，以及一些动画效果；jquery三个属性操作方法，html()，val()，prop()的使用；
使用正则表达式完成表单的验证。

一. 绑定事件

给元素绑定click事件，可以用如下方法：

添加绑定事件

1
2
3
4
5
6
7
8
9
使用方法:


$('#btn1').click(function(){

    // 内部的this指的是原生对象
    // 使用jquery对象用 $(this)

})

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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()方法获取

1
2
3
4
5
6
7
8
9
10
11
12
13
使用方法:

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>

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

运行结果:

小案例

选项卡的制作

截图20180528115919

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>

或者可以写成这样: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用方法:


/*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数
*/

$('#div1').animate({
	要改变的属性值
},动画持续时间,动画的效果,function(){
    动画执行完成之后调用的代码
});

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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特殊效果

1
2
3
4
5
6
7
8
9
10
11
12
13
fadeIn() 			淡入
fadeOut() 			淡出
fadeToggle()		切换淡入淡出
hide() 				隐藏元素
show() 				显示元素
toggle() 			切换元素的可见状态
slideDown() 		向下展开
slideUp() 			向上卷起
slideToggle() 		依次展开或卷起某个元素

使用方式: 

$('div').fadeIn()

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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()效果:

11

fadeOut( )效果:

12

fadeToggle( )效果:

13
hide()效果:

14

show()效果:

15

toggle()效果:

16

slideDown()效果:

17

slideUp()效果:

18

slideToggle()效果:

19

总结:

  • jquery 帮助我们封装了一些特殊的动画效果, 我们可以直接调用这些动画效果来实现一部分常见的操作
  • 这些动画效果的使用方式都是一样的: 1. 找到当前标签 2. 调用标签的对应动画效果
  • 使用格式: $(获取元素).动画效果()

四. jquery链式调用

jquery 对象的方法会在执行完后返回这个 jquery 对象，所有 jquery 对象的方法可以连起来写：

1
2
3
4
5
6
7
$('#div1') 				//  id为div1的元素
.children('ul') 		//	该元素下面的ul子元素
.slideDown('fast') 		//	高度从零变到实际高度来显示ul元素
.parent()  				//	跳到ul的父元素，也就是id为div1的元素
.siblings()  			//	跳到div1元素平级的所有兄弟元素
.children('ul') 		//	这些兄弟元素中的ul子元素
.slideUp('fast'); 		//	高度实际高度变换到零来隐藏ul元素

层级菜单

QQ截图20180604222010

层级菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!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( )

1
2
3
4
5
6
7
使用方式: 

// 取出html内容
var $htm = $('#div1').html();

// 设置html内容
$('#div1').html('<span>添加文字</span>');

val( )

val( ) 方法返回或设置被选元素的值。

元素的值##是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

1
2
3
4
5
6
7
使用方式:

// 取出html内容
var val = $("input").val();

// 设置html内容
$("input").val("Hello World");

prop( )

取出或设置某个属性的值

这里的属性是指标签除 css 样式以外的其他属性

1
2
3
4
5
6
7
8
使用方式:


// 取出图片的地址
var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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方法：

1
2
3
4
使用方式: 


$(selector).each( function(){} )

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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’

这里涉及到一些事件冒泡的内容, 主要原理:

我们点击子元素的时候,子元素会将事件传递到父元素去,进而触发父元素的事件.

1
2
3
4
5
6
7
8
9
10
blur() 				元素失去焦点
focus() 			元素获得焦点
click() 			鼠标单击
mouseover() 		鼠标进入（进入子元素也触发）
mouseout() 			鼠标离开（离开子元素也触发）
mouseenter() 		鼠标进入（进入子元素不触发）
mouseleave() 		鼠标离开（离开子元素不触发）
hover() 			同时为mouseenter和mouseleave事件指定处理函数
ready() 			DOM加载完成
submit() 			用户递交表单

例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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>

再例如: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>

八. 表单验证

正则表达式

能让计算机读懂的字符串匹配规则。

正则表达式的写法

1
2
3
4
5
6
7
8
9
10
11
12
使用方法: 


// 定义一个正则表达式(两种方法)
var re = new RegExp('规则', '可选参数');
var re = /规则/参数;


// 测试正则表达式: 
var result = re.test(要测试的字符串)
// result  --->  true  
// result  --->  false

规则中的字符

普通字符匹配

1
2
3
4
规则使用方式:

/a/                  匹配字符 ‘a’  
/a,b/ 				匹配字符 ‘a,b’

转义字符匹配

1
2
3
4
5
6
7
8
9
10
11
规则使用方式: 



\d 		匹配一个数字，即0-9
\D 		匹配一个非数字，即除了0-9
\w 		匹配一个单词字符（字母、数字、下划线）
\W 		匹配任何非单词字符。单词字符包括：a-z、A-Z、0-9，以及下划线。
\s 		匹配一个空白符
\S 		匹配一个非空白符
. 		匹配一个任意字符

例如: 

1
2
3
4
5
6
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

量词

对左边的匹配字符定义个数

1
2
3
4
5
6
7
8
9
规则使用方式: 


? 			出现零次或一次（最多出现一次）
+ 			出现一次或多次（至少出现一次）
* 			出现零次或多次（任意次）
{n} 		出现n次
{n,m} 		出现n到m次
{n,} 		至少出现n次

任意一个或者范围

1
2
3
[abc123] : 	匹配‘abc123’中的任意一个字符

[a-z0-9] : 	匹配a到z或者0到9中的任意一个字符

限制开头结尾

1
2
3
^ 		以紧挨的元素开头

$ 		以紧挨的元素结尾

修饰参数

1
2
3
g： 		global: 全文搜索，默认搜索到第一个结果接停止

i： 		ingore case: 忽略大小写，默认大小写敏感

常用函数 test

1
2
3
4
5
使用方法: 

正则.test(字符串) 

// 匹配成功，就返回真，否则就返回假

正则默认规则

匹配成功就结束，不会继续匹配，区分大小写

常用正则规则

1
2
3
4
5
6
7
8
9
10
11
// 用户名验证：(数字字母或下划线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}$/;

例如: 

1
2
3
4
5
6
7
8
9
10
11
<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>
------ 本文结束------
坚持原创技术分享，您的支持将鼓励我继续创作！
0%