一、jQuery概述
1. 什么是 jQuery
jQuery是一个js框架。封装了很多实用的方法,基本解决了浏览器的兼容问题。
框架类似于现实生活中的毛坯房。比如说做一个项目好比盖一座房子。
2. jQuery 特点
write less, do more. 写的更少,做的更多。
1.语法简练、语义易懂、学习快速、文档丰富。
2.jQuery 是一个轻量级的脚本,其代码非常小巧。
3.jQuery 支持 CSS1~CSS3 定义的属性和选择器
4.jQuery 是兼容浏览器的,它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
5.能将 JavaScript (行为)脚本与 HTML (结构)源代码完全分离,便于后期编辑和维护。
6.插件丰富,除了 jQuery自身带有的一些特效外,可以通过插件实现更多功能
3. 网站
官方地址为:http://jquery.com/
下载地址:http://www.jq22.com/jquery-info122 该网站内有很多插件的链接
最新版在线手册手册:http://jquery.cuishifeng.cn/
中文社区:http://jquery.org.cn/
4. 其他类型的框架
-
Prototype:与面向对象的原型继承关键字prototype一致,该框架的特点是功能扩展比较容易。
-
YUI:该框架可以实现各种页面布局效果。
-
Extjs : 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
-
该框架可以实现效果之一:页面不同区域进行拖拽效果。由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
-
Mootools框架,一款短小精悍的框架,完全采用面向对象的思想进行封装,采用很多流行的技术,核心代码只有8kb,是一款非常好用的JS框架。
-
jQuery:使用前期,jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。jQuery官方也提供了很多比较有效或有针对性的插件比如有jQueryUI、jQuery Mobile插件等。
二、jQuery 快速入门
1. 引入jquery文件:
下载:
- 浏览器打开jquery官网进行下载。http://jquery.com/
- 使用 jq22 库文件下载jquery。
引入jquery文件
-
引入cdn 。https://www.bootcdn.cn/jquery/
-
引入已经下载好的jquery文件
2. 使用jquery,jquery基本语法
页面加载完毕,设置页面中的li标签的样式,要求字体颜色为red,背景颜色为#ccffcc。
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
//使用js操作DOM
window.onload = function(){
var lis = document.getElementsByTagName('li');
for(var i in lis){
lis[i].style.color = 'red';
lis[i].style.backgroundColor = '#ccffcc';
}
}
//使用jquery操作DOM
$(document).ready(function(){
//jQuery可以进行链式操作,对同一元素的设置可以写一行代码,如下:
$('li').css('color','red').css('background-color','#ccffcc');
})
/**
*说明:
*$()是jQuery的一个函数,参数可以是一个dom对象,可以是选择器,也可以是标签。返回jQuery对象
*$(document)返回一个jQuery对象,表示整个文档
*ready()是jQuery封装好的一个事件,表示页面加载完毕会触发的一个事件,它是参数是一个函数,表示事件处理函数
*css()是jQuery封装的一个方法,填一个参数,表示获取元素的css;填两个参数表示设置元素的css,注意:样式名称和css样式名称完全一致,不用去掉下划线和字母变大写
*/
//简洁写法
$(function(){
$('li').css('color','red').css('background-color','#ccffcc');
})
3. 常用的 jQuery 事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click(点击事件) | keypress(键盘按下事件) | submit(发送表单事件) | load(加载事件) |
dblclick(双重点击事件) | keydown(键盘按下事件) | change(发生改变事件) | resize(窗口大小事件) |
mouseenter(鼠标移入事件) | keyup(键盘弹起事件) | focus(聚焦事件) | scroll(窗口滚动事件) |
mouseleave(鼠标移出事件) | blur(失焦事件) | unload(离开页面事件)(废除) | |
mouseover(鼠标移入事件) | ready(加载完成事件) | ||
hover(鼠标移入移出事件) |
注意: keypress,keydown,keyup的区别:
-
keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外), 它返回的是键盘代码。
-
keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
-
keyup:用户松开某一个按键时触发, 与keydown相对, 返回键盘代码。
注意: mouseover与mouseenter的区别:
mouseover 与mouseenter不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。但是只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
4. 获取事件对象
方法与JavaScript相同;
//比如说获取表单键盘事件对象
input.keyup(function(evt){
//在jQuery中使用which来代替keyCode
var keyCode = evt.which;
//...
})
三、修改可编辑表格案例
可编辑表格的JavaScript案例:
https://blog.csdn.net/Errrl/article/details/103935925
使用jQuery修改编辑表格案例:
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>唐僧</td>
</tr>
<tr>
<td>2</td>
<td>悟空</td>
</tr>
<tr>
<td>3</td>
<td>八戒</td>
</tr>
<tr>
<td>4</td>
<td>沙僧</td>
</tr>
<tr>
<td>5</td>
<td>白龙马</td>
</tr>
<tr>
<td>6</td>
<td>金箍棒</td>
</tr>
</tbody>
</table>
<style>
*{
margin:0;
padding:0;
border:0 none;
}
table,th,td{
border:solid 1px #1b272e;
border-collapse: collapse; /*合并边框*/
}
table{
width:400px;
margin:10px auto; /*左右居中对齐*/
}
th,td{
width:50%;
padding:3px;
}
</style>
$(function(){
/* 获取姓名td,绑定点击事件 */
//1. 选择每一个tr下的最后一个td
// $('tr td:last-child')
//2.选择奇数td,下标从0开始
// $('td:odd')
//3.选择tr中的第二个td,下标从1开始
// $('td:nth-child(2/2n)')
$('td:odd').click(function(){
//保存td
var td = $(this);
//判断td中是否存在input,存在就不进行重建
if(td.children().length>=1){
return false;
}
//操作input
//保存td中的文本信息
var text = td.text();
//清空td,创建input
td.html('');
var input = $('<input/>');//注意 :一定要是闭合标签
//设置input,链式操作
input
.val(text)
.css('width',td.css('width'))
.css('height',td.css('height'))
.css('font-size',td.css('font-size'))
.css('outline','0')
.appendTo(td)
.focus();//链子结束可加;
//绑定键盘事件
input.keyup(function(evt){
var keyCode = evt.which;//在jQuery中使用which来代替keyCode
if(keyCode == 13){
td.text($(this).val());
}
if(keyCode == 27){
td.text(text);
}
});
});
});
效果:
案例总结
1.选择器
选择器一定要写到$()函数中,写法基本上和css选择器一样。
除了常规的标签选择器(Element)、类选择器(class)、ID选择器(id)、子代选择器外。增设表单选择器、以及一些基本的筛选器。
表单选择器
筛选器
2.事件绑定
$('选择器').事件方法(function(evt){
//这就是jQuery中事件的绑定方式
});
3.html代码/文本/值/css
css():一个参数,表示获取元素的css;两个参数表示设置元素的css。语法:css(name|pro|[,val|fn\])
html():0个参数,表示获取元素的html内容;1个参数表示设置元素的html内容。语法:$('选择器').html()
text():0个参数,表示获取元素的文本内容;1个参数表示设置元素的文本内容。语法:$('选择器').text()
val():0个参数,表示获取元素的value值;1个参数表示设置元素的value值,专门用于表单项。语法:$('选择器').val()
4.which属性
针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。
event.which 将 event.keyCode 和 event.charCode 标准化了。
详情: eve.which
四、纵向导航菜单
点击页面中的顶级菜单,会下拉它的子菜单。
首先要找到顶级菜单,然后绑定单击事件,点击顶级菜单的时候,让其对应的子菜单慢慢滑动下来;再次点击顶级菜单,其对应的子菜单慢慢滑动隐藏。
<ul>
<li>
<a href="#">顶级菜单一</a>
<ul>
<li>子菜单11</li>
<li>子菜单12</li>
<li>子菜单13</li>
</ul>
</li>
<li>
<a href="#">顶级菜单二</a>
<ul>
<li>子菜单21</li>
<li>子菜单22</li>
<li>子菜单23</li>
</ul>
</li>
<li>
<a href="#">顶级菜单三</a>
<ul>
<li>子菜单31</li>
<li>子菜单32</li>
<li>子菜单33</li>
</ul>
</li>
</ul>
*{
margin:0;
padding:0;
border:0 none;
}
ul,li{
list-style: none;
}
/*顶级菜单*/
a{
display: block;
width:120px;
height:30px;
line-height: 30px;
text-decoration: none;
background-color: rgb(23, 199, 90);
color:white;
}
/*子菜单*/
ul ul>li{
width:120px;
height:30px;
line-height: 30px;
background-color: rgb(35, 218, 218)
color: rgb(255, 0, 157);
}
/*默认子菜单隐藏*/
ul ul{
display: none;
}
版本一:
/* 使用动态效果show&&hide */
$(function(){
$('a').click(function(){
//同一级别的 ul 添加动态效果
//获取 ul
//$(this).next()
if($(this).next().css('display')=='none'){
$(this).next().show(1000);
}else{
$(this).next().hide(800);
}
}
})
版本二:
/* 使用动态效果slideDown&&slideUp */
$(function(){
$('a').click(function(){
if($(this).next().css('display')=='none'){
$(this).next().slideDown(1000);
}else{
$(this).next().slideUp(800);
}
}
})
版本三:
/* 使用动态效果toggle */
$(function(){
$('a').click(function(){
$(this).next().toggle(1000);
}
})
版本四:
/* 使用动态效果slideToggle */
$(function(){
//获取所有一级菜单,绑定事件
$('a').click(function(){
$(this).next().slideToggle(1000);
})
})
效果:
案例总结
1.筛选器
功能:过滤
- eq(index|-index)
- first()
- last()
- hasClass(class)
- filter(expr|obj|ele|fn)
- is(expr|obj|ele|fn)
- map(callback)
- has(expr|ele)
- not(expr|ele|fn)
- slice(start,end)
功能:查找
- children(expr)le
- find(expr|obj|ele)
- next(expr)
- nextAll(expr)
- nextUntil([expr|ele][,fn])
- offsetParent()
- parent(expr)
- parents(expr)
- parentsUntil([expr|ele][,fn])
- prev(expr)
- prevAll(expr)
- prevUntil([expr|ele][,fn])
- siblings(expr)
说明:
- expr:express(表达式)
- ele:element(元素DOM对象)
- fn:function(功能函数)
- callback:function(回调函数)
- index:index(元素下标)
2.动态效果
基本
- [show([s],e],[fn])
- [hide([s],e],[fn])
- [toggle(s],[e],[fn])
滑动
- [slideDown(s],[e],[fn])
- [slideUp([s],e],[fn])
- [slideToggle(s],[e],[fn])
淡入淡出
- [fadeIn(s],[e],[fn])
- [fadeOut(s],[e],[fn])
- [fadeTo([s],[o],[e],[fn])
- [fadeToggle([s],e],[fn])
自定义动画
- [animate([p],s],[e],[fn])
说明:
- s:speed(速度)三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) 。
- e:easing( 切换效果 ) 用来指定切换效果,默认是"swing",可用参数"linear" 。
- fn:function(功能函数) 在动画完成时执行的函数,每个元素执行一次。
- o:opacity(透明度)用来指定透明度。
五、横向导航菜单
鼠标放到顶级菜单上,其子菜单滑动显示,鼠标移动到子菜单上,子菜单不能消失;
鼠标离开顶级菜的和子菜单之后,子菜单滑动隐藏;
鼠标必须放到顶级菜单上超过300毫秒,才显示子菜单;
复制上述的 HTML 代码,修改css
*{
margin:0;
padding:0;
border:0 none;
}
ul,li{
list-style: none;
}
/*顶级菜单*/
a{
display: block;
width:120px;
height:30px;
line-height: 30px;
text-decoration: none;
background-color: rgb(23, 199, 90);
color:white;
}
/*子菜单*/
ul ul>li{
width:120px;
height:30px;
line-height: 30px;
background-color: rgb(35, 218, 218)
color: rgb(255, 0, 157);
}
/*默认子菜单隐藏*/
ul ul{
display: none;
}
/* 菜单横向显示 */
body>ul>li{
float:left;
}
版本一:
/* 使用mouseover&&mouseout */
$(function(){
//由于是鼠标移入移出事件,不能单单绑定在a上,如果只绑定在a上会发生子菜单单无法选中的情况。
//所以绑定整个li。
$('body>ul>li').mouseover(function(){
$(this).children('ul').slideDown;
})
$('body>ul>li').mouseout(function(){
$(this).children('ul').slideUp;
})
})
//注意:此种效果会发现存在bug,原因就是mouseover的特性,上述有说明。
版本二:
/* 使用mouseenter&&mouseleave */
$(function(){
$('body>ul>li').mouseenter(function(){
$(this).children('ul').slideDown;
})
$('body>ul>li').mouseleave(function(){
$(this).children('ul').slideUp;
})
})
//注意:此种效果虽然解决了mouseover的特性特性问题,但是鼠标滑动过三个一级菜单时,都会显示二级菜单,造成二级菜单显示过快问题
版本三:
/* 使用hover&&定时器setTimeout */
$(function(){
var timer = null;//定义一个定时器
$('body>ul>li').hover(fumction(){
var li = $(this);
//鼠标移入满足500ms,其子元素中的ul显示
timer = setTimeout(function(){
li.children('ul').slideDown(500);
}, 300);
},function(){
//鼠标离开,其子元素中的ul消失
clearTimeout(timer);
$(this).children('ul').slideUp(500);
})
})
BUG 问题的存在与解释
1. BUG1:mouseover && mouseenter
做一个触发次数累加小实验:
<div id="over" style="background-color: aqua; border: solid 1px red;">
<h1 style="background-color: chocolate;">over</h1>
<span>0</span>
</div>
<hr>
<div id="enter" style="background-color: #ccc; border: solid 1px green;">
<h1 style="background-color: aquamarine">enter</h1>
<span>0</span>
</div>
$(document).ready(function(){
$('#over').mouseover(function(){
var old = $(this).children('span').text();
$(this).children('span').text(parseInt(old) + 1);
});
$('#enter').mouseenter(function(){
var old = $(this).children('span').text();
$(this).children('span').text(parseInt(old) + 1);
});
});
效果:
实验说明:
mouseover 与mouseenter不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。但是只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
2. BUG2:鼠标快速的划来划去,下拉菜单不断显示隐藏
目前的效果,鼠标快速的划来划去,下拉菜单不断显示隐藏。
解决办法是加入定时器,如果真的要显示下拉菜单,需要鼠标悬停300,如果真悬停了300毫秒则显示下拉菜单,如果300毫秒以内,鼠标离开,那么清除定时器,不让显示的代码执行了。
六、标签页效果
点击标签之后,让其对应的内容区显示,同时标签会有一个效果的变化;反之,另外的标签显示默认样式,另外的内容区要隐藏。
<ul>
<li class="tab">军事</li>
<li>娱乐</li>
<li>体育</li>
</ul>
<div class="show">这是军事版块</div>
<div>这是娱乐版块</div>
<div>这是体育版块</div>
*{
margin:0;
padding:0;
border:0 none;
}
ul,li{
list-style: none;
}
li{
float:left;
width:50px;
height:30px;
background-color: #999;
color:#fff;
line-height: 30px;
border:solid 1px #fff;
}
div{
clear: both; /*清除浮动造成的影响*/
width:200px;
height:120px;
background-color: #051c29;
color:#fff;
display: none;/*隐藏所有的div*/
}
/*下面单独设置第一个div和第一个li的样式*/
div.show{
display: block;
}
li.tab{
background-color: #051c29;
border: solid 1px #051c29;
}
/* 对应的li对应的div */
/* 遍历li */
$(function(){
$('li').each(function(i,val){
$(val).click(function(){
$('li').eq(i).addClass('tab').siblings().removeClass('tab');
$('div').eq(i).addClass('show').siblings().removeClass('show');
})
})
})
效果:
案例总结
1.jQuery属性操作
属性
CSS 类
2.数组遍历
写法一:
$('选择器').each(function(i, val){
//i 表示元素的下标
//val 每次遍历时的元素
//其他操作...
});
写法二:
$.each($('选择器'), function (i, val) {
//i 表示元素的下标
//val 每次遍历时的元素
//其他操作...
})
jquery.cuishifeng.cn/attr.html)
CSS 类
2.数组遍历
写法一:
$('选择器').each(function(i, val){
//i 表示元素的下标
//val 每次遍历时的元素
//其他操作...
});
写法二:
$.each($('选择器'), function (i, val) {
//i 表示元素的下标
//val 每次遍历时的元素
//其他操作...
})