jq的作用
- HTML元素选取
- HTML元素操作
- HTML事件函数
- HTML DOM遍历和修改
- Utilities
- css操作
- js特效和动画
- ajax
jq引入
- 在head中使用script引入本地jq的js文件
- 引入官网jq文件
jq的书写格式
三种
// 第一种:推荐
$(document).ready(function(){
//代码
})
// 第二种
$().ready(function(){
//代码
})
// 第三种
$(function(){
//代码
})
jq方法
- css 修改样式
$('div').css({
'background':'red',
'border':'5px solid #000',
'color':'#fff'
});
- eq 代表第几个
// i表示元素的索引值
$('div').eq(i).css({})
- html 添加标签
$('div').eq(i).css({...}).html('<p>saaaa</p>')
- text 添加文本
$('div').eq(i).css({...}).text('haahhahah')
选择器
jq的核心
基本选择器
// id选择器
$('#fist')
//根据元素标签名选择元素,返回类数组
$('div')
// class选择器,返回类数组
$('.div')
// 通配符选择器,返回类数组
$('*')
多项选择器
$(“selector1,selector2,selectorN”)
将每一个选择器匹配到的元素合并后一起返回。
可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
// 选择两个元素,返回一个数组
$('.first,.second')
层级选择器
// 祖先后代选择
$('div ul li')
// 子选择器
$('div>ul')
// 相邻元素选择器
$('div+ul')
// 匹配相邻的后面的所有兄弟元素
$('div~ul')
属性选择器
// 属性名选择器,选取所有有class属性的元素
$('[class]')
// 属性值选择器,选取class名字等于tool的元素
$('[class=tool]')
// 选取class名字不等于tool的元素
$('[class!=tool]')
// 以指定字符开头
$('[class^=tool_]')
// 以指定字符结尾
$('[class$=tool_]')
// 包含
$('[class*=l_]')
// 多个属性选择器
$('[class][id]')
//属性选择器结合
$('[class][class*=l_]')
过滤器
// child选择器
// 找到作为父元素的第一个子标签的li元素
$('li:first-child')
// 找到作为父元素的最后一个子标签的li元素
$('li:last-child')
// 找到作为父元素的第二个子标签的li元素
$('li:nth-child(2)')
$('li:nth-last-child(2)')
// 找到作为父元素的唯一子标签的li元素
$('li:only-child')
// type系列
$('li:first-of-type')
$('li:last-of-type')
$('li:nth-of-type(1)')
$('li:nth-last-of-type(1)')
$('li:only-of-type(1)')
过滤器参数:
- n 匹配子元素序号,从1开始
- even 偶数
- odd 奇数
表单相关
// 找到所有的表单元素:input、textarea、select、button
$(':input')
// 找到type=text的input元素
$(':text')
// 其他的type类型
$(':password')
$(':radio')
$(':checkbox')
$(':image')
$(':reset')
$(':button')
$(':file')
// 跟表单状态相关的选择器
$(':enabled')
$(':disabled')
$(':checked')
$(':selected')
查找和过滤
// 可以找到子孙元素
$('div').find('.li')
// 只找到子类元素
$('ul').children('.li')
// 找到父类元素
$('.li').parent()
$('div').next()
$('div').prev()
$('div').eq(index)
$('div').siblings()
// 过滤
$('li').filter('.py')
事件
鼠标事件
- click 单击
- dbclick 双击
- mousedown 鼠标按下
- mouseup 鼠标放松
- mouseenter 鼠标进入时触发
- mouseleave 鼠标移出时触发
- hover(移入执行的函数,移出执行的函数) 移入函数的参数可填可不填
- mouseover 鼠标进入元素时触发(包括子元素)
- mouseout 鼠标移出元素时触发(包括子元素)
- mousemove 鼠标移动
- scroll 鼠标滚轮滚动(拖动滚动条也会触发)
// 单击
$('div').click(function(){})
// 双击
$('div').dbclick(function(){})
键盘事件
- keydown 当键盘或按钮被按下时触发
- keyup 当键盘或按钮松开时触发
- keypress 当键盘或按钮被按下时触发
$(document).keydown(function(event){
console.log(event.key)
console.log(event.keyCode)
})
其他事件
- ready(fn) DOM载入就绪之后要执行的函数
- resize 当调整浏览器窗口的大小时触发
- focus 当元素获得焦点时触发
- blur 当元素失去焦点时触发
- change 当元素的值发生改变时触发
- select 当textarea或文本类型的input元素中文本被选中时触发
- submit 当提交表单时会触发
$(document).ready(function(){...})
$(window).resize(function(){})
// 提交表单
$('input[type=button]').click(function(){
$('form').submit()
})
// 阻止表单提交
$('form').submit(function(){
...
return false;
})
// 提交表单时做一些我们所需要做的事情:表单验证
$('form').submit(function(){
var inputValue=$('input[type=text]').val();
if(inputValue!='ha'){
return false;
}
})
事件参数
- event
有些事件,如mousemove和keypress,我们需要获取鼠标位置和键盘的值,
否则监听这些事件就没什么意义了。所有事件都会传入event对象作为参数,
可以从event对象上获取到更多的信息。
事件绑定与取消
- on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件处理函数
events: 事件
selector: 选择器
data: 传入的参数
fn:执行的函数
$('a').on('keydown',function(){...})
// 改造 ,可以解决js动态生成的元素获取不到的问题
$('document').on('keydown','a',function(event){
// 阻止冒泡
event.stopPropagation();
})
// 一个元素绑定多个事件
$('document').on({
mouseenter:function(event){...},
keydown: function(event){...}
})
// 多个元素绑定多个事件
$('document').add('a').on({
mouseenter:function(event){...},
keydown: function(event){...}
})
- off(events,[selector],fn) 在选择元素上移除一个或多个事件处理函数
function fn(){...}
$('document').off('click','.div',fn)
- one(type,[data],fn) 为每一个匹配元素的特定事件(比如click)绑定一个一次性的事件处理函数
// 绑定一次事件
$('.one').click(function(){
$(document).on('click','.div',fn)
})
jq动画
动画DOM及其CSS操作
- 动画原理
我们只需要以固定的时间间隔,每次DOM元素的CSS样式修改一点,看起来就像动画了。
自定义动画
- animate()
可以实现任意动画效果,需要传递的参数是DOM元素最终的CSS状态和时间。
var div=$('.div');
// stop() 动画开始前,先停止
div.stop().animate({
opacity:0.25,
width:'256px',
height:'256px'
},3000)
- delay() 可以实现动画暂停或延迟
var div=$('.div');
div.stop()
.animate({
width:'256px',
},1000)
.delay(3000)
.animate({
height:'256px',
})
动画函数
- show/hide
直接以无参数形式调用show()和hide(),会显示和隐藏dom,但是只要传递一个时间参数,就变成了动画
var div=$('.div');
// 在3秒内逐渐消失
div.hide(3000);
- toggle() 根据当先状态决定显示或隐藏
- fadeIn / fadeOut 淡入 / 淡出
- fadeToggle() 根据当先状态决定淡入或淡出
- slideUp / slideDown 在垂直方向逐渐收缩或展开
- slideToggle() 根据当先状态决定收缩或展开
计时器
- setTimeout
- clearTimeout
- setInterval
- clearInterval
原生Ajax
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
Ajax的优点
- 通过异步模式,提升了用户体验
- 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
- ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
Ajax的缺点
- 不支持浏览器back按钮
- 安全问题ajax暴露了与服务器交互的细节
- 对搜索引擎的支持比较弱
XMLHttpRequest对象
是一种支持异步请求的技术,它是ajax的核心
作用:
- 可以向服务器提出请求并处理响应,而不阻塞用户
- 可以在页面加载以后进行页面的局部更新
如何使用Ajax
要完整实现一个ajax异步调用和局部刷新,通常需要以下几个步骤
- 创建XMLHttpRequest对象,也就是创建一个异步调用对象
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL
- 设置响应HTTP请求状态变化的函数
- 发送HTTP请求
- 获取异步调用返回的数据
- 使用js和dom实现局部刷新
- 第一步实现:封装通用的xhr对象,兼容各个版本
function createXHR(){
// 判断浏览器是否将XMLHttpRequest作为本地对象实现,针对ie7,firefox、opera等
if(type XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
}else if(type ActiveXObject != 'undefined'){
// 将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0',
'MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0']
// 遍历创建XMLHttpRequest对象
var len=xhrArr.length;
var xhr=null;
for(var i=0;i<len;i++){
try{
xhr=new ActiveXObject(xhrArr[i]);
break;
}
catch(ex){}
}
return xhr;
}else{
throw new Error('No XHR object')
}
}
// 简单的方式
function createXHR1(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
- 第二步实现:常见HTTP请求
语法:open(method,url,async) ,它只是建立请求,而不是真正的向服务器发送请求
参数说明:
- method:请求类型,get或post
- url:文件在服务器上的位置,必须要设置的参数
- async: true(异步)或false(同步)
get和post的区别:与post相比,get更简单也更快,并且在大部分情况下都能使用,然而在以下情况下必须使用post:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(post没有数据量限制)
- 发送包含未知字符的用户输入时,post比get更稳定也更可靠
同步和异步的区别:
同步:提交请求–》等待服务器处理–》处理完毕返回 这个期间客户端浏览器不能干任何事
异步:请求通过事件触发–》服务器处理(这时浏览器仍然可以做其他事情)–》处理完毕
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
- 第三步:设置响应http请求状态变化的函数
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
// 异步调用成功,响应内容解析完成,可以在客户端调用
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
// 获得服务器返回的数据
}
}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
- 第四步:发送请求
语法:send(string)
功能:将请求发送到服务器
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
// 异步调用成功,响应内容解析完成,可以在客户端调用
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
// 获得服务器返回的数据
}
}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
// 发送请求
// get请求
xhr.send(null)
// post请求传递参数和设置请求头
// xhr.send({user:'zhangsan',id:6});
// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
- 第五步:获取请求返回的数据
在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:
- responseText : 从服务器进程返回数据的字符串形式
- responseXML : 从服务器进程返回的DOM兼容的文档数据对象
- status : 从服务器返回的数字代码,如404未找到和200已就绪
- status Text : 伴随状态码的字符串信息
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
// 异步调用成功,响应内容解析完成,可以在客户端调用
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
// 获得服务器返回的数据
console.log(xhr.responseText)
}
}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
// 发送请求
// get请求
xhr.send(null)
- 第六步:渲染dom
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
var data=null;
// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
// 异步调用成功,响应内容解析完成,可以在客户端调用
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
// 获得服务器返回的数据
console.log(xhr.responseText)
// 将字符串转换成json格式的数据
data = eval('(' + xhr.responseText + ')');
}
}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
// 发送请求
// get请求
xhr.send(null)
// 渲染dom
function renderDom(){
}
JSON对象
- parse()
语法:JSON.parse()
功能:用于将JSON字符串转化成对象
- stringify()
语法:JSON.stringify()
功能:用于将一个值转为字符串,该字符串应该符合JSON格式,并且可以被JSON.parse()方法还原
jq的ajax方法
- $.ajax()
- $.get()
- $.post()
- $.getJson()
$.ajax({
url:'http://www.baidu.com', //请求地址
type:'get', // 请求方法
async: true, // 同步异步
dataType:'json', // 返回的数据的格式
success: function(data){ // 请求成功执行的函数
console.log(data)
}
})
关于跨域
- 同源策略
所谓同源是指:域名、协议、端口均相同 - 跨域:是指从一个域名的网页去请求另一个域名的资源,严格一点的定义是:只要协议、域名、端口有任何一个的不同,就被当作是跨域
解决跨域的方法
- 跨域资源共享(CORS)
- 使用JSONP(常用)
- 修改document.domain
- 使用window.name
JSONP
- 什么是JSONP
JSONP是JSON with Padding(填充式json)的简写,是应用JSON的一种新方法,也是一种跨域解决方案。
- JSONP的组成
JSONP由两部分组成:回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的json数据
- JSONP的原理
直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性实现的。
- 封装JSONP
在这里插入代码片