粗细 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)