醉牛前端 ---前端人的俱乐部
刷新界面:window.location.reload()
按钮样式生成网址:http://blog.koalite.com/bbg/
less sass
svg图片
在地址栏中显示图标
<link rel = 'shortcur icon' type = 'image/x-icon' href = 'xxx.icon'>
父元素.insertBefore(要插入的元素newElement,被插入的元素oldElement)
如果第二个元素为null,默认与appendChild一样
createElement('div')
removeChild(box)
父元素replaceChild(new,old)
box.children $('').children()
cioneNode(true)
btn.nextElementSibling || btn.nextSibling $().siblings()
parentNode $().parent()
textarea.resize
日期对象:date.getMonth() 从 Date 对象返回月份 (0 ~ 11)
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 时间戳
valueOf() 返回 Date 对象的原始值。时间戳
自定义事件:new Date('2018-10-21 23:23:23')
offset家族: offset只能获取值,不能设置值
item.offsetHeight=height + padding + border
item.offsetWidth = width + padding + border
offsetLeft 距离祖先元素定位的左边的距离
offsetTop 距离祖先元素定位的上边的距离
parentNode父元素
offsetParent 祖先定位元素
event=eve||(window.)event
滚动事件:window.onscroll = function(){
var scrollT = window.pageYOffset||document.documentElement.scrollTop||0||document.body.scrollTop||0;
console.log(scrollT);}
当前屏幕的宽度和高度
document.documentElement.clientWidth
document.documentElement.clientHeight
1.screenX和screenY 代表的是鼠标在当前屏幕中网页中点击的x和y坐标(注意参考点是以屏幕为基准)
2.pageX和pageY 代表的是鼠标在当前文档区域中点击的x和y(注意参考点事以文档区域为基准)
3.clientX和clientY 代表的是鼠标在当前可视区域中点击的x和y(注意参考点是以当前网页的可视区域为基准)
document比body大
水平滚动条:overflow:auto
垂直滚动条:overflow:scroll
scrollTop 是取出当前页面距离顶部偏移的高度
scrollTo是有两个值,一个是x,一个y,即使你只使用一个参数,那么另外一个不能省略
client获取的内容 = width/height + padding 不包含border
clientLeft和clientTop获取的是一个标签的左边框和上边框
client兼容:window.innerWidth,
document.documentElement.clientWidth,document.body.clientWidth
窗口改变事件:window.onresize
阻止事件冒泡:event.stopPropagation();
event.cancelBubble = false
获取事件对象:event.target
event.srcElement
透明度:
opacity: 0.4;
/opacity在火狐,谷歌以及ie9+以上 取值是从0-1/
filter: alpha(opacity:40);
/在ie 6 7 8 支持,取值是0-100/
获取页面上选中的文字:
window.getSelection()
document.selection.createRange().text
js操作样式:box.style.width = 200
jquery操作样式:$('box').css('width',200)
js操作结构:box.innerHTML
jquery操作结构:$("box").html('')
属性选择器:
$('a[href^="www"]')获取属性值以www开头的对象
$('a[href$="cn"]')获取属性值以cn结尾的对象
$('a[href*="520"]')获取属性值包涵520的对象
筛选选择器:
$('li:not(:eq(1))')选择所有li排除第二个
获取li的前三个:li:nth-child(-n+3)
获取事件的对应的索引值:
var index = $(this).index();
alert(index);
显示,切换与隐藏动画:
hide(1000,fn) show() toggle()
可以传递两个参数,第一个表示动画时间,第二个表示动画的回调
卷动动画:
slideUp(1000,fn) slideDown()
slideToggle()
hover事件:进去会调用fn,出来也会调用fn,对于hover事件当出来的和进去的时候,做的事情是一样的,我们可以只写一个function.但是会调用两次,一次是否进去的时候调用,一次出来的时候调用
hover(fn,fn)
stop().slideUp()在动画调用之前调用stop.作用:当下一次动画开始的时候,让上一次动画结束
里边可以传参数true,false
addClass('') removeClass('')
toggleClass('','')
end():通过end()方法回到他的父节点对象
淡入淡出效果:fadeIn() fadeOut()
fadeTo(time,fn)淡入到时间必须设置,否则无效
延迟时间:delay(1000)
自定义动画:animate({width:200,height:200},time,fn)
在原始值基础上进行累计
animate({width:'+=200',height:'+=200'},2000,fn)
切换动画
animate(
{width:'toggle
'},2000,fn)
each方法:$.each(arr,fn(index,item))
$('span').each(fn(index,item))
$(ele).find('span').css({background:url});寻找ele对象下的span标签,并设置css样式
jquery创建节点:$('<li>我是li</li>')
添加节点:append() prepend()
appendTo('.ospan') prependTo() insertAfter('.oli') insertBefore()
$.trim(content)去掉空格判断内容是否有值
删除节点:节点本身来操控
empty() 清空内容
remove() 自身一起删除
克隆事件:clone(true)连事件一起复制;clone(false)不复制事件
获取数组长度 length
获取事件源:event.target
获取事件源名字:event.data.name
阻止事件泡:
1.event.stopPropagation();
2.return false
阻止事件默认行为:
event.preventDefault();
事件自动触发:
$('.box').triggerHandler('click');
事件监听者模式:$('body').on('click','.close',fn)
