前端常用单词 听写

粗细 font-weight:bold;(粗体) lighter;(细体) normal;(正常)

修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线)

行高line-height:normal;

常用字体:(font-family)

背景属性: (background)

色彩background-color:#FFFFFF;
图片background-image:url();
重复background-repeat:no-repeat;

位置background-position:left(水平) top(垂直);

简写方法 background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
区块属性: (Block)

垂直对齐vertical-align:baseline;(基线) sub;(下标) super;(下标) top; text-top; middle;bottom; text-bottom;

显示display:block;(块) inline;(内嵌)inline- block;none;table-cell

定位属性: (Position)

Position: absolute; relative; static; sticky;fixed;

获取元素

1 document.getElementById(“div1”) 通过id名获得元素,获得的元素是唯一的.
2. document.getElementsByTagName(“p”) 通过标签名获得一组元素
3. document.getElementsByClassName(“a”) 通过类名获得一组元素,IE6-IE8不兼容

5. document.querySelector(".p1"); 通过选择器获取一个元素——移动端
6. document.querySelectorAll(“ul>li”);通过选择器获取一组元素——移动端

创建元素

innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点)

document.createElement(); 用得也比较多,指定数量的时候一般用它。

document.createTextNode('hahaha'); 方法创建新的文本节点,返回新创建的 Text 节点。

document.cloneNode()克隆节点。

删除元素

removeChild()方法用来删除一个子节点。

aItem3.remove();删除自身,没有返回值;

aItem3.outerHTML ='';将aItem3变为空

替换元素

A.replaceChild(new,old);说明:A表示父元素,new表示新子元素,old表示旧子元素。

aItem3.outerHTML ='<h2>aaa</h2>';将aItem3替换为<h2>aaa</h2>

替换节点:$(‘div’).repalceWith(‘<span>DOM</span>’);//将div替换为span    ==  $(‘<span>DOM</span>’).repalceAll(‘div’)

特征控制

getAttribute("id") 获取

hasAttribute('class') 判断

setAttribute('id') 设置

reMoveAttribute('id') 移除

attributes (只读) 所有特征的集合

兄弟节点

nextElementSibling

previouselementSibling

添加元素

appendChild()

概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加。

 insertBefore()

概念:把要插入的节点添加到指定父级里面的指定节点之前。

元素大小

offsetParent:获取最近的定位的父级元素或者td标签,如果没有直接body

offsetWidth,Height:获取元素的宽高(content,padding,border)

clientWidth | Height:元素的内容宽高content、padding(不包含滚动条)

scrollWidth | Height:内容区域的宽高content(包含溢出&隐藏内容)

坐标获取

相对于窗口 clientX/clientY

相对于文档 pageX/pageY

elem.getBoundingClientRect()

正则方法和字符串方法

str.match(regexp) 捕获

str.matchAll(regexp)捕获全部

str.split(regexpsubstr,limit) 切割

str.search(regexp) 返回索引值

str.replace(str|regexp,str|func) 替换

 

 

定时器

setTimeout:设置执行的时间

setInterval:隔多少秒执行一次

 

 

断言

前置断言---x(?=y)---匹配x,仅在后面是y的情况

前置否定断言---x(?!y)---在不被y 跟随的情况下匹配成功

后置断言---(?<=y)x---匹配x,仅在前面是y的情况下

后置否定断言---(?<!y)x---匹配x,在仅在前面不是y的情况

正向零宽断言---(?=x)xy---匹配xy,当x在y前

负向零宽断言---xy(?xy)

 

上一篇:用一张图片实现按钮按下和普通效果的样式


下一篇:匈牙利算法