web前端技能方法总结(css、js、jquery、html)(10)-阿里云开发者社区

开发者社区> Tobenumberone> 正文

web前端技能方法总结(css、js、jquery、html)(10)

简介: web前端技能方法总结(css、js、jquery、html)
+关注继续查看

hide 隐藏
show 显示
skin 皮肤
code 代码
even 事件
array 数组
integer 整数
veruant 变量
common 公用
switch
case 情况
break 中断整个循环
continue 跳出本次循环
default 不履行/所有情况都不满足的时候走这个
null 没有/空对象
computed 计算后/生效的
eval(JS可以读懂的代码:如‘1+1’->字符串) 这个代码会把()里面的字符串换成计算机读懂的代码来计算 + - * % 都行 (计算用的)
return 返回
write 输入
find 查找

interval 间隔
setInterval(函数名,1000/) 间隔定时器
clearInterval 清除间隔定时器
Timeout 超时
setTimeout 延迟定时器
clearTimeout 清除延迟定时器
obj.disabled 让按钮/变成不可使用
true 不可用
false 可用
date 时间
get 获取
set 设置
Fullyear 满年
month 月 (从0月开始)
day 日 获取需要 date
week 星期 获取需要day (从0到6)
hours 小时
minutes 分钟
seconds 秒
single 一个/一倍
dubble 两个/两倍
triple 三个/三倍

