一、jQuery入门
1. 定义和特点
- 目前最流行的JavaScript函数库之一,对JavaScript进行了封装。
- 并不是一门新语言,而是将常用的、复杂的JavaScript操作进行函数化封装,封装后可以直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。
2. 第一个示例
实现隔行变色的效果,在使用jQuery实现效果之前,先使用在HTML中使用class属性直接标记、使用JavaScript来实现动态隔行变色,然后再采用jQuery来实现,可以明显体现到jQuery的方便和简单。
2.1 CSS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border: 1px solid red;
width: 500px;
border-collapse: collapse;
text-align: center;
}
tr,th,td{
border: 1px solid red;
}
.odd{
background-color: gold;
}
.even{
background-color: skyblue;
}
</style>
</head>
<body>
<table>
<tr class="odd">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr class="even">
<td>1</td>
<td>明玉</td>
<td>女</td>
<td>28</td>
</tr>
<tr class="odd">
<td>2</td>
<td>吕布</td>
<td>男</td>
<td>38</td>
</tr>
<tr class="even">
<td>3</td>
<td>貂蝉</td>
<td>女</td>
<td>18</td>
</tr>
<tr class="odd">
<td>4</td>
<td>西施</td>
<td>女</td>
<td>16</td>
</tr>
<tr class="even">
<td>5</td>
<td>曹操</td>
<td>男</td>
<td>60</td>
</tr>
</table>
</body>
</html>
缺点是很明显的,一旦改变增加或者删除某些行,改变了奇偶行顺序,就不是隔行变色了。
可以考虑使用JavaScript实现动态的隔行变色,等页面加载完后执行JavaScript代码实现隔行变色。示例1的缺点就没有了。
2.2 JS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border: 1px solid red;
width: 500px;
border-collapse: collapse;
text-align: center;
}
tr,th,td{
border: 1px solid red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var trs = document.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++){
if(i % 2 == 0){
trs[i].style.backgroundColor = 'gold';
}else{
trs[i].style.backgroundColor = 'skyblue';
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>明玉</td>
<td>女</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>吕布</td>
<td>男</td>
<td>38</td>
</tr>
<tr>
<td>3</td>
<td>貂蝉</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>4</td>
<td>西施</td>
<td>女</td>
<td>16</td>
</tr>
<tr>
<td>5</td>
<td>曹操</td>
<td>男</td>
<td>60</td>
</tr>
</table>
</body>
</html>
能否有比JavaScript更加简单的方式实现隔行变色呢,该jQuery上场了。
2.3 jQuery实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
table{
border: 1px solid red;
width: 500px;
border-collapse: collapse;
text-align: center;
}
tr,th,td{
border: 1px solid red;
}
</style>
<script type="text/javascript">
$(function(){
$('tr:odd').css('background-color', 'gold');
$('tr:even').css('background-color', 'skyblue');
})
</script>
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>明玉</td>
<td>女</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>吕布</td>
<td>男</td>
<td>38</td>
</tr>
<tr>
<td>3</td>
<td>貂蝉</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>4</td>
<td>西施</td>
<td>女</td>
<td>16</td>
</tr>
<tr>
<td>5</td>
<td>曹操</td>
<td>男</td>
<td>60</td>
</tr>
</table>
</body>
</html>
3. jQuery的使用
- 关于jQuery的使用需要先导入jQuery的js文件,发现jQuery本身就是一个JS文件。
$
是jQuery使用最多的符号,它有多个作用。这个示例中就使用了$
的两个作用。
作用1:$(function(){})
相当于
window.onload=function(){}
,功能比window.onload更强大
- window.onload一个页面只能写一个,但是可以写多个$() 而不冲突
- window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等),但是$的执行时间要早
- 完整形式是
$(document).ready(…….);
作用2: $(selector)
选择器。jQuery具有强大的选择器功能。
- jQuery的基本语法:
$(selector).action
。获取页面内容:$(selector)
。操作页面的内容:action- 控制页面样式,访问和操作DOM元素 , 事件处理功能 ,动画功能
- Ajax功能(jQuey不仅封装了JavaScript,还封装了Ajax)
4. jQuery对象和DOM对象
在学习jQuery的过程中,经常出现调用函数出错的情况。究其原因,很多是因为还是对jQuery对象和DOM对象理解不清楚了,出现了函数互调的情况,当然出错了。
DOM对象和jQuery对象分别拥有一套独立的属性和函数,不能混用。
- DOM对象:直接使用JavaScript获取的节点对象。例如:className , innerHTML ,value
- jQuery对象:使用jQuery选择器获取的节点对象,它能够使用jQuery中的方法。例如:addClass() , html() ,val()
- DOM对象转换成jQuery对象: $(DOM对象)
- jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)
5. 案例-理解jQuery对象和DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//dom对象
var in1Value = document.getElementById('in1').value;
document.getElementById('in2').value = in1Value;
var pEle = document.getElementById('p1');
var pText = pEle.innerHTML;
document.getElementById('p2').innerHTML = pText;
//jquery对象
var val1 = $('#in1').val();
$('#in3').val(val1);
var p1 = $('#p1').html();
$('#p3').html(p1);
//js ---- > jquery
alert(pEle);
alert($(pEle));
//jquery ---> js
alert($('#in1')[0]);
})
</script>
</head>
<body>
<input type="text" value="123" id="in1"><br>
<input type="text" id="in2"><br>
<input type="text" id="in3"><br>
<p id="p1">jQuery对象和DOM对象!</p>
<p id="p2"></p>
<p id="p3"></p>
</body>
</html>
二、jQuery选择器
1. 概述
jQuery提供了丰富的选择器功能,jQuery选择器比JavaScript选择器更加的强大。
回顾:JavaScript是如何直接获取元素节点
- getElementById( ) :返回一个元素节点对象
- getElementsByName( ):返回多个元素节点(节点数组)
- getElementsByClassName( ) :返回多个元素节点对象(节点数组)
- getElementsByTagName( ) :返回多个元素节点对象(节点数组)
2. 基本选择器
- 标签选择器
$("a")
- ID选择器
$("#id")
$("p#id")
- 类选择器
$(".class")
$("h2.class")
- 通配选择器
$("*")
- 并集选择器
$("elem1, elem2, elem3")
- 后代选择器
$("ul li")
- 父子选择器
$("ul > li")
- 后面第一个兄弟元素节点
$("prev + next
")- 后面所有的兄弟元素节点
$("pre~ next")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//标签选择器
// $('h3').css('background-color', 'red');
//id选择器
// $('#p1').css('font-size', '30px');
//类选择器
// $('.p2').css('color', 'red');
//通配选择器
// $('*').css('background-color', 'blue');
//并集选择器
// $('span,h2').css('color', 'green');
//后代选择器
// $('#div1 p').css('color', 'red');
//子元素选择器
// $('#div1 > p').css('color', 'red');
//后面的第一个元素
// $('h2+p').css('color', 'red');
//后面的所有兄弟元素
$('h2~p').css('color', 'red');
})
</script>
</head>
<body>
<p id="p1">我是段落1.</p>
<p class="p2">我是段落2.</p>
<p class="p2">我是段落3.</p>
<div id="div1">
<span>我是div中span的内容!</span>
<h2>我是div中的h2标题内容1!</h2>
<p>我是div中的段落1.</p>
<p>我是div中的段落2.</p>
<div>
<p>我是div中的div中的段落.</p>
</div>
<h2>我是div中的h2标题内容2!</h2>
</div>
<h3>我是h3内容1</h3>
<h3>我是h3内容2</h3>
<h3>我是h3内容3</h3>
</body>
</html>
3. 属性选择器
[attribute] 匹配包含给定属性的元素
[attribute1][attribute2] 复合属性选择器,需要同时满足多个属性
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//[attribute] 匹配包含给定属性的元素
// var test1 = $('input[id]');
// alert(test1.length);
//[attribute1][attribute2] 复合属性选择器,需要同时满足多个属性
// var test2 = $('input[name][value]');
// alert(test2.length);
//[attribute=value] 匹配给定的属性是某个特定值的元素
// var test3 = $('input[type=password]');
// alert(test3.length);
//[attribute!=value] 匹配所有属性不等于特定值的元素
// var test4 = $('input[name!=hobby]');
// alert(test4.length);
//[attribute^=value] 匹配给定的属性是以某些值开始的元素
// var test5 = $('input[name^=u]');
// alert(test5.length);
//[attribute$=value] 匹配给定的属性是以某些值结尾的元素
// var test6 = $('input[name$=y]');
// alert(test6.length);
//[attribute*=value] 匹配给定的属性是以包含某些值的元素
var test7 = $('input[name*=s]');
alert(test7.length);
})
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="C++">C++
<input type="checkbox" name="hobby" value="PHP">PHP
</td>
</tr>
<tr>
<td>职业:</td>
<td>
<select name="professional" id="professional">
<option value="程序员">程序员</option>
<option id="p2" value="公务员">公务员</option>
<option value="律师">律师</option>
<option value="医生">医生</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
4. 位置选择器
针对整个页面而言的位置选择器
:first 获取第一个元素
:last 获取最后一个元素
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:even匹配所有索引值为偶数的元素,从 0 开始计数
:eq(n) 匹配一个给定索引值的元素,从0开始计数
:gt(n) 匹配所有大于给定索引值的元素
:lt(n) 匹配所有小于给定索引值的元素
针对上级标签而言的位置选择器
- :first-child 匹配第一个子元素
- :last-child 匹配最后一个子元素
- :nth-child(n) 匹配其父元素下的第N个子元素
- :nth-child(odd|even) 匹配其父元素下的奇偶元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//针对整个页面而言的位置选择器
//:first 获取第一个元素
// alert($('h4:first').text());
//:last 获取最后一个元素
// alert($('p:last').text());
//:odd 匹配所有索引值为奇数的元素,从 0 开始计数
// $('p:odd').css('color', 'red');
//:even匹配所有索引值为偶数的元素,从 0 开始计数
// $('p:even').css('color', 'red');
//:eq(n) 匹配一个给定索引值的元素
// alert($('p:eq(2)').text());
//:gt(n) 匹配所有大于给定索引值的元素
// $('p:gt(1)').css('color', 'red');
//:lt(n) 匹配所有小于给定索引值的元素
// $('p:lt(2)').css('color', 'red');
//针对上级标签而言的位置选择器
//:first-child 匹配第一个子元素
// $('div :first-child').css('color', 'red');
//:last-child匹配最后一个子元素
// $('div :last-child').css('color', 'red');
//:nth-child(n) :nth-child(odd|even) 匹配其父元素下的第N个子或奇偶元素
// $('div :nth-child(3)').css('color', 'red');
// $('div :nth-child(odd)').css('color', 'red');
})
</script>
</head>
<body>
<div>
<p>我是段落1.</p>
<p>我是段落2.</p>
<p>我是段落3.</p>
<p>我是段落4.</p>
<h4>标题1</h4>
<h4>标题2</h4>
<h4>标题3</h4>
<div>
<h3>我是h3标题</h3>
<p>我是段落!</p>
</div>
<div>
<p>唯一的儿子段落!</p>
</div>
</div>
</body>
</html>
5. 表单选择器
关于表单项的选择器
-
:text , :password ,:radio , :checkbox , :hidden ,:file ,:submit
-
:input 匹配所有 input, textarea, select 和 button 元素
注意:
$("input")
和$(":input")
的区别
$(“input”):标签选择器,只匹配input标签
$(“:input”): 匹配所有 input, textarea, select 和 button 等元素
关于表单项状态的选择器
- :selected , :checked ,:disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//:text 用来获取表单项中 type="text"的元素
// $(':text').css('background-color', 'red');
//:password 用来获取表单项中 type="password"的元素
// $('#form1>:password').css('background-color', 'red');
//:radio 用来获取表单项中单选按钮 :checked表示选中的意思
// alert($(':radio:checked').val());
//:checkbox 用来获取表单中的复选框
// alert($(':checkbox:checked').val());
//(元素):hidden
// alert($('input:hidden').val());
//:file 获取表单中 type="file"的元素
// alert($(':file:nth-child(21)').attr('class', 'abc'));
//:submit
// alert($(':submit').attr('value'));
//:input 匹配所有 input, textarea, select 和 button 元素
// alert($(':input').length);
//:selected 匹配select元素中选中的元素
// alert($(':selected').text());
//:checked
// alert($(':checked[name=sex]').val());
//:disabled
// alert($(':disabled').val());
})
</script>
</head>
<body>
<form action="" id="form1">
<input type="hidden" name="id" value="123">
<br>
账号: <input type="text" name="username">
<br>
密码: <input type="password" name="password">
<br>
生日: <input type="text" name="birthday"><br>
工资: <input type="text" name="salary"><br>
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked="checked">女 <br>
爱好:<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" checked="checked" value="排球">排球
<input type="checkbox" name="hobby" value="网球">网球 <br>
头像:<input type="file" name="photo"><br>
<input type="file" name="photo" class="aaa"><br>
<input type="file" name="photo"><br>
职业:<select name="" id="">
<option value="程序员">程序员</option>
<option value="公务员" selected="selected">公务员</option>
<option value="律师">律师</option>
</select>
<input type="submit" value="注册" disabled="disabled">
</form>
</body>
</html>
三、jQuery事件机制
事件驱动: 监听对应的事件, 触发了对应的事件, 事件会被监听到, 监听到事件后驱动函数的执行.
将由传统的HTML元素上完成事件的绑定改为由js/jQuery代码来完成对HTML元素的事件的添加操作。将事件和HTML元素之间进行解耦合。
1. 使用
之前我们学习js时的所有事件在jQuery中也都有。jQuery给元素绑定事件的格式是:
$(function(){
$('选择器').事件(function(){
});
})
注意:
使用jQuery给元素绑定事件时,要写在页面加载完事件内。
这里的事件可以是 click、blur、focus等等。不要写on,因为在js中我们写的是onClick。
4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function(){
//给元素绑定点击事件
$('button').click(function(){
alert('点击事件被触发!');
});
//给元素绑定失焦事件
$('input').blur(function(){
alert('失焦事件被触发!');
});
})
</script>
</head>
<body>
<button>按钮</button>
<br>
<input type="text">
</body>
</html>
四、jQuery动画
1. 介绍
在界面动画特效上,jQuery给我们提供了比JavaScript更加丰富的方法,jQuery提供的动画中大致上有显示、隐藏、滑动、淡入、淡出等,而且还给我们提供了自定义动画效果的方法,那么接下来咱们就认识一下这些方法。
2. 显示和隐藏动画
实现显示动画效果方法:show()
实现隐藏动画效果方法:hide()
实现切换显示和隐藏动画效果方法:toggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
//隐藏元素,参数表示时间,单位是毫秒
$('div').hide(3000);
});
$('#btn2').click(function(){
//显示元素
$('div').show(3000);
});
$('#btn3').click(function(){
//隐藏与显示的开关
$('div').toggle(2000);
});
})
</script>
</head>
<body>
<div style="width: 100px;height: 100px;background: #bfa">
</div>
<button id="btn1">隐藏</button>
<br>
<button id="btn2">显示</button>
<br>
<button id="btn3">隐藏/显示</button>
<br>
</body>
</html>
3. 滑动动画
实现向下滑动动画效果方法:slideDown()
实现向上滑动动画效果方法:slideUp()
实现滑动切换效果方法:slideToggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('div').slideDown(2000);
});
$('#btn2').click(function(){
$('div').slideUp(2000);
});
$('#btn3').click(function(){
$('div').slideToggle(2000);
});
})
</script>
</head>
<body>
<div style="background: #bfa;width: 100px;height: 100px">
</div>
<button id="btn1">向下滑动</button>
<br>
<button id="btn2">向上滑动</button>
<br>
<button id="btn3">向上/向下滑动</button>
<br>
</body>
</html>
4. 淡入淡出动画
实现淡入动画效果方法:fadeIn()
实现淡出动画效果方法:fadeOut()
实现淡入淡出切换效果方法:fadeToggle()
实现淡入到指定透明度效果方法:fadeTo()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('div').fadeIn(2000);
});
$('#btn2').click(function(){
$('div').fadeOut(2000);
});
$('#btn3').click(function(){
$('div').fadeToggle(2000);
});
$('#btn4').click(function(){
$('div').fadeTo(3000,0.3);
});
})
</script>
</head>
<body>
<div style="width: 100px;height: 100px;background: #bfa">
</div>
<button id="btn1">淡入</button>
<br>
<button id="btn2">淡出</button>
<br>
<button id="btn3">淡入/淡出</button>
<br>
<button id="btn4">淡入到指定透明度</button>
</body>
</html>
5. 自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("#go").click(function(){
$("#block").animate({
width: "500px",
height: "500px",
fontSize: "10em"
}, 1000);
});
})
</script>
</head>
<body>
<button id="go">Run</button>
<div id="block">Hello!</div>
</body>
</html>
$(‘#btn4’).click(function(){
$(‘div’).fadeTo(3000,0.3);
});
})
</div>
<button id="btn1">淡入</button>
<br>
<button id="btn2">淡出</button>
<br>
<button id="btn3">淡入/淡出</button>
<br>
<button id="btn4">淡入到指定透明度</button>
5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("#go").click(function(){
$("#block").animate({
width: "500px",
height: "500px",
fontSize: "10em"
}, 1000);
});
})
</script>
</head>
<body>
<button id="go">Run</button>
<div id="block">Hello!</div>
</body>
</html>