jQuery
- Ⅰ jquery的加载
- Ⅱ jquery选择器
- Ⅲ jquery样式操作
- Ⅳ jquery特殊效果
- Ⅴ jquery链式调用
- Ⅵ jquery动画
- Ⅶ 尺寸相关、滚动事件
- Ⅷ jquery属性操作
- Ⅸ jquery循环
- Ⅹ jquery事件
- 十一 事件冒泡
- 十二 事件委托
- 十三 jquery元素节点操作
- 十四 滚轮事件与函数节流
- 十五 json
- 十六 ajax与jsonp
- 十七 本地存储
- 十八 正则表达式
- 十九 前端性能优化
Ⅰ jquery的加载
使用jquery需要先引入jquery库:
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
写js代码需要,另开一个script,不可以在引入标签里面写。
将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready
方法解决这个问题,它的速度比原生的 window.onload
更快。
1)ready的完整写法:
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
2)可以简写为:
<script type="text/javascript">
$(function(){
......
}); #此处的分号最好加上,避免压缩时出错。
</script>
ready要比window.onload更快的原因:
window.onload需等标签加载完并渲染完(页面数据全部传完)之后才运行。ready是等标签加载完之后就运行。
Ⅱ jquery选择器
jquery用法思想:选择某个网页元素,然后对它进行某种操作。
jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length
属性判断是否选择成功。
(1) 选择器常用写法
-
$('#myId')
//选择id为myId的网页元素 -
$('.myClass')
// 选择class为myClass的元素 -
$('li')
//选择所有的li元素 -
$('#ul1 li span')
//选择id为为ul1元素下的所有li下的span元素 -
$('input[name=first]')
// 选择name属性等于first的input元素
jquery的样式属性,容错率高(带‘_’
的属性既可以写成驼峰式,也可以保持原来的‘_’
):
var $li = $('.list li');
$li.css({'background-color':'pink'});
等价于:
$li.css({'backgroundColor':'pink'});
(1) 对选择集进行过滤
对于只用一次的变量,不需用var来定义。
-
$('div').has('p');
// 选择包含p元素的div元素 -
$('div').not('.myClass');
//选择class不等于myClass的div元素 -
$('div').filter('.myClass');
//选择class等于myClass的div元素 -
$('div').eq(5);
//选择第6个div元素 (常用)
(2)选择集转移
-
$('div').prev()
; //选择div元素前面紧挨的同辈元素 -
$('div').prevAll()
; //选择div元素之前所有的同辈元素 -
$('div').next()
; //选择div元素后面紧挨的同辈元素 -
$('div').nextAll()
; //选择div元素后面所有的同辈元素 -
$('div').parent()
; //选择div的父元素 -
$('div').children()
; //选择div的所有子元素 -
$('div').siblings()
; //选择div的同级元素 -
$('div').find('.myClass');
//选择div内的class等于myClass的元素
(3)判断是否选择到了元素
jquery有容错机制,即使没有找到元素,也不会出错,可以用length
属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length);
弹出 1
alert($div2.length);
弹出 0
......
<div id="div1">这是一个div</div>
Ⅲ jquery样式操作
jquery用法思想: 同一个函数完成取值和赋值。
(1)操作行间样式
获取div的样式,而原生js无法读取行间没有定义的css属性值。
$("div").css("width"); #读取宽度值
$("div").css("color");
//设置div的样式
$("div").css("width","30px"); #单个属性时
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"}); #多个属性时
注意:
选择器获取的多个元素,获取的元素是第一个,比如:$("div").css("width")
,获取的是第一个div的width。
(2)操作样式类名
-
$("#div1").addClass("divClass2")
//为id为div1的对象追加样式divClass2 -
$("#div1").removeClass("divClass")
//移除id为div1的对象的class名为divClass的样式 -
$("#div1").removeClass("divClass divClass2")
//移除多个样式 -
$("#div1").toggleClass("anotherClass")
//重复切换anotherClass样式,如果有anotherClass类,就去掉,没有就加上。
(3)绑定click事件
给元素绑定click事件,可以用如下方法:click里面内嵌了一个匿名函数。
$('#btn1').click(function(){
内部的this指的是原生对象
使用jquery对象用 $(this)
})
(4)获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()
方法获取
var $li = $('.list li').eq(1);
alert($li.index());
弹出 1
alert($li.filter(‘.mylist’)index());
......
<ul class="list">
<li>1</li>
<li>2</li>
<li class=”mylist” >4</li>
<li>5</li>
<li>6</li>
</ul>
Ⅳ jquery特殊效果
-
fadeIn()
淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
}); #动画结束之后调用匿名函数
});
-
fadeOut()
淡出 -
fadeToggle()
切换淡入淡出 #点一下淡入,点一下淡出 -
hide()
隐藏元素 -
show()
显示元素 -
toggle()
切换元素的可见状态 -
slideDown()
向下展开 -
slideUp()
向上卷起 -
slideToggle()
依次展开或卷起某个元素
Ⅴ jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象,因此jquery对象的方法可以连起来写成一句:
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素 #返回ul对象进行接下来的链式操作
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
Ⅵ jquery动画
通过animate
方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});
参数可以写成数字表达式:
$('#div1').animate({
width:'+=100',
height:300
},1000,'swing',function(){
alert('done!');
});
stop()
将前面的动画先关掉,然后再做动画。
$('#btn2').click(function(){
$('.box2').stop.animate({'width':'+=100'});
})
jQuery UI 是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
Ⅶ 尺寸相关、滚动事件
(1)获取或者设置元素的尺寸
width()、height()
获取元素width和height
innerWidth()、innerHeight()
包括padding的宽和高
一个盒子的真实尺寸:outerWidth()、outerHeight()
包括padding和border的宽和高 .
一个盒子的真实尺寸(再加上margin):outerWidth(true)、outerHeight(true)
包括padding和border以及margin的宽和高。
(2)获取元素相对页面的绝对位置
offset()
(3)获取浏览器可视区宽度高度
$(window).width();
$(window).height();
(4)获取页面文档的宽度高度
$(document).width();
$(document).height();
(5)获取页面滚动距离
$(document).scrollTop(); #上下滚动
$(document).scrollLeft(); #左侧距右侧的距离
(6)页面滚动事件
$(window).scroll(function(){
......
})
技巧: 滚动到顶部
固定的写法:html,body为了兼容浏览器。
$totop.click(function(){
$('html,body').animate({'scrollTop':0});
})
Ⅷ jquery属性操作
(1)html()
取出或设置html内容
#取出html内容
var $htm = $('#div1').html();
#设置html内容
$('#div1').html('<span>添加文字</span>');
(2)prop()
取出或设置某个属性的值
#取出图片的地址(获取的是绝对地址)
var $src = $('#img1').prop('src');
#设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });
Ⅸ jquery循环
对jquery选择的对象集合分别进行操作,需要用到jquery循环,此时可以用对象上的each方法:
$(function(){
$('.list li').each(function(i){
$(this).html(i); #i是此处的索引值
})
})
......
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Ⅹ jquery事件
(1)事件函数列表:
-
blur()
元素失去焦点,焦点即光标 #应用在输入框中 -
focus()
元素获得焦点 -
click()
鼠标单击 -
mouseover()
鼠标进入(进入子元素也触发) #容易引发事件冒泡 -
mouseout()
鼠标离开(离开子元素也触发) -
mouseenter()
鼠标进入(进入子元素不触发) -
mouseleave()
鼠标离开(离开子元素不触发) -
hover()
同时为mouseenter和mouseleave事件指定处理函数 -
ready()
DOM加载完成 -
resize()
浏览器窗口的大小发生改变 -
scroll()
滚动条的位置发生变化 -
submit()
用户递交表单
(2)bind
绑定多个事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html()); #可以同时绑定多个事件
});
});
(3)unbind
取消绑定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
# $(this).unbind();
$(this).unbind('mouseover');
});
});
十一 事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果这个对象没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
(1)事件冒泡的作用
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
(2)阻止事件冒泡
事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation()
来阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation(); #阻止事件冒泡
});
$(document).click(function(event) {
alert('grandfather');
#$(document)代表顶级标签,即整个Html页面的标签
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
#点击事件向父级传递按照标签的顺序
</div>
</div>
(3)阻止默认行为
阻止表单提交
$('#form1').submit(function(event){
event.preventDefault();
})
(4)合并阻止操作
实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用return false
.
#event.stopPropagation();
#event.preventDefault();
#合并写法:
return false; 1阻止事件冒泡 2阻止默认行为 3结束函数
十二 事件委托
事件委托就是利用冒泡的原理,把事件处理加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
(1)一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function() { #相当于绑定了5次li
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
(2) delegate
事件委托的写法
$(function(){
$list = $('#list');
#代理的 标签、事件
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
十三 jquery元素节点操作
(1)创建节点
var $div = $('<div>'); #新建一个空的div元素
var $div2 = $('<div>这是一个div元素</div>');
通过html()添加节点性能最高,但会比较麻烦。
$('#div1').html($('#div1')).html()+'<a href="#">链接</a>')
(2) 插入节点
1). append()或appendTo()
:在现存元素的内部后面插入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
$span.appendTo(‘#div1’);
......
<div id="div1"></div>
2). prepend()或prependTo()
:在该元素的内部前面插入元素
3).after()或insertAfter()
:从该元素的外部后面插入元素
4).before()或insertBefore()
:在该元素的外部前面插入元素
(3) 删除节点
$('#div1').remove();
技巧:
-
<a href=“javascript:;”></a>
#回到当前页面顶部。 -
<a href=“javascript:alert(‘helloworld’);”></a>
连接javascript语句 -
var $val=$input.val();
#val()获取text输入框的内容
十四 滚轮事件与函数节流
(1)jquery.mousewheel
插件使用
jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js
。
(2)函数节流
javascript中有些事件的触发频率非常高,比如onresize事件,onmousemove事件以及上面说的鼠标滚轮事件,在短时间内多次触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。
高频触发事件:
$(window).mousewheel(function(event,dat){
#dat指出滚轮触发次数及方向,-1表示向上,1表示向下
console.log(dat)
})
十五 json
json (JavaScript Object Notation) ,javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。
(1) javascript自定义对象:
var oMan = {
name:'tom',
age:16,
talk:function(s){
alert('我会说'+s);
}
}
(2) json格式的数据:
{
"name":"tom",
"age":18
}
与json对象不同的是,json数据格式的属性名称和字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。
(3) json的另外一个数据格式是数组,和javascript中的数组相同。
["tom",18,"programmer"]
json数据里面可以嵌套json数组
{"name":"tom","age":18,”info”:["tom",18,"programmer"]}
十六 ajax与jsonp
ajax技术的目的是让javascript发送http请求(实现局部刷新或无刷新的效果),与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
程序中的同步:做完一件事后再做另外一件事;
程序中的异步:同时做几件事情
(1)局部刷新和无刷新
ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。
(2)同源策略
ajax请求的页面或资源只能是同一个域(网页连接地址)下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑。特征报错提示:
XMLHttpRequest cannot load https://www.baidu.com/. No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
(3)$.ajax使用方法
1)常用参数:
-
url
请求地址 -
type
请求方式,默认是’GET’,常用的还有’POST’ -
dataType
设置返回的数据格式,常用的是’json’格式,也可以设置为’html’ -
data
设置发送给服务器的数据 -
success
设置请求成功后的回调函数 -
error
设置请求失败后的回调函数 -
async
设置是否异步,默认值是’true’,表示异步
2)以前的写法:
$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
alert(data.name);
},
error:function(){
alert('服务器超时,请重试!');
}
});
3)新的写法(推荐):
# data.json里面的数据: {"name":"tom","age":18}
$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1} #最后一个不用逗号
})
.done(function(data) {
alert(data.name);
})
.fail(function() {
alert('服务器超时,请重试!');
});
(4)jsonp
ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了<script>
标签(script标签可以引用任何网站上的js资源),<script>
标签有可以跨域链接资源的特性。jsonp和ajax原理完全不一样,不过jquery将它们封装成同一个函数。
1)用<script>
标签跨域连接资源:
# data.js里面的数据: fnBack({"name":"tom","age":18});
<script type="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
$.ajax({
url:'js/data.js',
type:'get',
dataType:'jsonp',
jsonpCallback:'fnBack' #要和data.js里面的数据名称相对应
})
.done(function(data){
alert(data.name);
})
.fail(function() {
alert('服务器超时,请重试!');
});
十七 本地存储
本地存储分为cookie,以及localStorage
和sessionStorage
(1)cookie 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。
# jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
# jquery 获取cookie
$.cookie('mycookie');
(2)localStorage
存储在本地,容量为5M或者更大,不会在请求时携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据。
# 设置:
localStorage.setItem("dat", "456");
localStorage.dat = '456';
# 获取:
localStorage.getItem("dat");
localStorage.dat
# 删除
localStorage.removeItem("dat");
(3) sessionStorage
存储在本地,容量为5M或者更大,不会在请求时携带传递,在同源的当前窗口关闭前有效,窗口关闭后会自动删掉。
sessionStorage.setItem("dat", "456");
sessionStorage.getItem("dat");
localStorage 和 sessionStorage 合称为Web Storage
, Web Storage支持事件通知机制,可以将数据更新通知监听者,Web Storage的api接口使用更方便。(iPhone的无痕浏览不支持Web Storage,只能用cookie)
十八 正则表达式
(1)正则表达式的写法:
var re=new RegExp('规则', '可选参数');
# var re=/规则/参数;
(2)规则中的字符
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
(3)量词
-
?
出现零次或一次(最多出现一次) -
+
出现一次或多次(至少出现一次) -
*
出现零次或多次(任意次) -
{n}
出现n次 -
{n,m}
出现n到m次 -
{n,}
至少出现n次
(4)任意一个或者范围[abc123]
: 匹配‘abc123’中的任意一个字符[a-z0-9]
: 匹配a到z或者0到9中的任意一个字符
(5)限制开头结尾^
以紧挨的元素开头$
以紧挨的元素结尾
(6)修饰参数:g
: global,全文搜索,默认搜索到第一个结果就停止i
: ingore case,忽略大小写,默认大小写敏感
(7)常用函数
1)test
用法:正则.test(字符串)
匹配成功,就返回true,否则就返回false
2). replace
用法:字符串.replace(正则,新的字符串)
匹配成功的字符去替换新的字符
(8) 正则默认规则
匹配成功就结束,否则继续匹配,区分大小写
var sTr01 = 'abcdefedcbaCef';
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;
var sTr02 = sTr01.replace(re01,'*');
var sTr03 = sTr01.replace(re02,'*');
var sTr04 = sTr01.replace(re03,'*');
alert(sTr02); 弹出 ab*defedcbaCef
alert(sTr03); 弹出 ab*defed*baCef
alert(sTr04); 弹出 ab*defed*ba*ef
(9)常用正则规则
# 用户名验证:(数字字母或下划线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[3458]\d{9}$/;
十九 前端性能优化
从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要。
前端性能优化分为如下几个方面:
(1)代码部署:
- 代码的压缩与合并
- 图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息。
- 使用内容分发网络 CDN
- 为文件设置Last-Modified、Expires和Etag
- 使用GZIP压缩传送
- 权衡DNS查找次数(使用不同域名会增加DNS查找)
- 避免不必要的重定向(加"/")
(2)编码
1)html:
- 使用结构清晰,简单,语义化标签
- 避免空的src和href
- 不要在HTML中缩放图片
2)css:
- 精简css选择器
- 把CSS放到顶部
- 避免@import方式引入样式
- css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站
- 使用css动画来取代javascript动画
- 使用字体图标
- 使用css sprite(雪碧图)
- 使用svg图形
- 避免使用CSS表达式
body{
background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}
- 避免使用css滤镜
3)javascript:
- 减少引用库的个数
- 使用requirejs或seajs异步加载js
- JS放到页面底部引入
- 避免全局查找
- 使用原生方法
- 用switch语句代替复杂的if else语句
- 减少语句数,比如说多个变量声明可以写成一句
- 使用字面量表达式来初始化数组或者对象
- 使用innerHTML取代复杂的元素注入
- 使用事件代理(事件委托)
- 避免多次访问dom选择集
- 高频触发事件设置使用函数节流
- 使用Web Storage缓存数据