arguments 函数传参-实参的集合
arguments.length 函数传参-实参的长度
arr.push() 向数组最后添加一项
arr.unshift() 向数组前面添加一项
arr.pop()删除数组最后一位.
arr.shift() 删除数组第一位
arr.splice(开始的位置,删除的个数,添加的东西1。。。)
arr.join('') 变字符串 是中间的隔开东西 如- ,空格 等等。。。
arr.concat(arr1,arr2,arr..要拼接的数组...); 数组拼接/合并数组
arr.reverse() 反转/颠倒数组
arr.sort() 数组排序 按照字符串比大小的方法来排序
arr.sort(function(a1,a2){ return a1-a2 //从小到大 return a2-a1 //从大到小 }) a1 a2随便起 代表的是数组中随机的某两项
str.charAt() 字符串里面的下标
str.indexOf(‘’) 下字符串对应的下标数(相同的就取第一个)
str.lastIndexOf(‘’)下字符串对应的下标数(相同的就取最后一个)
str.substring (开始位置,结束位置)/(开始位置-不写结束位置默认就从开始位置到最后) 截取子串
str.toUpperCase() 大写字母
str.toLowerCase() 小写字母
str.split(切割的方式 '-' '' '空格'等) 切割变成数组
str.charCodeAt('a') 输入字符查找对应的编码
String.fromCharCode(编码) 输入编码查找对应的字符
json.name=value; 添加
delete json.name 删除
token 括号
try catch(e) 异常
math.random() 求随机数
parseInt(math.random()(m-n)+n) 求n-m之间随机的整数, 前包括后不包括
math.abs() 求绝对值
math.max(,,,) 求最大值
math.min(,,,) 求最小值
math.pow(n,m) 求n的m次方
math.sqrt(a) 开方
math.PI π
math.ceil(12.3) 向上取整 13
math.floor(12.3) 向下取整 12
math.round(a) 四舍五入
!important Css样式值后面加这个 权重最大
navigator.userAgent UA 例子判断浏览器的类型
navigator.language 语言
navigator.platform 操作系统

Sibling 兄弟
next 下一个
previous 上一个
获取元素/节点:
(父级) obj.children 找:儿子/子级 子节点
(子级) obj.parentNode 找:父亲/父级 父节点
(同级) obj.nextElementSibling || obj.nextSibling 下一个同级/节点 (同级) obj.previousElementSibling || obj.prenviousSibling 上一个同级/节点
(父级) obj.firstElementChild ||obj.firstChild 首节点
(父级) obj.lastElementChild || obj.lastChild 尾节点
创建元素:
document.createElement_x('标签名') 创建元素
添加插入
(父级) obj.appendChild(谁) 往元素里面最后添加一个
带剪切效果
(父级) obj.insertBefore(把谁,加在谁的前面) 往元素里面添加一个
带剪切效果
删除元素:
(父级) obj.removeChild(子级) 删除子级
window.open() 打开
window.close() 关闭
a标签:target=""
不填 默认新页面打开
_blank 新页面打开
_self 本页面打开
window.location 地址栏信息
window.location.href 链接信息
window.location.search 数据信息
window.location.hash 锚点信息
*了解就行 面试背住
window.location.procotol 协议信息
window.location.hostname 域名信息
window.location.port 端口号信息
window.location.pathname 路径信息

back 返回
forward 向前
history 历史
window.history.back 返回历史记录 退
window.history.forward 返回历史记录 前
alert() 弹
confirm 询问提示框
prompt 问答提示框
console.log() 在F12中显示;
document.write(*) 在页面中输入
scroll 滚动 有兼容问题
client 客户端/可视区
offsetHeight/Width 物体盒子模型的宽高
offsetTop/Bottom/方向 物体距上/下/左/右的距离
offsetparent 定位父级
window.onScroll 当滚动的时候 滚动事件
window.onresize 当缩放的时候 缩放事件
onfocus 当获取焦点的时候
onblur 当失去焦点的时候
obj.getAttribute('属性名') 获取属性名对应的属性值
obj.setAttribute('属性名','属性值') 设置属性
obj.removeAttribute('属性名') 删除属性

event 事件
onmousemove 鼠标移动事件
onload 当图片加载完成时
onerror 当图片加载失败时
cancelBubble 取消冒泡
onkeydown 当按键按下的时候
onkeyup 当按键抬起的时候
oEvent.keycode 键盘编码
oncontextmenu 当按右键的时候
return false 阻止浏览器右键菜单
cache 缓存

onmousedown 鼠标按下时
onmouseup 鼠标抬起时
onmousemove 鼠标移动事件
obj.setCapture() 开始捕获
obj.releaseCapture() 取消捕获
obj.cloneNode() 克隆复制一个节点
document/obj.addEventListener('不加on的事件名',函数名,false) 添加事件绑定 兼容高级
document/obj.attachEvent('加on的事件名',函数名) 添加事件绑定 兼容IE系列
document/obj.removeEventListener('不加on的事件名',函数名,false) 解除事件绑定
document/obj.detachEvent('加on的事件名',函数名) 解除事件绑定

onmouseenter 鼠标移入
onmouseleave 鼠标移出
onmousewheel 鼠标滚轮事件
DOMMouseScroll 鼠标滚动事件
oEvent.wheelDelta 非火狐 测试鼠标滚轮向上向下弹得数字
oEvent.detail 火狐 测试鼠标滚轮向上向下弹得数字

return false 阻止浏览器默认事件 但是在事件绑定中失效
oEvent.preventDefoult 在事件绑定中用 阻止浏览器默认事件(如果单独用只兼容高级浏览器)
oninput 当输入的时候 iE9- 没有此方法
onpropertychange 当属性改变的时候 IE系列
oEvent.srcElement 事件源 非火狐
oEvent.target 事件源 高级浏览器

duration 期间
start 开始
count 次数
complete 完成
var bFlag=false/ture 开关 自定义

easing 速度类型:
linear 匀速
ease-in 加速
ease-out 减速
window.onload 页面加载完毕后执行(代码、资源)
DOMReady 页面加载完毕后执行(代码)
DOMContentLoaded DOM加载事件
obj.onreadystatechange 监控事件(模拟DOM加载事件)
readyState 加载状态
document/obj.readyState 加载状态
ondbclick 鼠标双击
queryselector 新的获取元素方法

window.location.reload 重新加载

cookie
expires 期限
session 一个会话(浏览器打开和关闭)
path 路径
define 定义
require 引用其他模块
exports 导出模块
module 批量导出模块,
data-main 主要数据/初始化接口

success 成功
error 失败

Request 请求
ActiveX 浏览器插件
XMLHttpRequest() ajax 创建/ 不兼容ie6-
ActiveXObject('Microsoft.XMLHTTP') 创建/(插件) ie系列

oAjax.open()打开
oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
oAjax.send() 发送
onreadystatechange 接收/当通信状态变化

oAjax.abort() 使中止
oAjax.readyState 是否完成/加载状态
oAjax.status 是否成功
response 回答/响应
oAjax.responseText 返回结果

JSON.parse() 可以把字符串json变成json 不过json要正规些 双引号
JSON.stringify() json打印出来的方法

encode 编码
decode 解码
Component 组件/元件
encodeURIComponent('中文') 中文转化成编码
decodeURIComponent('编码') 编码转化成中文

str.replace 替换
new RegExp() 正则表达式
str.search() 跟indexOf一样 在正则用
str.match 匹配

正则.test(你要校验的str) true 正确满足 false 不满足 用这个的时候一定配合行首和行尾
转译
\d 数字 [0-9]
\w 数字、英文、下划线 [0-9a-z]
\s 空白字符 所有的空白字符
. 代表任意字符
\D 非数字 1
\W 非数字、英文、下划线 2
\S 非空白字符
\u4e00-\u9fa5 中文
量词
{n} n个
{n,m} n-m个
{n,} 最少n个,最多随便
{0,m} 最少随便 最多m个

{1,} 就是 若干个
{0,} 任意个 可以没有
? {0,1} 最少没有 最多1个
\ 转译特殊字符

| 或的意思
i 忽略大小写
g 全局匹配
m 多行模式

^ 行首 如果在方括号里面是除了
$ 行尾
*jq
hide 隐藏
show 显示
toggle 点击
hover 移入
fadeIn 淡入
fadeOut 淡出
animate 运动函数(move)
slideDown 滑动从上往下出来
slideUp 滑动从下往上隐藏
eq(下标) 标签获取的下标
li>a li下面的第一级a
伪类选择器:
li:last li最后一个
li:first li第一个
li:eq(2) 第三个li
obj:even 偶数
obj:odd 奇数
obj:has("p/标签名") 里面包含‘p’这个标签的就会选取
obj:contains("p/内容") 内容有得‘p’ 就都会选取
event/自己起行参名字.pageX X轴坐标
event/自己起行参名字.pageY Y轴坐标
offset().top 物体绝对的位置 ->getPos()函数
offset().left 物体绝对的位置
position().top 物体距定位父级距离 ->offsetTop
position().left 物体距定位父级距离
document.scrollTop 和原生一样
document.scrollLeft 和原生一样
.width/.height 物体本身的宽高
innerHeight/Width 物体内部的宽高 包括padding 不包括边框
outerHeight/Width 物体盒子模型宽高
父级.append(子级) 在父级内的后部追加
父级.prepend(子级) 在父级内的前面追加
子级.appendTo(父级) 在父级后部追加
子级.prependTo(父级) 在父级前部追加
obj1.after(obj2) 把2放在1的后面
obj1.before(obj2) 把2放在1的前面
bind() 事件绑定
unbind() 事件解绑
live() 事件委托
die() 解除事件委托
**以上四种不推荐 因为原理还是昂 所以推荐on
obj.on() 可以事件绑定/委托

each 循环
$.trim() 去除首尾空格

extend() 延伸
height() 就是宽度
innerHeight 包括padding、不包括边框
outerHeight 盒子模型的
offset().left -> getPos()
position().left -> offsetLeft()
scrollTop() -> scrollTop
eve.pageX/Y 坐标
maxlength 表单元素最大长度 属性
$.fn.函数名=function(){} 建立jq封装函数
$.fn.extend({函数名1:function(){},函数名2:function(){},...})

汉字:[0x4e00,0x9fa5](或十进制[19968,40869])
数字:[0x30,0x39](或十进制[48, 57])
小写字母:[0x61,0x7a](或十进制[97, 122])
大写字母:[0x41,0x5a](或十进制[65, 90])
parent() 父级
offsetParent() 定位父级
parents() 所有父级 括号里面可以筛选 比如放class名字或...
str/arr.slice(开始位置,结束位置) 切 从开始到结束 如果只有开始 就从开始到最后。 前包后不包

prototype 原型
form表单中 submit 提交 reset 重置
xxx instanceOf xxx 检测一个对象属于某个类
xxx.constructor==xxx 看构造函数 双等是判断 直接父级属不属于xxx 一个等号是赋值让直接父级等于xxx
fn.call(this的指向,参数一,参数二,....) 改变this的指向 fn中的this=
fn.apply(this的指向,[参数一,参数二,....]) 改变this的指向 fn中的this=
init 开始

localStorage 本地存储
一般的规范
localStorage.name=value 存
localStorage.name 取
delete localStorage.name 删除一条
localStorage.clear() 删除全部
规范的存取
localStorage.setItem(name,value)
localStorage.getItem(name)
localStorage.removeItem(name)
sessionStorage 临时存储 和localStorage一样用法
include() 包含
template.defaults.openTag=''; 自定义模板开始样子
template.defaults.closeTag=''; 自定义模板结束样子
template.config('openTag','')
template.config('closeTag','')
template.config('escape',true/false) true不默认转译 false默认转译

m model 模型
v view 视图
c controller 控制器
scope 范围 作用域
then 然后
model模型
bind绑定
ng-app=""; 引用其他模块
ng-model="" 数据从哪来
ng-bind="" 或 model 或 {{xxx}} 数据到哪去
ng-init 初始化
ng-repeat 循环
angular.module('名字',[依赖模块).controller('名字',function(依赖项){})
$scope
$http
$interval
$timeout
` 反单引号 包住字符串 拼接是这样 ${}

|currency:"" 货币
date:"" 时间戳转化处理
route 路由/状态
filter 过滤器
directive 指令
restrict 类型 E:'element' C:'class' M:'comment' A:'attribute'
service 依赖
oDate.toString() 获取正常时间
creator.ionic.io 做手机端的框架网站不错

ng-show true false 显示 隐藏
ng-hide true false 隐藏 显示
ng-clack
comment 注释
bundle 打包
transclude 嵌入
params 参数
provider 提供者
.config() 配置
$scope.$watch(数据,fn)
template 模板
templateUrl:'模板地址' 模板
$ bower install * 下载东西用的
ReactDOM.render(什么东西,渲染到哪)
type='text/babel'
state 状态
extends 延伸 继承
constructor 创建
super 超类/父类
component 组件
React.Component
this.props.属性
组件中 ref和正常的ID类似

vue
el:'id'
data:{}
$index
capitalize 首字母大写
uppercase 变大写字母
lowercase 变小写字母
ev.stoppropagation() 阻止冒泡
ev.preventDefault() 阻止默认事件 angular
angular.bind(this的指向,要改变指向的函数名,参数)
bootstrap 开启应用模式
copy(复制谁,复制到哪里) 复制/克隆
equals(a,b) 比较
forEach 循环
fromJson 字符串json转化成json
extend(obj,obj1,obj2。。。) 扩展

标签里面属性 transition="名字" 过渡 动画
.名字-
transition 过渡
transition:时间 让谁变/all ease;
enter 进来
leave 出去
route 路由/状态
watch 监控
props 存东西 可在替换模板身上用
Router-view 状态视图
v-link="{path:名字
animation:8s test/名字 linear infinite/数值/次数;
background-size 背景尺寸
contain 以最合适的状态展示 可能会留白
cover 尽可能填满
nth-child(下标 注意:从1开始) 注意:项目不用这个。禁用
nth-of-type(下标 注意:从1开始) 注意:项目不用这个。禁用
background-origin: 背景从哪里开始
content-box
border-box
padding-box
background-clip: 背景从哪里开切
content-box
border-box
padding-box


  1. 0-9
  2. 0-9a-z

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[转帖]ASP.NET 2.0中CSS失效的问题总结
ASP.NET 2.0中CSS失效的问题总结 经常有人遇到ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题,现将主要原因和解决方法罗列如下: 1,CSS文件路径不正确 这个问题属于Web开发中的基础问题,一般采用相对路径会出现这样的问题,或者样式文件写在了母版页里面,在内容页与母版页不在同一级目录下时会出现这样的问题。
626 0
jQuery Ajax应用总结
 (友情提示:本博文章欢迎转载,但请注明出处:陈新汉,http://www.blogjava.net/hankchen)  jQuery提供了简单而强大的选择器功能,同时对Ajax操作也给出了很好的支持。
703 0
Day6:ECS进阶班训练营学习总结
转眼训练营就要结营了,我在这里总结了本次培训学习到的知识点,以及一些学习体会。
298 0
总结CSS3新特性(Animation篇)
动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法:   @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 1...
854 0
前端智能化 2020 年中总结和反思
与大家分享阿里前端在智能化方向上的实践和思考
2954 0
总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。
678 0
CSS垂直居中总结
原文:CSS垂直居中总结   工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享。本文讨论的垂直居中仅支持IE8+   1、使用绝对定位垂直居中 生活不能等待别人来安排,要自已去争取和奋斗; 而不论其结果是喜是悲,但可以慰藉的是,你总不枉在这世界上活了一场。
1077 0
Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观。你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦。
823 0
+关注
Tobenumberone
never say never~
42
文章
60
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载