首页 > 代码库 > DOM与JQuery 常用属性

DOM与JQuery 常用属性

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的新特性
 
 
 
                       

DOM与JQuery 常用属性