DOM与JQuery 常用属性

Posted 2020-09-27 党欣彤

DOM 与 JQuery 与 HTML5

---

事件

DOM：

document.getElementById(‘btn ‘).onclick = function(){ };

jQuery：

$(‘#btn‘).click(function(){ });  ---> 添加事件没有on

对象.事件名(匿名函数);

 

jQuery对象转DOM对象

jQuery对象[0].value();

jQuery对象.get(0).value();

 

this

this     $(this)

 

获取值

DOM：

.value=""

jQuery：

.val() ---> 写内容是设置，没写是获取

     ---> 设置value方法中的值，进行下拉框元素选中

     ---> 改变文本域内容，页面改了，控制台没改

 

动态添加属性

DOM：（自定义属性是广义上的）

setAtrribute("属性名","属性值") ---> 为元素动态添加属性

getAtrribute("属性名") ---> 获取属性值

removeAtrribute("属性名") ---> 移除元素的属性和值

jQuery：

.attr("属性名","属性值" )  --->设置，获取只有一个参数（"属性名"）

html5：（自定义属性是狭义上的）

标签中设置 data-前缀  格式：data-info="属性名"

setAtrribute(‘data-abc‘) --->设置自定义属性 

通过dataset 获取以data-开头的属性（获取的时候转成驼峰方式  dataset.myName）

 

 

设置类样式

DOM：

对象 .style.属性名 = ‘属性值‘;

对象 .className = "类样式名字"  --->样式多时使用

jQuery：

.css(‘属性名‘,‘属性值‘);

.addClass("cls1  cls2") ---> 添加类样式  ---> 样式多时使用

.removeClass("cls1  cls2") ---> 移除元素类样式

.hasClass()  ---判断元素是否应用了某个类样式

.toggleClass()  ------切换类样式(有则去掉，无则添加)

HTML5:

classList.add() --->添加一个类名，类似于jQuery中 addClass()

classList.remove() -->移除一个类，类似于 removeClass()

classList.contains() --->表示是否包含某个类名，类似于hasClass();

classList.toggle() --->表示切换某个类名，类似于toggleClass()

 

设置文字内容

DOM：

.innerText --->获取元素中的单纯文字内容

.innerHTMl ---> 获取元素中的标签 + 文字内容（进行拼接创建元素）

.setInnerText ("属性名","属性值") ---> 设置文字内容

.getInnerText ("属性名") ---> 获取文字内容

jQuery：

.text() --->写内容是设置，没写是获取

.html()  ---> 写内容是设置，没写是获取

 

元素显示/隐藏

DOM：

.style.display = "none"; //不占位  block

.style.opacity = 0;  //占位   opacity = 1

.style.visibility = "hidden";  //占位

jQuery：

show() ---> 显示

hide() ---> 隐藏

slideUp() ---> 滑出

slideDown() ---> 滑入

slideToggle() ---> 切换滑入和滑出

fadeIn() ---> 淡入

fadeOut() ---> 淡出

fadeToggle() ---> 淡入淡出

fadeTo() ---> 设置在多长时间把透明度降低或设置为多少

 

添加子元素

DOM：

父级元素.appendChild(子级元素) ---> 追加子元素

 

对象.insetBefore(新元素，参照元素) ---> 插入元素之前

replaceChild() ---> 替换

jQuery：

子元素.appendTo(父级元素)

父级元素.append(子级元素)

 

prepend() ---> 追加到子元素的做前面

before() ---> 添加到当前元素的前面，作为兄弟元素

after() ---> 添加到当前元素后面

 

移除元素

DOM：

父级元素.removeChild(子级元素) ---> 移除子元素

jQuery：

.html("") ---> 占空间（清空当前元素中的内容）

.empty() ---> 清空的更干净 （常用）

.remove() ---> 清空自己

 

查找元素

DOM：

.children  父级元素中所有的子元素

 

.firstChild----->获取某个元素的第一个子节点

.firstElementChild----->获取某个元素中的第一个子元素

.LastChild ----->获取某个元素的最后一个子节点

.LastElementChild ----->获取某个元素的最后一个子元素

.previousSibling-----> 获取元素前一个兄弟节点

.previousElementSibling-----> 获取元素前一个兄弟元素   .nextSibling---->获取元素下一个兄弟节点

.nextElementSibing----->获取元素下一个兄弟元素

jQuery：

find()  ---> 查找某个元素

siblings ---> 获取兄弟元素

next() ---> 获取当前元素的下一个兄弟元素

nextAll() ---> 获取当前元素后面所有的兄弟元素

prev() ---> 获取当前元素的上一个兄弟元素

prevAll() ---> 获取当前元素前面所有的兄弟元素

 

绑定事件

DOM：   

(1) 对象.addEventListener("事件类型(没有on)","函数","事件捕获(false)") --->  谷歌和火狐支持，IE8不支持，IE11支持

例：my$（"btn"）.addEventListener("click",function(){ },false);

 

(2) 对象.attachevent("on+事件类型","函数") ---> 谷歌和火狐不支持，IE8支持，IE11不支持

 

例：my$（"btn"）.attachEvent("on"+"click",function() { });

jQuery：

.bind() 绑定事件---第一个参数是事件，第二个参数是回调函数

 

.delegate() --- 找到父级元素为子元素绑定事件（通过代理的方式绑定事件）----第一个参数是子元素，第二个参数是事件，第三个参数是回调函数

 

.on() -- 第一个参数是事件，第二个参数是子元素 ，第三个参数是回调函数 --->事件冒泡

 

 

解绑事件

DOM：

对象 .removeEventListener()

对象.detachEvent()

jQuery：

.unbind()

.undelegate() --- 第一个参数是子元素，第二个参数是事件

 

.off() --- 第一个参数是事件，第二个参数是子元素 -->事件冒泡，子元素解绑，父元素不解绑

 

 

页面加载事件

DOM：

 window.onload = function( ){ }; -->会覆盖，页面中所有的内容全部加载完后才触发

jQuery： 不会覆盖  

 $(window).load(function( ){ }); ---> 页面中所有的内容全部加载完后才触发

 $(function( ){ }); ---> 页面基本的DOM元素加载完后就可以触发

 

 

判断是奇数和偶数

DOM：   

if--else语句判断

jQuery： 

$("标签名:odd") --->奇数（索引从0开始）

$("标签名:even") ---> 偶数

 

 

获取索引 

DOM：

.index()

jQuery：

$("标签名:eq("+this.index()+")")

.eq($(this).index())

$(this).index() --->获取当前元素的索引

 

克隆

.clone(true/false) --> true(可以克隆样式)  false(样式克隆不过来)

 

动态创建元素

DOM：

1.document.write("标签代码-->html代码");

2.对象.innerHtml="";

3.document.createElement("标签名");  创建元素，返回对象

jQuery：

1.$("html标签") ---返回的是对象

2.对象.html("html标签")

 

获取元素

DOM：

document.getElementById()

document.getElementsByTagName() 

HTML5：

document.querySelector(); --->获取选择器中的第一个

document.querySelectorAll(); --->伪数组（需要循环遍历）

 

循环遍历

$.each(info,function(index,element){})--->循环（隐式迭代）

 

对象.forEach(function(element,index)) -->forEach（循环）是ES5的新特性