jQuery
- 介绍:jQuery凭借简洁的语法和跨平台的兼容性,极大的简化了JavaScript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。jQuery强调的理念是以最少的代码,实现最多的功能。
- 优势:轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的ajax、出色的浏览器兼容、链式操作方法、隐式迭代、行为层和结构层的分离、丰富的插件支持、完善的文档、开源
- 引入方式:
- 引入CDN服务
< script src=“http://code.jquery.com/jquery-migrate-1.2.1.min.js”> </ script> - 引用本地文件
< script src="./jquery-3.0.0.js"></ script>
- 引入CDN服务
- 文档加载
- $(document).ready(function() { })
- $(function() { })
- 原生的和jq的区别:
- ①执行时机不同,window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行,而 $(document).ready()是网页中所有DOM结构绘制完毕就执行,可能DOM元素关联的东西并没有加载完
- ②window.onload只能写一个,多个时后面的会覆盖掉前面的,而 $(document).ready()可以写多个,不会覆盖
- jquery对象
- 通过jQuery包装DOM对象后产生的对象 jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jquery里的方法
- 获取方式:var li = $(‘li’)
var jLi = $('li')
console.log(jLi)//jQuery.fn.init(4) [li, li, li, li, prevObject: jQuery.fn.init(1)]
console.log(jLi[0])//<li>1</li>
- 互转
- jquery转原生:
- ①jquery对象.get()
- 如果不传参数,返回一个数组,数组里的元素即原生的DOM元素
- 如果传参数,返回具体某一个DOM元素
- ②jquery对象[下标]
- 返回具体某一个DOM元素
- ①jquery对象.get()
- 原生转jquery:用 $() 包起来
- jquery转原生:
//jQuery转原生js get() get(索引) [索引]
var oLi = jLi.get()
console.log(oLi)//[li, li, li, li]
console.log(jLi.get(0))//<li>1</li>
var bLi = jLi[0]
console.log(bLi)//<li>1</li>
//原生js原生jQuery $()
var newJli = $(oLi)
console.log(newJli)//jQuery.fn.init(4) [li, li, li, li]
- 选择器
- 基本选择器:通过元素id、class和标签名来查找元素。例:$(’.class’)、 $(’#id’)、 $(‘标签名’)
$('#first').css('font-size',40)
$('.item').css('fontSize','12px')
$('li').css('color','red')
$('*').css('padding',0)
$('#first,.item').css('background','pink')
- 层次选择器:
- 子孙节点:空格
- 子节点:>
- ③下一个兄弟节点:+/next()
- ④下面所有的兄弟节点:~/nextAll()
//后代节点
$('ul span').css('fontSize', '30px')
//子节点
$('ul>span').css('color', 'red')
//下一个兄弟节点
$('#first + li').css('background', 'pink')
$('#first').next('li').css('color','white')
$('#first').nextAll('li').css('fontWeight','bold')
- 过滤选择器:通过特定的过滤规则来筛选出所需要的dom元素,过滤规则与css中的伪类选择器语法相同
- 基本过滤
- $(‘li:first’) //第一个
- $(‘li:last’) //最后一个
- $(‘li:not(.box)’) //排除class名为box
- $(‘li:even’) //索引为偶数
- $(‘li:odd’) //索引为奇数
- $(‘li:eq(3)’) //索引为3的元素
- $(‘li:gt(3)’) //索引大于3的元素
- $(‘li:lt(3)’) //索引小于3的元素
- 内容过滤
- $(‘li:contains(非)’) //选取文本中包含’非’的li元素
- $(‘li:empty’) //选取不包含子元素或文本的空元素
- $(‘li:has§’) //选取包含选择器匹配元素的元素
- $(‘li:parent’) //选取含有子元素或文本的元素
- 可见性过滤
- $(‘li:hidden’).show(2000)//选取所有不可见li
- $(‘li:visible’).css(‘background’,‘red’)//选取所有可见的li
- 注意:不仅包括display为none的元素,也包括< input type=“hidden” />和 visibility:hidden之类
- 属性过滤
- $(‘li[title]’) //有title属性的
- $(‘li[title=优就业]’) //属性是优就业的
- $(‘li[title!=优就业]’) //属性不是优就业的
- $(‘li[title^=a]’) //属性以a开头
- $(‘li[title $=业]’) //属性以’业’结尾
- $(‘li[title*=b]’) //属性包含b的
- 子元素过滤
- $(‘ul :nth-child(1)’) //匹配ul下面的第n个子元素
- $(‘ul :nth-child(even)’) //偶数
- $(‘ul :nth-child(odd)’) //奇数
- $(‘ul :first-child’) //每一个父元素下面第一个子元素
- $(‘ul :last-child’) //每一个父元素下面的最后一个子元素
- $(‘ul :nth-child(n+2)’) //-n+2选中前两个,n+2选中从2开始
- 表单对象过滤
- $(‘input:enabled’) //选取所有可用元素
- $(‘input:disabled’) //选取所有不可用元素
- $(’:checkbox:checked’) //选取所有被选中的元素(单选框/复选框)
- $(‘select :selected’) //获取下拉框选中的元素
- 基本过滤
- 表单选择器
- $(’:input’) //选取所有input
- $(’:text’) //获取所有单行文本框
- $(’:password’) //密码框
- $(’:file’) //上传域
- 遍历节点
- $(’#box’).children() //当前元素的子节点,而不考虑其孙级节点
- $(’.title’).next() //当前元素的下一个兄弟节点
- $(’.title’).nextAll() //当前元素的下面所有兄弟节点
- $(’.title’).prev() //当前元素的上一个兄弟节点
- $(’.title’).prevAll() //当前元素的上面所有兄弟节点
- $(’.title’).siblings() //当前元素的所有兄弟节点
- 遍历节点——父级
- $(’.box3’).parent() //获取当前元素的父级
- $(’.box3’).parents() //获取当前元素的所有父级,一直到html
- 遍历节点——过滤
- find()
$(‘ul’).find(‘li’) //先找到ul,再查找ul下面的li - filter()
$(‘li’).filter(’.box’) //先找到所有li,再找到名为box的元素 - not()
$(‘li’).not(’.box’) //先找到所有li,再排除名为box的元素
- find()
- 属性操作
- attr()
获取:jquery对象.attr(属性名)
设置:jquery对象.attr(属性名,属性值)
删除:jquery对象.removeAttr(属性名) - prop()
获取:jquery对象.prop(属性名)
设置:jquery对象.prop(属性名,属性值)
删除:jquery对象.removeProp(属性名) - 什么时候该使用prop:
只存在true/false属性,应该使用prop
- attr()
$('button').click(function () {
console.log($('input').attr('checked')); //undefined
console.log($('input').prop('checked')); //true/false
//获取当前的状态
var aaa = $('input').prop('checked')
$('input').prop('checked', !aaa)
})
- class操作
$('div').addClass('box active') //添加class,可以同时添加多个
$('div').removeClass('active') //删除class
console.log($('div').hasClass('box')); //是否有box,返回布尔值
console.log($('div').is('.box')); //同上,但是调用的时候必须打点
$('div').toggleClass('box') //如果box就删除,如果没有就添加
- css操作
- jQuery对象.css(‘样式名’) //获取
- jQuery对象.css(‘样式名’,‘值’) //设置单个
- jQuery对象.css({ ‘样式名’:‘值’, ‘样式名’:‘值’ })//设置多个
$('.box').css('font-size', 50)
$('.box').css({ //设置多个
'width': 300, //默认是px,如果你要写100px,那么就要写成字符串格式
'height': '500px',
'background': 'pink'
})
console.log($('.box').css('width')); //300px
console.log($('.box').css(
'background')); //rgb(255, 192, 203) none repeat scroll 0% 0% / auto padding-box border-box
- 获取内容
jQuery对象.html() :获取
jQuery对象.html(值) :设置
jQuery对象.text() :获取
jQuery对象.text(值) :设置
jQuery对象.val() :获取
jQuery对象.val(值) :设置
console.log($('p').html()); //哈哈哈哈,我是一个p标签
console.log($('p').text()); //哈哈哈哈,我是一个p标签
$('p').html('你好:<strong>我是加粗</strong>') //可以识别标签
$('p').text('你好:<strong>我是加粗</strong>') //不可以识别标签
//文本框
console.log($('input').val());
// $('input').val('通过val()改变的值')
console.log($('input').val());
//下拉框
console.log($('select').val());
$('select').val('b')
$('select').val(['b', 'c'])
//复选框
$(':checkbox').val(['check1','check2','check3'])
- $ .each()
语法: $.each(对象,function(下标,当前项){ })
作用:可以循环jQuery对象,也可以用于循环原生数组及对象
注意:在循环jQuery对象时,函数中的this就是item
var arr = ['西瓜', '哈密瓜', '苹果', '鸭梨']
$.each(arr, function (index, item) {
console.log(index + '-----' + item);
})
//二维数组
var arr = [
['西瓜', '哈密瓜', '苹果', '鸭梨'],
['web', 'java', 'python', 'ui'],
['保时泰', '飞度', '五菱宏光', '宝骏']
]
$.each(arr, function (index, item) {
console.log(index + '----' + item);
})
//对象
var obj = {
'name': 'zhangSan',
'age': 18,
'city': 'guangZhou',
'sex': '男'
}
$.each(obj, function (key, val) {
console.log(key + '----' + val);
})
//数组套对象
var arr = [{
'name': 'zhangSan',
'age': 18,
'city': 'guangZhou',
'sex': '男'
}, {
'name': 'liSi',
'age': 28,
'city': 'nanSha',
'sex': '女'
}, {
'name': 'wangWu',
'age': 38,
'city': 'beiJing',
'sex': '男'
}]
$.each(arr, function (index, item) {
// console.log(index + '---' + item);
console.log(item.name);
})
//遍历jQuery对象
$.each($('li'), function (index, item) {
console.log(index + '----' + item);
console.log(this);
console.log(item === this);
$(item).css('background', 'pink')
})
- jQuery对象.each()
语法: jQuery对象.each(function(下标,当前项){ })
作用:该方法专门用来循环jQuery对象
$('li').each(function (index, item) {
console.log(index + '----' + item);
console.log(this);
console.log(item === this);
})
注意:函数中的this就是当前遍历的这一项
- $ .map()
语法:$ .map(数组,function(当前项,下标){})
作用:通过回调函数的处理,返回一个新的数组
var arr = ['a', 'b', 'c', 'd', 'e']
var arr1 = $.map(arr, function (item, index) {
console.log(index, item); /*0 "a"
1 "b"
2 "c"
3 "d"
4 "e" */
//把每一项item转换成大写
return item.toUpperCase()
})
console.log(arr1);/*0: "A"
1: "B"
2: "C"
3: "D"
4: "E" */
$.map和 $.each区别:
①:函数中形参的位置是相反的
②:map通过回调函数处理返回一个新数组,each仅仅是用来遍历
- $ .extend()
介绍:该方法用于将一个或多个对象的内容合并到目标对象
语法: $ .extend(目标对象,要合并的对象,要合并的对象……)
解释:它的含义就是将要和并的对象….合并到目标对象中,返回值为合并后的目标对象
注 意:该方法还常用于对象的深度拷贝, $.extend(true,{},obj)
var obj1 = {
'name': 'zhangSan'
}
var obj2 = {
'age': 18
}
var obj3 = {
'city': 'guangZhou'
}
var obj = {}
$.extend(obj, obj1, obj2, obj3)
console.log(obj);
//假设没有目标对象接收
var newObj = $.extend({}, obj1, obj2, obj3)
console.log(newObj);
//该方法常用于对象的深度克隆(对象里面套对象),第一个参数为true,则为深度拷贝
var obj4 = {
a: {
name: '张三'
}
}
var obj5 = $.extend(true, {}, obj4)
obj5.a.name = '李四'
console.log(obj5);
console.log(obj4);
day 02
BOM
- 获取元素宽高
- 获取元素的宽
- $ (’.box’).width() -->width
- $ (’.box’).innerWidth() -->width+padding
- $ (’.box’).outerWidth() -->width+padding+border
- $ (’.box’).outerWidth(true) -->width+padding+border+margin
- 获取高度同上
- 获取元素的宽
- 获取可视区的宽高
- $ (window).width()
- $ (window).height()
- 获取文档宽高
- $ (document).width()
- $ (document).height()
- offset()
- 语法:jQuery对象.offset()
- 概念:返回元素相对于文档的距离
- 滚动条
- 语法:
- ①jQuery对象.scrollTop():页面被卷去的高,上下滚动时滚动条的位置
- ②jQuery对象.scrollLeft():页面被卷去的宽,左右滚动时滚动条的位置
- 概念:返回元素的滚动条距离,既可以获取,也可以设置(传参)
- 语法:
//元素宽高
console.log($('div').width())//200 width
console.log($('div').innerWidth())//230 width+padding
console.log($('div').outerWidth())//234 width+padding+border
console.log($('div').outerWidth(true))//264 width+padding+border+margin
console.log($('div').outerHeight(true))//1024 height+padding+border+margin
//可视区宽高
console.log($(window).width())//913
console.log($(window).height())//625
//文档宽高
console.log($(document).width())//913
console.log($(document).height())//1024 height+padding+border+margin
//元素相对于文档距离
console.log($('p').offset())//{top: 504, left: 649}
console.log($('p').offset().top)//504
console.log($('p').offset().left)//649
//滚动条位置
console.log($(window).scrollTop())//111
console.log($(window).scrollLeft())//0
$(document).scroll(function(){
//获取
console.log($(window).scrollTop())
})
$('p').click(function(){
//设置
$(window).scrollTop(0)
})
DOM
- 创建节点
- 语法:$ (html片段)
- 添加节点
- 在父元素末尾添加
- 父元素.append(子元素)
- $ (要添加的元素).appendTo(父元素)
- 在父元素开头添加
- 父元素.prepend(子元素)
- $ (要添加的元素).prependTo(父元素)
- 在某个元素前面添加
- 参考节点.before(新节点)
- 新节点.insertBefore(参考节点)
- 在某个元素后面添加
- 参考节点.after(新节点)
- 新节点.insertAfter(参考节点)
- 在父元素末尾添加
- 删除节点
- jQuery对象.remove():删除元素,返回被删除元素的引用,不会保留元素绑定的事件
- jQuery对象.detach():删除元素,返回被删除元素的引用,但会保留元素绑定的事件
- jQuery对象.empty():清空元素的节点
- 克隆节点
- jQuery对象.clone():如果参数为true,则可以克隆元素的操作行为
- 替换节点
- jQuery对象.replaceAll(被替换的元素) :前面的替换后面的
- 被替换的元素.replaceWith(jQuery对象) :后面的替换前面的
- 包裹节点
- $(‘span’).wrap(’< div>’) :每一个span外面包裹一个div
- $(‘span’).wrapAll(’< div>’) :所有span外面包裹一个div
- $(‘span’).wrapInner(’< div>’) :每一个span的里面包裹一个div
- $(‘span’).unwrap() :删除外面的父级,如果父级是body,则不能删除
//创建节点
//插入节点
//在某个元素前面插入节点
$('script').eq(0).before($('<div>我是创建的DIV</div>'))
$('<em>em</em>').insertBefore($('div'))
//在某个元素后面插入节点
$('em').after($('<b>b</b>'))
$('<em>em2</em>').insertAfter($('b'))
//在父元素末尾添加节点
$('<p>p1</p>').appendTo($('div'))
$('div').append($('<p>p2</p>'))
//在父元素头部添加节点
$('<span>我是span</span>').prependTo($('div'))
$('div').prepend($('<div>我是inner_div</div>'))
//删除节点
$('div').find('p').click(function(){
console.log($(this).html())
})
//remove() 不保留之前绑定的事件
$('button').eq(0).click(function(){
var jP = $('div').eq(0).find('p').remove()
console.log(jP)//接收返回值(jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(2)])
setTimeout(function(){
jP.appendTo($('div').eq(0))
},2000)
})
//detach() 保留之前绑定的事件
$('button').eq(1).click(function(){
var jP = $('div').eq(0).find('p').detach()
console.log(jP)//接收返回值(jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(2)])
setTimeout(function(){
jP.appendTo($('div').eq(0))
},2000)
})
//empty()
$('button').eq(2).click(function(){
$('div').eq(0).find('p').empty()
})
//克隆节点 clone() 如果参数为true,则可以克隆元素的操作行为
$('button').eq(3).click(function(){
$('h1').eq(0).clone().insertAfter($('h1').eq(0))
})
//替换节点
$('<h6>h6</h6>').replaceAll($('h1'))
$('h1').replaceWith($('<h6>h6</h6>'))
//包裹节点
$('em').wrap('<div>')//每一个em外面包裹一个div
$('em').wrapAll('<div>')//所有的em外面包裹一个div
$('p').wrapInner('<span>')//每个p的里面包裹一个span,会把p的内容一起包裹起来
$('p').unwrap()//删除外面的父元素,如果父级是body,则不能删除
- 事件对象
- $(‘div’).click(function (ev) {
ev :jQuery的事件对象
ev.clientX, ev.clientY :鼠标相对于可视区的距离
ev.delegateTarget :事件绑定的对象
ev.offsetX, ev.offsetY :鼠标相对于触发事件的元素的左上角的距离
ev.originalEvent :返回原生的事件对象
ev.pageX, ev.pageY :鼠标相对于文档的距离
ev.screenX, ev.screenY :鼠标相对于屏幕的距离
ev.target :事件源
ev.type:事件类型
ev.which :相当于keyCode,比keyCode强大,还可以记录鼠标的键值,123(左中右)
ev.altKey :相应的功能键是否按下
ev.ctrlKey
ev.shiftKey
ev.preventDefault():阻止默认事件
ev.stopPropagation():阻止冒泡的操作
return false:阻止默认事件 + 阻止冒泡的操作 })
- $(‘div’).click(function (ev) {
- 事件绑定
- 语法:
- jQuery对象.on(事件类型, function(){ })
- 优点:
- ①可以给同一个元素的同一个事件添加不同的处理函数
- ②可以给同一个元素的不同事件添加同一个处理函数
- ③可以同时添加多个事件
- ④事件可以发生在未来
- 语法:
- 事件委托
- 语法:
- jQuery对象.on(事件类型,子级, function(){ })
- 优点:后来新添加的元素,也能保持之前的事件
- 事件绑定在父级上,触发事件的是子级。利用冒泡的原理实现
- 语法:
- 取消事件
- 语法:
- jQuery对象.off(事件类型)
- 注意:如果不传参数,则取消所有的事件
- 语法:
- 命名空间
- 语法:
- jQuery对象.on(事件类型.命名, function(){ })
- 语法:
- one()
- 语法:
- jQuery对象.one(事件类型, function(){ })
- 概念:只允许执行一次
- 语法:
- 合成事件hover()
- 语法:
- jQuery对象.hover(移入执行的函数, 移出执行的函数)
- 类似于原生的mouseenter和mouseleave,他们没有冒泡。而不同于mouseover和mouseout
- 语法:
//事件对象
$('div').click(function (ev) {
console.log(ev)
console.log(ev.clientX, ev.clientY)//34 22鼠标相对于可视区的距离
console.log(ev.delegateTarget)//<div>div</div>事件绑定的对象
console.log(ev.offsetX, ev.offsetY)//14 12鼠标相对于触发事件的元素的左上角距离
console.log(ev.originalEvent)//返回原生的事件对象
console.log(ev.pageX, ev.pageY)//34 22鼠标相对于文档的距离
console.log(ev.screenX, ev.screenY)//124 222 鼠标相对于屏幕的距离
console.log(ev.target)
console.log(ev.type)
console.log(ev.which)//相当于keycode,比keycode强大很多,还可以记录鼠标的键值,123(左中右)
console.log(ev.altKey)
console.log(ev.ctrlKey)
console.log(ev.shiftKey)
//阻止默认事件
ev.preventDefault()
//阻止冒泡操作
ev.stopPropagation()
//阻止默认事件+阻止冒泡操作
return false
})
//事件绑定
//同一元素同一事件,多个处理函数
$('div').on('click',function(){
console.log(111)
})
$('div').on('click',function(){
console.log(222)
})
//同一元素同一处理函数多个事件
$('div').on('click mouseenter',function(){
console.log(111)
})
//同一元素不同事件对应不同处理函数(对象格式)
$('div').on({
click:function(){
console.log(111)
},
mouseenter:function(){
console.log(222)
}
})
//绑定自定义事件,在需要的时候触发
$('div').on({
click:function(){
$('div').trigger('aaa')//在点击div时触发自定义事件
},
aaa:function(){
console.log('我是自定义事件')
}
})
//事件委托
$('ul').on('click','li',function(){
$(this).css('background','pink')
})
//事件可以发生在未来
$('<li>5</li>').appendTo($('ul'))
//取消事件
$('li').on('click mouseleave',function(){
console.log(111)
})
$('li').off()//取消所有
$('li').off('mouseleave')//取消特定
//命名空间
$('div').on('click.aaa',function(){
console.log(111)
})
$('div').on('click.bbb',function(){
console.log(222)
})
$('div').off('click.bbb')
//one事件 只触发一次
$('div').one('click.aaa',function(){
console.log(111)
})
//hover事件 合并移入移出事件
$('div').hover(function(){
console.log(111)
},function(){
console.log(222)
})
token
- Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。
- Token的定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。
- 使用Token的目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。
https比http安全系数更高
DOM树种消失(display:none)
0.5px的线:width:500px;height:0.5px;background:pink;
动画
- 显示隐藏(同时改变宽高透明度)
- 语法:
- jquery对象.show(时间,速度,回调) -->显示
- jquery对象.hide(时间,速度,回调) -->隐藏
- jquery对象.toggle(时间,速度,回调) -->显示/隐藏(切换)
- 时间关键字:fast 200ms ;normal 400ms ;slow 600ms
- 速度关键字:swing 慢快慢(默认);linear
- 语法:
$('button:eq(0)').on('click',function(){
// $('div').show()//直接显示
// $('div').show(2000)
$('div').show(2000,function(){
console.log('我已经完全显示出来了')
})
})
$('button:eq(1)').on('click',function(){
// $('div').hide()//直接隐藏
// $('div').hide(2000)
$('div').hide(2000,function(){
console.log('我已经完全隐藏了')
})
})
$('button:eq(2)').on('click',function(){
// $('div').toggle()//直接显示/隐藏
// $('div').toggle(2000)
$('div').toggle(2000,function(){
console.log('我已经完全切换了')
})
})
- 显示隐藏(先block,再改变透明度;先none,再改变透明度)
- 语法:
- jquery对象.fadeIn(时间,回调) -->显示
- jquery对象.fadeOut(时间,回调) -->隐藏
- jquery对象.fadeTo(时间,透明度,回调) -->透明度到多少
- jquery对象.fadeToggle(时间,回调) -->显示/隐藏
- 语法:
$('button').eq(3).on('click',function(){
// $('div').fadeIn()//直接显示
// $('div').fadeIn(2000)
$('div').fadeIn(2000,function(){
console.log('我已经完全显示出来了')
})
})
$('button').eq(4).on('click',function(){
// $('div').fadeOut()//直接隐藏
// $('div').fadeOut(2000)
$('div').fadeOut(2000,function(){
console.log('我已经完全隐藏了')
})
})
$('button').eq(5).on('click',function(){
// $('div').fadeTo(2000,0.5)//2秒显示到0.5透明度
$('div').fadeTo(2000,0.8,function(){
console.log('我已经完全显示出来了')
})
})
$('button').eq(6).on('click',function(){
// $('div').fadeToggle()//直接切换
// $('div').fadeToggle(2000)
$('div').fadeToggle(2000,function(){
console.log('我已经完全切换了')
})
})
- 显示隐藏(改变高度)
- 语法:
- jquery对象.slideDown(时间,回调) -->显示
- jquery对象.slideUp(时间,回调) -->隐藏
- jquery对象.slideToggle(时间,回调) -->显示/隐藏(切换)
- 语法:
$('button:eq(7)').on('click',function(){
// $('div').slideDown()//直接显示
// $('div').slideDown(2000)
$('div').slideDown(2000,function(){
console.log('我已经完全显示出来了')
})
})
$('button:eq(8)').on('click',function(){
// $('div').slideUp()//直接隐藏
// $('div').slideUp(2000)
$('div').slideUp(2000,function(){
console.log('我已经完全隐藏了')
})
})
$('button:eq(9)').on('click',function(){
// $('div').slideToggle()//直接显示/隐藏
// $('div').slideToggle(2000)
$('div').slideToggle(2000,function(){
console.log('我已经完全切换了')
})
})
- 注意:该方法都是根据元素的display属性来改变的。
- animate动画
- 语法:
- jQuery对象.animate({动画的参数},时间,运动形式,回调)
- 第一个参数:{ } 运动的属性和值 {width:300,height:300}
- 第二个参数:时间 默认:400ms
- 第三个参数:只有两种运动形式 默认:swing(慢快慢)(默认) linear(匀速)
- 第四个参数:回调函数
- jQuery对象.animate({动画的参数},时间,运动形式,回调)
- 动画列队:每一个animate都是队列中的一员,前一个动画运动完了,后一个动画才会运动
//普通动画
//jq对象.animate({要改变的},时间,速度,回调函数)可传四个参数
//延迟:jq对象.delay(时间).animate(参数)
//链式运动(动画列队)(只能传两个参数)
$('div').animate({
'width': 500
}, 2000).delay(3000).animate({
'width': 50,
'left': 500
}, 2000)
- 停止动画
- stop()
- 语法:jquery对象.stop(clearQueue,gotoEnd)
- clearQueue:是否要清空未执行完的动画列队
- gotoEnd:是否直接将正在执行的动画跳转到结束状态
- jQuery对象.stop() :没有参数,停止当前正在进行的运动,后续运动继续
- jQuery对象.stop(true) :停止当前的,同时清空后面的动画
- jQuery对象.stop(true,true) :当前动画到达完成状态,同时停止后面的动画
- 语法:jquery对象.stop(clearQueue,gotoEnd)
- finish()
- 语法:jQuery对象.finish():所有动画全都到完成状态
- stop()
- 延迟动画
- 语法:jQuery对象.delay(时间).animate({}, ,)
$('div').delay(1000).animate({
'width': 600
}, 2000).delay(3000).animate({
'height': 600
}, 2000)
- 递归
- 概念:一个函数在其定义域说明中有直接或间接调用自身的一种方法
//共10个li
$('li:first').slideDown(500, function fn() {
if ($(this).next().index() <= 9) {
$(this).next().slideDown(500, fn)
}
})
- ajax
- 优势:
- ①不需要插件支持
- ②优秀的用户体验
- ③提高web程序性能
- ④减轻服务器和带宽的负担
- 不足:
- ①破坏了浏览器的前进、后退按钮的正常功能
- ②对搜索引擎支持不足
- 格式:
- 优势:
$.ajax() 是jquery中ajax的最底层实现,他的参数只有一个,是一个对象
格式:
$.ajax({
url:'', //请求的地址
type:'', //请求方式(get/post) 默认为get
async:'', //是否为异步请求,默认true异步
timeout:'', //设置请求超时时间,单位ms
data:{ }, //发送到后端的数据
dataType:'', //预期服务器返回的数据类型,有xml/html/script/json/jsonp/text
success:function(res){ }, //成功的回调函数
error:function(err){ }, //失败的回调函数
complete:function(){ } //请求完毕后调用的函数,请求成功或失败均调用
})
- 跨域
- 为什么出现跨域
- 出于浏览器的同源策略限制。同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响。可以说web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互。所谓同源就是两个页面具有相同的协议、域名、端口号
- 为什么出现跨域
http://127.0.0.1:5501/day23/ajax/04跨域.html
http: 协议
127.0.0.1 域名
5501 端口号
- 什么是跨域
- 跨域的解决方法(JSONP)
- 理解:JSONP是服务器与客户端跨域通信的常用方式。最大的特点就是简单适用,兼容性好(兼容低版本IE),缺点就是只支持get请求,不支持post请求。
- 核心思想:网页通过添加一个 < script>标签,向服务器请求JSON数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。动态创建一个< script>标签
- 数据串连化
- jq表单对象.serialize():转化为字符串格式
- jq表单对象.serializeArray():数组里套对象格式
<form action="">
<input type="text" name="userName">
<input type="password" name="pwd">
</form>
<button>点击获取</button>
<script src="../jquery-3.0.0.js"></script>
<script>
$('button').eq(0).on('click', function () {
console.log($('form').serialize()); //userName=admin&pwd=123456
console.log($('form').serializeArray()); //[{name: "userName", value: "admin"},{name: "pwd", value: "123456"}]
})
难点
- 闭包模拟私有属性
function Stu(name,age){
var name = name
var age = age
return {"getName":function(){ return name},
"setName":function(n){name = n},
"setAge":function(a){age = a},
"getAge":function(){return age}
}
}
var stu = new Stu('张三',18)
console.log(stu)//{getName: ƒ, setName: ƒ, setAge: ƒ, getAge: ƒ}
console.log(stu.getAge())//18
console.log(stu.getName())//张三
stu.setName('李四')
console.log(stu.getName())//李四
stu.setAge('20')
console.log(stu.getAge())//20
- 字符串去重排列
//去重,去特殊字符,数字在前,字母在后
var str = "1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs";
var str1 = str.split('&').join('')
console.log(str1)//1233fddfd3434fdsaff4545454545444rfdsfds545gdsgs
console.log(str1.charAt(0))//1
console.log(str1[0])//1
var strNum = ''
var strWord = ''
/* //法一
for (var i = 0; i < str1.length; i++) {
if (str1[i] >= 0 || str1[i] <= 9) {
if (strNum.indexOf(str1[i]) == -1) {
strNum += str1[i]
}
} else {
if (strWord.indexOf(str1[i]) == -1) {
strWord += str1[i]
}
}
} */
//法二
for (var i = 0; i < str1.length; i++) {
if (!isNaN(str1[i])) {
if (strNum.indexOf(str1[i]) == -1) {
strNum += str1[i]
}
} else {
if (strWord.indexOf(str1[i]) == -1) {
strWord += str1[i]
}
}
}
//法三 acsii码
var newStr = strNum + strWord
console.log(newStr)
- 叫唤的狗
function Dog(){
this.wow = function(){
alert('wow!')
}
this.yelp = function(){
this.wow()
}
}
function MadDog(){
console.log(this)//MadDog {}
Dog.apply(this)
console.log(this)//MadDog {wow: ƒ, yelp: ƒ}
var newThis = this
this.yelp = function(){
setInterval(function(){
newThis.wow()
},500)
}
}
new MadDog()
- 闭包验证邮箱
var inp = document.getElementsByTagName('input')[0]
var oSpan = document.getElementsByTagName('span')[0]
inp.oninput = function () {
var val = inp.value
var teg = /^[1-9a-zA-Z]\w+@[0-9a-zA-Z]{2,}\.(com|cn|edu|org|gov)$/ig
if (!teg.test(val)){
oSpan.innerHTML = '*邮箱格式不正确!'
oSpan.style.color = 'red'
}else{
oSpan.innerHTML = '通过'
oSpan.style.color = 'green'
}
}
(扩展)
聚合函数(css效果)、百度地图开发者文档、 jq插件库、bootstrap插件(浮上提示文字)、 百度商桥(聊天系统)、基于Threejs
插件
- 概念:本身我们不直接对jq代码进行操作,而是间接的对jq代码进行修改
- 类级别的插件
- 创建:$ .extend 扩展工具方法的插件
- 调用:$ .插件名()
- 类级别的插件
$.extend({
//去除左边空格
leftTrim: function (str) {
return str.replace(/^\s+/, '')
},
//去除右边空格
rightTrim: function (str) {
return str.replace(/\s+$/, '')
}
})
var str = ' 优就业 '
//最终调用leftTrim这个方法
console.log('%' + $.leftTrim(str) + '%'); //%优就业 %
console.log('%' + $.rightTrim(str) + '%'); //% 优就业%
- 对象级插件
- 创建:$.fn.extend 扩展到jquery对象下的插件形式
- 调用:$().插件名()
$.fn.extend({
aaa: function () {
console.log(this);
//get()获取的是页面中所有匹配的DOM元素集合
// return $(this).eq(0) //返回jquery对象
return this.get(0) //返回原生对象
},
bbb:function(){
// return $(this).eq(this.length-1) //返回jquery对象
return this.get(this.length-1) //返回原生对象
}
})
var firstLi = $('li').aaa()
console.log(firstLi);
var endLi = $('li').bbb()
console.log(endLi);
- Zepto.js
- Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,它与jquery有着类似的api,针对于移动端。
console.log($('div').width()); //对隐藏元素获取到的是0
console.log($('div').offset()); //{left: 8, top: 8, width: 100, height: 100}
// console.log($('div').innerWidth()); //zepto没有此方法
// console.log($('div').outerWidth()); //zepto没有此方法
<script src="./js/zepto.min.js"></script>
<script src="./js/touch.js"></script>
<script>
//单击
$('div').tap(function () {
console.log('tap');
})
//单击
$('div').singleTap(function () {
console.log('singleTap');
})
//双击
$('div').doubleTap(function () {
console.log('doubleTap');
})
//长按 当一个元素按住超过750ms触发
$('div').longTap(function () {
console.log('longTap');
})
//滑动
$('div').swipe(function () {
console.log('swipe');
})
//左滑
$('div').swipeLeft(function () {
console.log('swipeLeft');
})
//右滑
$('div').swipeRight(function () {
console.log('swipeRight');
})
//上滑
$('div').swipeUp(function () {
console.log('swipeUp');
})
//下滑
$('div').swipeDown(function () {
console.log('swipeDown');
})
</script>