####★技巧★
####★技巧★
####★技巧★
单词: trigger 触发
####★技巧★ 图片按需加载
$('img.lazy').load();
####★技巧★
fast:600ms
normal:400ms
slow:200ms
####★技巧★
let point = $('.point').get(0)
相当于 point = $('.point')[0]
####★技巧★ css
div[class = input]{ 样式 }
####★技巧★ p标签不能嵌套其他标签
p标签作为最内层的标签
####★技巧★ 注意有没括号 ()
a.height()
####★技巧★ 获取div
let box = $('div')
let box = $(':empty')
let box = $('div:first-child')
####★技巧★
兼容 + webkit
####★技巧★
常改的图片用 img,不改的用背景图片,图片精灵
####★技巧★
wamp
www 目录
把文件放进去
localhost/wui1611/index.html
手机电脑连相同的网
手机输入 192.168.1.1
####★技巧★ 添加类名 移除类名
lis.addClass('active')
lis.removeClass('active')
####★技巧★
<marquee scrolldelay="100">高婧太厉害了666</marquee>
<marquee scrollamount="15" > 给高婧送个别墅(^-^)</marquee>
<marquee>再送辆跑车</marquee>
<marquee scrollamount="30" > 999朵鲜花+一个火箭</marquee>
####★技巧★ 队列
入队 出队
1 2 3 4 5 6 7 8 9 0
####★技巧★
####★技巧★
####★技巧★ 获取$('.box') 注意 . [0]
####★技巧★ CSS布局
height:auto;
高度自动,靠内部元素撑开
####★技巧★ 清除默认行为
$(document).mousedown(false);
####★技巧★ JS移动端调用
/ *UI设计师给的尺寸*/
设计尺寸 设备尺寸 font-size(倍数=设备尺寸÷设计尺寸*100)
750px 375px 7.50rem*倍数 50px
300px 150px 3.0rem*倍数 50px
html{
font-size: 50px;/*(设备尺寸÷设计尺寸*100)*/
}
.box{
width: 2rem ;
height: 2rem;
background: red;
font-size: 12px;
}
##★技巧★ const a = 750; 声明变量
* 值不能改
* 必须同时赋值
const A = 'a' 不能改
const arr = [1,2,3,4] 数组能改
arr.push[5,6,7]
PC端事件会比移动端延迟300ms
click 要比 touch 延迟300ms
## 点透
在box上面放一个 a链接, 点击a链接时,a链接执行跳转,如果长按a链接,再放开,a链接不会跳转
e.toucher
当前事件触发时,屏幕上检测到几个手指头。 记录几个手指头在屏幕上
targetTouches
当前事件触发时,这个元素上检测到几个手指头。 记录几个手指头在元素上
changeToucher
当前事件触发时,几个手指头执行了这个事件。 记录几个手指头涉及到当前事件
### 事件:
* touchstart: //手指放到屏幕上时触发
* touchmove: //手指在屏幕上滑动式触发
* touch
* : //手指离开屏幕时触发
* touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
### 跟踪触摸的属性
* touches: //当前屏幕上所有手指的列表
* targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches
* changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
* `let ev = e.changedTouches[0];`
### 触摸事件的属性
* clientX / clientY: //触摸点相对浏览器窗口的位置
* pageX / pageY: //触摸点相对于页面的位置
* screenX / screenY: //触摸点相对于屏幕的位置
* identifier: //touch对象的ID
* target: //当前的DOM元素
*
## 移动端布局规范:
<header>顶部</header>
<main>主体</main>
<footer>底部</footer>
# Jquery
## 支持链式调用、隐式循环
不停的点下去
##***选择器***
### ancestor descendant
在给定的祖先元素下匹配所有的后代元素
$("form input") 找form下多有的Input
### parent > child
$("form > input") 找form的子元素中的input。input是form的子元素
### prev + next
$("label + input") 找在label后边的input。同级关系
### prev ~ siblings
$("form ~ input") 找与form同辈的所有input.同级关系
### :not(selector)
除selector以外的
$("input:not(:checked)")
### :eq(index) 匹配一个给定索引值的元素 从0开始
$("tr:eq(1)") 查找第二行
### :gt(index) 大于index的 从 0 开始计数
### :lt(index) 从 0 开始计数
$("tr:gt(0)")
### :header 匹配如 h1, h2, h3之类的标题元素
$(":header").css("background", "#EEE");
### :animated 匹配所有正在执行动画效果的元素
###
###
###
###
###
### p标签里没出现过套用p标签
### :first 获取第一个元素
$('li:first'); li必须是ul中的第一个子元素,否则无法获得
### :first-of-type 找同类中的第一个
* 结构化伪类,匹配E的父元素的第一个E类型的孩子。
* 等价于:nth-of-type(1) 选择器
$("span:first-of-type"); 找第一个span。可以不是第一个子元素
###
###
###
###
## 筛选
### 过滤:
$("p").eq(1)
### <1> eq(index|-index) 可以是负数,倒数第一 从0开始
$('li').eq(0) 先选所有的li,再选li中的第一个
$('li').eq(-1) 倒数第一个
### <2> hasClass(class) 是否有指定类名,返回 true // false
$(this).hasClass("protected")
$(this).is('.one') 类名是不是one。返回 true // false
### <3> filter(expr|obj|ele|fn) (字符串\对象\DOM元素\function函数)
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
### <4> is(expr|obj|ele|fn)
其中至少有一个元素符合要求,返回true
### <5> map(callback)
将一组元素转换成其他数组(不论是否是元素数组)
callback:给每个元素执行的函数
let arr=[1,2,3,4];
let result = arr.map(function(value,index){
return value*2;
});
console.log(arr) //[1,2,3,4]
console.log(result) //[5,6,7,8]
### <6> has(expr|ele) 检测包含有特定子元素
保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代,含有匹配后代的对象将得以保留。
$('one').has('span') 检测one下包含span元素
### <7> not(expr|ele|fn) 删掉选中的元素
### <8> slice(start, [end]) 选取一个匹配的子集
$('li').slice(0,2).css('color','red');
### <9> first
### <10> last
## 查找
### <1> children([expr]) 查找子元素
$("div").children() 找到div所有的子元素
$("div").children(".selected") 找div中类名为.selected的子元素
### <2> parent([expr]) 查找指定元素的父元素
$("p").parent() 查找p的父元素
$("p").parent(".selected") 查找p的父元素中类名为selected的父元素。
### <3> parents([expr]) 筛选祖先元素的表达式
$("span").parents() 找span所有的父辈元素
### <4> parentsUntil([expr|element][,filter]) 当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
找某个范围之内的父元素
### <5> offsetParent() 查找最近的具有定位属性的父元素
### <6> next([expr])
$("p").next() 找紧邻p的元素 同级
### <7> nextAll([expr])
### <8> nextUntil([exp|ele][,fil])
### <9> find(expr|obj|ele) 找他里面的子元素
$("p").find("span")
与$("p span")相同。
### <10> closest(expr|object|element) 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
返回0或1个元素。若本身符合,返回本身。
li.closest('div') 找li最近的一个div(从父辈中找)
li.closest('p') 找p,若没有,就找不到
* 事件委派
### <11> prev([expr])
$("p").prev() p前边的一个元素
### <12> prevAll([expr])
查找当前元素之前所有的同辈元素
### <13> prevUntil([exp|ele][,fil])
### <14> $("div").siblings() 找同辈元素
找到每个div的所有同辈元素。 同级当中 除div以外的其他元素
$("div").siblings().slideup(); 收起来
$("div").siblings().slidedown(); 放下
$("div").siblings().slidetoggle(); 与之前状态相反
## 串联
### <1> add(expr|ele|html|obj[,con]) ????????????????????????????????
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
$('li').add('p').css('color','blue'); // 串联属性
原来只选的 li ,对li操作,add后,把li 和 p 一起操作
### <2> andSelf() 已删
### <3> addBack() 添加堆栈中元素集合到当前集合,一个选择性的过滤选择器 ???????????????????????
$('ul').ep(0).next().addBack().css('color','blue')
原来只操作ep(1),加addBack()之后,ep(0)和ep(1)一起操作,把之前的那个也选上。
### <4> contents() 查找匹配元素内部所有的子节点(包括文本节点)。 子元素
相当于 childNodes
### <5> end() 回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
* "破坏性"操作:
'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'
## 事件
### <0> ready(fn)
在DOM加载完成时运行的代码,可以这样写:
$(document).ready(function(){
// 在这里写你的代码...
### <1> button.on('click mouselave',function(){ //事件委派
box.slideToggle();
})
$('box').on('click','li',function(){ //事件委派
$(this).css('background','red');
})
### <2> button.off();//干掉所有事件
button.off('click');//移除掉点击事件
### <3> bind 添加 不支持事件委派 为每个匹配元素的特定事件绑定事件处理函数。
unbind 删 不支持事件委派
点p时,弹出1
$("p").bind("click", function(){
alert( 1);
});
### <4> one 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数
在每个对象上,这个事件处理函数只会被执行一次。
$("p").one("click", function(){ 、、当所有段落被第一次点击的时候,显示所有其文本。
alert( $(this).text() );
});
### <4> trigger() 自动检测到的时候自动触发 集合
### <5> triggerHandler
* li.trigger('click') 所有的li都会执行触发 有浏览器默认行为
* li.triggerHandler('click') 只有第一个li会触发('click') 没有浏览器默认行为
### <6> button.hover(function(){ //事件切换
$(this).css('background','red');
},function(){
$(this).css('background','blue');
})
## 事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn]) 当调整浏览器窗口的大小时,发生 resize 事件。
$(window).resize(function(){
alert("Stop it!");
});
scroll([[data],fn])
select([[data],fn])
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
submit([[data],fn])
当提交表单时,会发生 submit 事件。 该事件只适用于表单元素。
unload([[data],fn])
在当用户离开页面时,会发生 unload 事件。
### <> index() 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
$(this).index(); //当前它的下标
has返回的是不是bull值?
$(this) 打包成JQuery
$() 中可以传(函数 选择器 原生的JQuery/html对象)
$('.one') 是对象
$('.one')
$('.one')
是不同的对象
### <>
### <> ??????????????????????????????????????????????????
### <>
## 属性 ##
attr和prop的区别:
attr --> attribute set get 操作自定义属性
prop --> porptype obj. 操作标准属性
### <1> attr(name|properties|key,value|fn) 操作自定义属性
设置或返回被选元素的属性值。
### <2> prop(name|properties|key,value|fn) 操作标准属性
获取时: 获取它的第一个元素的属性值 获取第一个
设置时: 设置这类所有的元素属性值 设置全部
* 返回属性的值:
$(selector).prop(property)
* 设置属性和值:
$(selector).prop(property,value)
* 使用函数设置属性和值:
$(selector).prop(property,function(index,currentvalue))
* 设置多个属性和值:
$(selector).prop({property:value, property:value,...})
let nowsrc = $(this).find('img').prop('src'); 获取这个的src
picimg.prop('src',nowsrc); 设置src
### <3> removeAttr(name) 删除img的name属性
$("img").removeAttr("src");
### <4> removeProp(name)
## CSS 类
### <1> addClass(class|fn)
$("p").addClass("selected");
box.addClass(function(index,value){
return value + 'one'; //最后输出 class='box boxone'
})
### <2> removeClass([class|fn])
### <3> toggleClass(class|fn[,sw])
如果存在 --> 删除
如果不存在 --> 添加
## HTML代码/文本/值 ?????????????????????????????????????????
### <1> html([val|fn])
### <2> text([val|fn])
### <3> val([val|fn|arr])
## 效果
基本
### <1> show([speed,[easing],[fn]])
speed:slow,normal,fast 1000 毫秒
easing: 默认'swing' linear
function(){}
### <2> hide([s,[e],[fn]])
### <3> toggle([s],[e],[fn])
滑动
### <1> slideDown([s],[e],[fn]) ???????????????????????????????????????????????????????
只调整元素的高度
### <2> slideUp([s,[e],[fn]])
### <3> slideToggle([s],[e],[fn])
淡入淡出
### <1> fadeIn([s],[e],[fn])
### <2> fadeOut([s],[e],[fn])
### <3> fadeTo([[s],o,[e],[fn]])
opacity:一个0至1之间表示透明度的数字。
### <4> fadeToggle([s,[e],[fn]])
自定义
### <1> animate(p,[s],[e],[fn])
box.animate({left:'300',width:'+=400'})
### <2> stop([c],[j])
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
.stop();
begin.click(function(){
box.animate({width:'+=50',left:'+=300'},'slow').animate({top:'+=300'},'slow')
})
stop.click(function(){
box.stop()
// box.stop(true,true)
})
### <3> delay(d,[q])
duration:延时时间,单位:毫秒
queueName:队列名词,默认是Fx,动画队列。
### <4> finish([queue])
停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。
设置
### <1> jQuery.fx.off
开启页面内的动画
### <2> jQuery.fx.interval
设置动画的帧率
## CSS
CSS
### <> css(name|pro|[,val|fn])
### <> jQuery.cssHooks
位置
### <1> offset([coordinates]) 在当前视口的相对偏移
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
### <2> position() 获取位置,只获取
### <3> scrollTop([val])
元素相对滚动条顶部的偏移。
### <4> scrollLeft([val])
尺寸
### <1> height([val|fn]) 获取元素当前计算的高度值(px)。
### <2> width([val|fn]) box的宽 width
$("p").height(); 获取高 获取第一个
$("p").height(20); 设置高 设置所有的高
### <3> innerHeight() box的宽 width + padding
### <4> innerWidth()
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
### <5> outerHeight([soptions])
### <6> outerWidth([options]) width + padding + border
第一个匹配元素外部高度(默认包括补白和边框)。
box.width() //300 box的宽 width
box.innerWidth() //316 box的宽 width + padding
box.outerWidth() //326 box的宽 width + padding + border值
box.outerWidth(true) //426 box的宽 width + padding + border + margin
文档处理
内部插入 --> 子元素
### <1> append(content|fn) 主动往父元素中插入一个子元素 父元素.span(子元素)
let span = $('<span>').html('我是span')
box.append(span)
$('.box').append('<span>直接创建span</span>').css('') css操作的是box.前边的
$('.box').append(function(index,value){
return `<p>函数创建的p</p>`
})
### <2> appendTo(content)
子元素.appendTo(父元素).css('') css操作的是 子元素 前边的
### <3> prepend(content|fn) 用法同上
$('.box').prepend('<span>插入到最前面</span>')
### <4> prependTo(content)
外部插入
### <1> after(content|fn) 在每个匹配的元素之后插入内容。
### <2> before(content|fn) 在每个匹配的元素之前插入内容
box.after($('<h1>插入到后面</h1>'))
box.before($('<h1>插入到前面</h1>'))
### <3> insertAfter(content) 顺序和上面的相反
### <4> insertBefore(content)
$('<h1>插入到前面</h1>').insertBefore(box)
包裹
### <1> wrap(html|ele|fn)
给每个p标签外包一个 div .box
$('p').wrap('.box')
### <2> unwrap()
$('p').unwrap 拆包
### <3> wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来
$('p').wrapAll('<div>')
### <4> wrapInner(html|ele|fn)
$('p').wrapInner('<p>')
替换
### <1>replaceWith(content|fn)
$('p').replaceWith('<span>替换后的内容</span>')
$('p').replaceWith('box')
$('p').replaceWith($('.box'))
### <2>replaceAll(selector)
$('.box').replaceAll($('p')) box被p标签替换
删除
### <> empty() 删除子元素
$("p").empty(); 清空p中所有的子元素
### <> remove([expr]) 删除自己本身
$("p").remove(); 删除p标签 把自己删除
不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
### <> detach([expr])
$("p").detach(); 删除p标签 把自己删除
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
从页面中删除,
区别:把他原有的事件、属性保存下来
复制
### <> clone([Even[,deepEven]])
会把子元素一起克隆过来
lis.clone() 可以把子元素一起复制过来
lis.clone(true) true会把子元素、数据、事件一起克隆过来
把事件一起复制
let clone = lis.clone();
$('ol').append(clone)
拷贝 值 的是 “ 深拷贝 ”
### <> queue
### <> dequeue
// 定义的队列名字。
$(document).queue('myqueue',aa)
$(document).delay(2000,'myqueue').queue('myqueue',bb)
$(document).dequeue('myqueue')
### <>
### <>
### <>
### <> $(document).queue
### <> $('div',box) ??????????????????????????????????????
### <> box.slideToggle();
### <> box.slideUp;
### <> 加下标编程原生对象
$('button');
let mask = $('.mask')[0];
### <> 不加下标,是JQuery
$(this).find(img)[0].src;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1.rem -->
rem是相对于根元素<html>的字体大小
rem是CSS3新引进来的一个度量单位
<!-- 2.视口 -->
视口:就是浏览器显示页面内容的屏幕区域
布局视口:==视觉视口
视觉视口:手机窗口的大小
理想视口:通常是我们说的屏幕分辨率
像素比=物理像素/逻辑像素 iphone6 物理像素750*1334 逻辑像素375*667
<!-- 3.css3 变形 -->
transform:
旋转rotate(30deg) 顺时针旋转30度
斜切skew(30deg,0deg) 水平方向上倾斜30度,垂直方向保持不变
缩放scale(0.8,1) 水平方向上缩小了20%,垂直方向上不缩放
移动translate(50px,50px) 水平方向和垂直方向上分别垂直移动50像素
<!-- 4.css3 动画 -->
@keyframes
@keyframes mymove{
from {top:0px;}
to {top:200px;}
}
@keyframes mymove{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
animation animation 属性是一个简写属性,用于设置六个动画属性
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间,以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画
<!-- 5.响应式 @melia -->
当屏幕尺寸小于600px时,应用下面的CSS样式
screen 是媒体类型里的一种
and 为关键字
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
<!-- 6.css3 背景 -->
background-size 属性规定背景图片的尺寸
background-origin 属性规定背景图片的定位区域
background-clip 规定背景的绘制区域
<!-- 7.css3 阴影 -->
box-shadow 添加一个或多个阴影
h-shadow 水平阴影的位置 可以是负值
v-shadow 垂直阴影的位置 可以是负值
blur 模糊距离
spread 阴影的尺寸
color 阴影的颜色
inset 将外部阴影 (outset) 改为内部阴影
<!-- 8.aodiu -->
属性:
autoplay 如果出现该属性,则音频在就绪后马上播放
controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop 如果出现该属性,则每当音频结束时重新开始播放
preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
src url 要播放的音频的 URL
方法:
canPlayType() 检查浏览器是否能够播放指定的音频类型
fastSeek() 在音频播放器中指定播放时间
getStartDate() 返回新的 Date 对象,表示当前时间线偏移量
load() 重新加载音频元素
play() 开始播放音频
pause() 暂停当前播放的音频
requestFullscreen() 全屏
document.exitFullscreen 退出全屏
<!-- 9.canvas -->
var ctx=c.getContext("2d"); 绘图环境
属性:
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法:
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径,或重置当前路径
moveTo() 把路径移动到画布中的指定点,不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
<!-- 10.事件 -->
事件:侦测到用户的一些操作
事件源:事件发生在谁身上
事件处理程序:对事件处理的函数
事件对象:记录事件发生时的一些信息
获取事件对象:e||window.event
事件流:页面中的一个元素事件触发时,整个页面都会按照特定是的顺序响应该元素的触发事件
事件流分类:
冒泡型:明确->不明确 依次向上触发 false
捕获型:相反 true
阻止事件流:事件对象.stopPropagation();
获取事件源的对象:事件对象.target
阻止浏览器默认行为:事件对象.preventDefault();
<!-- 11.Dom -->
对元素的样式 内容 属性 的操作
方法: 获取元素的4种
<!-- 12.数据类型 -->
变量可以是任意的数据类型
初始类型:
String Number undefined null boolean
引用类型:
Object
<!-- 13.链式调用 隐式循环 -->
链式调用:返回的是jquery对象才可以链式调用
隐式循环:在方法的内部会把匹配到的元素进行遍历
<!-- 14.闭包 -->
函数发生嵌套 内部函数访问外部变量并返回内部函数 当调用这个函数时就发生了闭包
</body>
</html>
<script>
375 物理像素
逻辑像素 --> 设计尺寸
视口
</script>
####★技巧★
####★技巧★
####★技巧★
单词: trigger 触发
####★技巧★ 图片按需加载
$('img.lazy').load();
####★技巧★
fast:600ms
normal:400ms
slow:200ms
####★技巧★
let point = $('.point').get(0)
相当于 point = $('.point')[0]
####★技巧★ css
div[class = input]{ 样式 }
####★技巧★ p标签不能嵌套其他标签
p标签作为最内层的标签
####★技巧★ 注意有没括号 ()
a.height()
####★技巧★ 获取div
let box = $('div')
let box = $(':empty')
let box = $('div:first-child')
####★技巧★
兼容 + webkit
####★技巧★
常改的图片用 img,不改的用背景图片,图片精灵
####★技巧★
wamp
www 目录
把文件放进去
localhost/wui1611/index.html
手机电脑连相同的网
手机输入 192.168.1.1
####★技巧★ 添加类名 移除类名
lis.addClass('active')
lis.removeClass('active')
####★技巧★
<marquee scrolldelay="100">高婧太厉害了666</marquee>
<marquee scrollamount="15" > 给高婧送个别墅(^-^)</marquee>
<marquee>再送辆跑车</marquee>
<marquee scrollamount="30" > 999朵鲜花+一个火箭</marquee>
####★技巧★ 队列
入队 出队
1 2 3 4 5 6 7 8 9 0
####★技巧★
####★技巧★
####★技巧★ 获取$('.box') 注意 . [0]
####★技巧★ CSS布局
height:auto;
高度自动,靠内部元素撑开
####★技巧★ 清除默认行为
$(document).mousedown(false);
####★技巧★ JS移动端调用
/ *UI设计师给的尺寸*/
设计尺寸 设备尺寸 font-size(倍数=设备尺寸÷设计尺寸*100)
750px 375px 7.50rem*倍数 50px
300px 150px 3.0rem*倍数 50px
html{
font-size: 50px;/*(设备尺寸÷设计尺寸*100)*/
}
.box{
width: 2rem ;
height: 2rem;
background: red;
font-size: 12px;
}
##★技巧★ const a = 750; 声明变量
* 值不能改
* 必须同时赋值
const A = 'a' 不能改
const arr = [1,2,3,4] 数组能改
arr.push[5,6,7]
PC端事件会比移动端延迟300ms
click 要比 touch 延迟300ms
## 点透
在box上面放一个 a链接, 点击a链接时,a链接执行跳转,如果长按a链接,再放开,a链接不会跳转
e.toucher
当前事件触发时,屏幕上检测到几个手指头。 记录几个手指头在屏幕上
targetTouches
当前事件触发时,这个元素上检测到几个手指头。 记录几个手指头在元素上
changeToucher
当前事件触发时,几个手指头执行了这个事件。 记录几个手指头涉及到当前事件
### 事件:
* touchstart: //手指放到屏幕上时触发
* touchmove: //手指在屏幕上滑动式触发
* touch
* : //手指离开屏幕时触发
* touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
### 跟踪触摸的属性
* touches: //当前屏幕上所有手指的列表
* targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches
* changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
* `let ev = e.changedTouches[0];`
### 触摸事件的属性
* clientX / clientY: //触摸点相对浏览器窗口的位置
* pageX / pageY: //触摸点相对于页面的位置
* screenX / screenY: //触摸点相对于屏幕的位置
* identifier: //touch对象的ID
* target: //当前的DOM元素
*
## 移动端布局规范:
<header>顶部</header>
<main>主体</main>
<footer>底部</footer>
# Jquery
## 支持链式调用、隐式循环
不停的点下去
##***选择器***
### ancestor descendant
在给定的祖先元素下匹配所有的后代元素
$("form input") 找form下多有的Input
### parent > child
$("form > input") 找form的子元素中的input。input是form的子元素
### prev + next
$("label + input") 找在label后边的input。同级关系
### prev ~ siblings
$("form ~ input") 找与form同辈的所有input.同级关系
### :not(selector)
除selector以外的
$("input:not(:checked)")
### :eq(index) 匹配一个给定索引值的元素 从0开始
$("tr:eq(1)") 查找第二行
### :gt(index) 大于index的 从 0 开始计数
### :lt(index) 从 0 开始计数
$("tr:gt(0)")
### :header 匹配如 h1, h2, h3之类的标题元素
$(":header").css("background", "#EEE");
### :animated 匹配所有正在执行动画效果的元素
###
###
###
###
###
### p标签里没出现过套用p标签
### :first 获取第一个元素
$('li:first'); li必须是ul中的第一个子元素,否则无法获得
### :first-of-type 找同类中的第一个
* 结构化伪类,匹配E的父元素的第一个E类型的孩子。
* 等价于:nth-of-type(1) 选择器
$("span:first-of-type"); 找第一个span。可以不是第一个子元素
###
###
###
###
## 筛选
### 过滤:
$("p").eq(1)
### <1> eq(index|-index) 可以是负数,倒数第一 从0开始
$('li').eq(0) 先选所有的li,再选li中的第一个
$('li').eq(-1) 倒数第一个
### <2> hasClass(class) 是否有指定类名,返回 true // false
$(this).hasClass("protected")
$(this).is('.one') 类名是不是one。返回 true // false
### <3> filter(expr|obj|ele|fn) (字符串\对象\DOM元素\function函数)
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
### <4> is(expr|obj|ele|fn)
其中至少有一个元素符合要求,返回true
### <5> map(callback)
将一组元素转换成其他数组(不论是否是元素数组)
callback:给每个元素执行的函数
let arr=[1,2,3,4];
let result = arr.map(function(value,index){
return value*2;
});
console.log(arr) //[1,2,3,4]
console.log(result) //[5,6,7,8]
### <6> has(expr|ele) 检测包含有特定子元素
保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代,含有匹配后代的对象将得以保留。
$('one').has('span') 检测one下包含span元素
### <7> not(expr|ele|fn) 删掉选中的元素
### <8> slice(start, [end]) 选取一个匹配的子集
$('li').slice(0,2).css('color','red');
### <9> first
### <10> last
## 查找
### <1> children([expr]) 查找子元素
$("div").children() 找到div所有的子元素
$("div").children(".selected") 找div中类名为.selected的子元素
### <2> parent([expr]) 查找指定元素的父元素
$("p").parent() 查找p的父元素
$("p").parent(".selected") 查找p的父元素中类名为selected的父元素。
### <3> parents([expr]) 筛选祖先元素的表达式
$("span").parents() 找span所有的父辈元素
### <4> parentsUntil([expr|element][,filter]) 当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
找某个范围之内的父元素
### <5> offsetParent() 查找最近的具有定位属性的父元素
### <6> next([expr])
$("p").next() 找紧邻p的元素 同级
### <7> nextAll([expr])
### <8> nextUntil([exp|ele][,fil])
### <9> find(expr|obj|ele) 找他里面的子元素
$("p").find("span")
与$("p span")相同。
### <10> closest(expr|object|element) 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
返回0或1个元素。若本身符合,返回本身。
li.closest('div') 找li最近的一个div(从父辈中找)
li.closest('p') 找p,若没有,就找不到
* 事件委派
### <11> prev([expr])
$("p").prev() p前边的一个元素
### <12> prevAll([expr])
查找当前元素之前所有的同辈元素
### <13> prevUntil([exp|ele][,fil])
### <14> $("div").siblings() 找同辈元素
找到每个div的所有同辈元素。 同级当中 除div以外的其他元素
$("div").siblings().slideup(); 收起来
$("div").siblings().slidedown(); 放下
$("div").siblings().slidetoggle(); 与之前状态相反
## 串联
### <1> add(expr|ele|html|obj[,con]) ????????????????????????????????
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
$('li').add('p').css('color','blue'); // 串联属性
原来只选的 li ,对li操作,add后,把li 和 p 一起操作
### <2> andSelf() 已删
### <3> addBack() 添加堆栈中元素集合到当前集合,一个选择性的过滤选择器 ???????????????????????
$('ul').ep(0).next().addBack().css('color','blue')
原来只操作ep(1),加addBack()之后,ep(0)和ep(1)一起操作,把之前的那个也选上。
### <4> contents() 查找匹配元素内部所有的子节点(包括文本节点)。 子元素
相当于 childNodes
### <5> end() 回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
* "破坏性"操作:
'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'
## 事件
### <0> ready(fn)
在DOM加载完成时运行的代码,可以这样写:
$(document).ready(function(){
// 在这里写你的代码...
### <1> button.on('click mouselave',function(){ //事件委派
box.slideToggle();
})
$('box').on('click','li',function(){ //事件委派
$(this).css('background','red');
})
### <2> button.off();//干掉所有事件
button.off('click');//移除掉点击事件
### <3> bind 添加 不支持事件委派 为每个匹配元素的特定事件绑定事件处理函数。
unbind 删 不支持事件委派
点p时,弹出1
$("p").bind("click", function(){
alert( 1);
});
### <4> one 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数
在每个对象上,这个事件处理函数只会被执行一次。
$("p").one("click", function(){ 、、当所有段落被第一次点击的时候,显示所有其文本。
alert( $(this).text() );
});
### <4> trigger() 自动检测到的时候自动触发 集合
### <5> triggerHandler
* li.trigger('click') 所有的li都会执行触发 有浏览器默认行为
* li.triggerHandler('click') 只有第一个li会触发('click') 没有浏览器默认行为
### <6> button.hover(function(){ //事件切换
$(this).css('background','red');
},function(){
$(this).css('background','blue');
})
## 事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn]) 当调整浏览器窗口的大小时,发生 resize 事件。
$(window).resize(function(){
alert("Stop it!");
});
scroll([[data],fn])
select([[data],fn])
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
submit([[data],fn])
当提交表单时,会发生 submit 事件。 该事件只适用于表单元素。
unload([[data],fn])
在当用户离开页面时,会发生 unload 事件。
### <> index() 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
$(this).index(); //当前它的下标
has返回的是不是bull值?
$(this) 打包成JQuery
$() 中可以传(函数 选择器 原生的JQuery/html对象)
$('.one') 是对象
$('.one')
$('.one')
是不同的对象
### <>
### <> ??????????????????????????????????????????????????
### <>
## 属性 ##
attr和prop的区别:
attr --> attribute set get 操作自定义属性
prop --> porptype obj. 操作标准属性
### <1> attr(name|properties|key,value|fn) 操作自定义属性
设置或返回被选元素的属性值。
### <2> prop(name|properties|key,value|fn) 操作标准属性
获取时: 获取它的第一个元素的属性值 获取第一个
设置时: 设置这类所有的元素属性值 设置全部
* 返回属性的值:
$(selector).prop(property)
* 设置属性和值:
$(selector).prop(property,value)
* 使用函数设置属性和值:
$(selector).prop(property,function(index,currentvalue))
* 设置多个属性和值:
$(selector).prop({property:value, property:value,...})
let nowsrc = $(this).find('img').prop('src'); 获取这个的src
picimg.prop('src',nowsrc); 设置src
### <3> removeAttr(name) 删除img的name属性
$("img").removeAttr("src");
### <4> removeProp(name)
## CSS 类
### <1> addClass(class|fn)
$("p").addClass("selected");
box.addClass(function(index,value){
return value + 'one'; //最后输出 class='box boxone'
})
### <2> removeClass([class|fn])
### <3> toggleClass(class|fn[,sw])
如果存在 --> 删除
如果不存在 --> 添加
## HTML代码/文本/值 ?????????????????????????????????????????
### <1> html([val|fn])
### <2> text([val|fn])
### <3> val([val|fn|arr])
## 效果
基本
### <1> show([speed,[easing],[fn]])
speed:slow,normal,fast 1000 毫秒
easing: 默认'swing' linear
function(){}
### <2> hide([s,[e],[fn]])
### <3> toggle([s],[e],[fn])
滑动
### <1> slideDown([s],[e],[fn]) ???????????????????????????????????????????????????????
只调整元素的高度
### <2> slideUp([s,[e],[fn]])
### <3> slideToggle([s],[e],[fn])
淡入淡出
### <1> fadeIn([s],[e],[fn])
### <2> fadeOut([s],[e],[fn])
### <3> fadeTo([[s],o,[e],[fn]])
opacity:一个0至1之间表示透明度的数字。
### <4> fadeToggle([s,[e],[fn]])
自定义
### <1> animate(p,[s],[e],[fn])
box.animate({left:'300',width:'+=400'})
### <2> stop([c],[j])
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
.stop();
begin.click(function(){
box.animate({width:'+=50',left:'+=300'},'slow').animate({top:'+=300'},'slow')
})
stop.click(function(){
box.stop()
// box.stop(true,true)
})
### <3> delay(d,[q])
duration:延时时间,单位:毫秒
queueName:队列名词,默认是Fx,动画队列。
### <4> finish([queue])
停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。
设置
### <1> jQuery.fx.off
开启页面内的动画
### <2> jQuery.fx.interval
设置动画的帧率
## CSS
CSS
### <> css(name|pro|[,val|fn])
### <> jQuery.cssHooks
位置
### <1> offset([coordinates]) 在当前视口的相对偏移
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
### <2> position() 获取位置,只获取
### <3> scrollTop([val])
元素相对滚动条顶部的偏移。
### <4> scrollLeft([val])
尺寸
### <1> height([val|fn]) 获取元素当前计算的高度值(px)。
### <2> width([val|fn]) box的宽 width
$("p").height(); 获取高 获取第一个
$("p").height(20); 设置高 设置所有的高
### <3> innerHeight() box的宽 width + padding
### <4> innerWidth()
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
### <5> outerHeight([soptions])
### <6> outerWidth([options]) width + padding + border
第一个匹配元素外部高度(默认包括补白和边框)。
box.width() //300 box的宽 width
box.innerWidth() //316 box的宽 width + padding
box.outerWidth() //326 box的宽 width + padding + border值
box.outerWidth(true) //426 box的宽 width + padding + border + margin
文档处理
内部插入 --> 子元素
### <1> append(content|fn) 主动往父元素中插入一个子元素 父元素.span(子元素)
let span = $('<span>').html('我是span')
box.append(span)
$('.box').append('<span>直接创建span</span>').css('') css操作的是box.前边的
$('.box').append(function(index,value){
return `<p>函数创建的p</p>`
})
### <2> appendTo(content)
子元素.appendTo(父元素).css('') css操作的是 子元素 前边的
### <3> prepend(content|fn) 用法同上
$('.box').prepend('<span>插入到最前面</span>')
### <4> prependTo(content)
外部插入
### <1> after(content|fn) 在每个匹配的元素之后插入内容。
### <2> before(content|fn) 在每个匹配的元素之前插入内容
box.after($('<h1>插入到后面</h1>'))
box.before($('<h1>插入到前面</h1>'))
### <3> insertAfter(content) 顺序和上面的相反
### <4> insertBefore(content)
$('<h1>插入到前面</h1>').insertBefore(box)
包裹
### <1> wrap(html|ele|fn)
给每个p标签外包一个 div .box
$('p').wrap('.box')
### <2> unwrap()
$('p').unwrap 拆包
### <3> wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来
$('p').wrapAll('<div>')
### <4> wrapInner(html|ele|fn)
$('p').wrapInner('<p>')
替换
### <1>replaceWith(content|fn)
$('p').replaceWith('<span>替换后的内容</span>')
$('p').replaceWith('box')
$('p').replaceWith($('.box'))
### <2>replaceAll(selector)
$('.box').replaceAll($('p')) box被p标签替换
删除
### <> empty() 删除子元素
$("p").empty(); 清空p中所有的子元素
### <> remove([expr]) 删除自己本身
$("p").remove(); 删除p标签 把自己删除
不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
### <> detach([expr])
$("p").detach(); 删除p标签 把自己删除
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
从页面中删除,
区别:把他原有的事件、属性保存下来
复制
### <> clone([Even[,deepEven]])
会把子元素一起克隆过来
lis.clone() 可以把子元素一起复制过来
lis.clone(true) true会把子元素、数据、事件一起克隆过来
把事件一起复制
let clone = lis.clone();
$('ol').append(clone)
拷贝 值 的是 “ 深拷贝 ”
### <> queue
### <> dequeue
// 定义的队列名字。
$(document).queue('myqueue',aa)
$(document).delay(2000,'myqueue').queue('myqueue',bb)
$(document).dequeue('myqueue')
### <>
### <>
### <>
### <> $(document).queue
### <> $('div',box) ??????????????????????????????????????
### <> box.slideToggle();
### <> box.slideUp;
### <> 加下标编程原生对象
$('button');
let mask = $('.mask')[0];
### <> 不加下标,是JQuery
$(this).find(img)[0].src;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1.rem -->
rem是相对于根元素<html>的字体大小
rem是CSS3新引进来的一个度量单位
<!-- 2.视口 -->
视口:就是浏览器显示页面内容的屏幕区域
布局视口:==视觉视口
视觉视口:手机窗口的大小
理想视口:通常是我们说的屏幕分辨率
像素比=物理像素/逻辑像素 iphone6 物理像素750*1334 逻辑像素375*667
<!-- 3.css3 变形 -->
transform:
旋转rotate(30deg) 顺时针旋转30度
斜切skew(30deg,0deg) 水平方向上倾斜30度,垂直方向保持不变
缩放scale(0.8,1) 水平方向上缩小了20%,垂直方向上不缩放
移动translate(50px,50px) 水平方向和垂直方向上分别垂直移动50像素
<!-- 4.css3 动画 -->
@keyframes
@keyframes mymove{
from {top:0px;}
to {top:200px;}
}
@keyframes mymove{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
animation animation 属性是一个简写属性,用于设置六个动画属性
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间,以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画
<!-- 5.响应式 @melia -->
当屏幕尺寸小于600px时,应用下面的CSS样式
screen 是媒体类型里的一种
and 为关键字
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
<!-- 6.css3 背景 -->
background-size 属性规定背景图片的尺寸
background-origin 属性规定背景图片的定位区域
background-clip 规定背景的绘制区域
<!-- 7.css3 阴影 -->
box-shadow 添加一个或多个阴影
h-shadow 水平阴影的位置 可以是负值
v-shadow 垂直阴影的位置 可以是负值
blur 模糊距离
spread 阴影的尺寸
color 阴影的颜色
inset 将外部阴影 (outset) 改为内部阴影
<!-- 8.aodiu -->
属性:
autoplay 如果出现该属性,则音频在就绪后马上播放
controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop 如果出现该属性,则每当音频结束时重新开始播放
preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
src url 要播放的音频的 URL
方法:
canPlayType() 检查浏览器是否能够播放指定的音频类型
fastSeek() 在音频播放器中指定播放时间
getStartDate() 返回新的 Date 对象,表示当前时间线偏移量
load() 重新加载音频元素
play() 开始播放音频
pause() 暂停当前播放的音频
requestFullscreen() 全屏
document.exitFullscreen 退出全屏
<!-- 9.canvas -->
var ctx=c.getContext("2d"); 绘图环境
属性:
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法:
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径,或重置当前路径
moveTo() 把路径移动到画布中的指定点,不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
<!-- 10.事件 -->
事件:侦测到用户的一些操作
事件源:事件发生在谁身上
事件处理程序:对事件处理的函数
事件对象:记录事件发生时的一些信息
获取事件对象:e||window.event
事件流:页面中的一个元素事件触发时,整个页面都会按照特定是的顺序响应该元素的触发事件
事件流分类:
冒泡型:明确->不明确 依次向上触发 false
捕获型:相反 true
阻止事件流:事件对象.stopPropagation();
获取事件源的对象:事件对象.target
阻止浏览器默认行为:事件对象.preventDefault();
<!-- 11.Dom -->
对元素的样式 内容 属性 的操作
方法: 获取元素的4种
<!-- 12.数据类型 -->
变量可以是任意的数据类型
初始类型:
String Number undefined null boolean
引用类型:
Object
<!-- 13.链式调用 隐式循环 -->
链式调用:返回的是jquery对象才可以链式调用
隐式循环:在方法的内部会把匹配到的元素进行遍历
<!-- 14.闭包 -->
函数发生嵌套 内部函数访问外部变量并返回内部函数 当调用这个函数时就发生了闭包
</body>
</html>
<script>
375 物理像素
逻辑像素 --> 设计尺寸
视口
</script>