首页 > 代码库 > 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 常用属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。