1, 元素获取
- /******************* 原生 JS**************************/
- var ele = document.getElementById('idName');
- var eleArr = document.getElementsByClassName('className');
- var eleArr = document.getElementsByTagName('div');
- var ele = document.querySelector('#idName');//('.className')//('tagName'); // 取第一个满足条件的元素
- var eleArr = document.querySelectorAll('.className');//('tagName');
- /*******************jQuery**************************/
- var ele = $('#idName');
- var ele = $('.className:eq(0)'); // 取第一个元素
- var eleArr = $('tagName');
2,class 样式类名操作
- /******************* 原生 JS**************************/
- //className 属性
- ele.className = 'newClassName';
- //classList 操作
- ele.classList.contains('className'); // 是否有该类
- ele.classList.add('newClassName1,newClassName2...'); // 添加类
- ele.classList.remove('oldClassName1,newClassName2...'); // 删除类
- ele.classList.toggle('className'); // 如果元素中有该 className, 则删除并返回 false, 否则添加并返回 true
- /*******************jQuery**************************/
- ele.hasClass(className);
- ele.addClass('newClassName1,newClassName2...');
- ele.removeClass('newClassName1,newClassName2...');
- ele.toggleClass('className');
3, 元素节点操作
- /******************* 原生 JS**************************/
- // 创建节点
- var newNode = ele.createElement('<div > 创建 </div>');
- // 插入节点
- ele.appendChild(newNode); // 在 ele 的子节点的末尾插入 newNode
- ele.insertBefore(newNode,targetNode); // 在 ele 的子节点 targetNode 前面插入 newNode
- // 删除节点
- ele.removeChild(ele.childNodes[i]); // 删除 ele 第 i+1 个子节点
- // 替换节点
- ele.replaceChild(newNode, oldNode); // 替换 ele 中的子节点
- // 克隆节点
- var copyNode = ele.cloneNode(deep); //deep 为 true 时, 深拷贝 (包括其子孙节点), 为 false 时只复制本身节点
- /*******************jQuery**************************/
- // 创建节点
- var newNode = $('<div > 创建 </div>');
- // 插入节点
- // 在元素子节点末尾插入
- ele.append(newNode); // 在 ele 的子节点的末尾插入 newNode
- newNode.appendTo(ele); // 在 ele 的子节点的末尾插入 newNode
- // 在元素子节点前端插入
- ele.prepend(newNode); // 在 ele 的子节点的前端插入 newNode
- newNode.prependTo(ele); // 在 ele 的子节点的前端插入 newNode
- // 在元素后面添加
- ele.after(newNode);
- newNode.insertAfter(ele);
- // 在元素前面添加
- ele.before(newNode);
- newNode.insertBefore(ele);
- // 删除节点
- ele.remove(); // 移除 ele 及其所有文本, 子孙节点, 数据和事件
- ele.detach(); // 移除 ele 及其所有文本, 子孙节点, 但是保留数据和事件
- ele.empty(); // 清除 ele 所有的内容和子孙元素, 但是 ele 节点本身和其属性事件等还在
- // 替换节点
- ele.replaceWith(newNode); // 替换 ele 为新的内容 (可以是 html 元素, dom 元素, jQuery 元素)
- newNode.replaceAll(ele); // 替换 ele 为新的 HTML 元素
- // 克隆节点
- ele.clone(deep); //deep 为 true 时, 深拷贝 (包括其事件处理函数), 为 false 时只复制本身, 默认 false
4, 元素节点遍历
- /******************* 原生 JS**************************/
- // 子节点
- var eleArr = ele.childNodes; // 所有子节点
- var eleArr = ele.children; // 所有子节点数组, 用得较多
- var firstEle = ele.firstChild; // 第一个子节点 低版本浏览器 firstElementChild
- var lastEle = ele.lastChild; // 最后一个子节点 低版本浏览器 lastElementChild
- // 父节点
- var parentEle = ele.parentNode;
- // 兄弟节点
- var nextEle = ele.nextSibling; // 下一个节点
- var previousEle = ele.previousSibling; // 上一个节点
- /*******************jQuery**************************/
- // 子节点
- var eleArr = ele.children(); // 所有子节点数组
- var firstEle = ele.first(); // 第一个子节点
- var lastEle = ele.last(); // 最后一个子节点
- // 父节点
- var parentEle = ele.parent(); // 直接父元素
- var parentEleArr = ele.parents(); // 所有祖先元素
- var parentEle = ele.offsetParent(); // 第一个有定位的父元素
- var parentEleArr = ele.parentsUntil(stop, filter); // 满足条件之间的父节点
- // 兄弟节点
- var nextEle = ele.next(); // 下一个节点
- var nextEleArr = ele.nextAll(); //ele 后面所有同级节点
- var previousEle = ele.prev(); // 上一个节点
- var previousEle = ele.prevAll(); //ele 之前所有同级节点
- var siblingsArr = ele.siblings(); // 所有同级元素节点
5, 属性操作
- /******************* 原生 JS**************************/
- // 属性数组
- var attrArr = ele.attributes;
- // 判断属性
- var bool = ele.hasAttribute('attrName'); // 是否有指定属性
- var bool = ele.hasAttributes(); // 是否有属性
- // 获取属性值
- var attrValue = ele.getAttribute('attrName');
- // 设置属性值
- ele.setAttribute('attrName','attrValue');
- // 删除属性
- ele.removeAttribute('attrName');
- /*******************jQuery**************************/
- // 在设置 disabled,selected,checked 等这些 Boolean 类型自带属性时, 我们需要用 prop() 方法;
- // 其他字符串类型自带属性时, 我们使用 attr() 方法即可; DOM 节点可见的自定义属性我们也使用 attr() 方法.
- // 获取属性值
- var attrValue = ele.attr('attrName');
- var propValue = ele.prop('propName');//
- // 设置属性值
- ele.attr('attrName','attrValue'); // 自定义的一些属性
- ele.prop('propName','propValue'); //disabled 等一些属性, HTML 元素的固有属性
- // 删除属性
- ele.removeAttr('attrName');
6, 事件
- /******************* 原生 JS**************************/
- // 事件绑定及解绑
- ele.addEventListener('click',func,false);
- ele.removeEventListener('click',func,false);
- ele.onclick = func;
- ele.onclick = null;
- ele.attachEvent('onclick',func); //ie8 以下
- ele.detachEvent('onclick',func); //ie8 以下
- /*******************jQuery**************************/
- /* 多种事件绑定和解绑方法 */
- /** 方法 1
- * 1, 直接绑定事件方法 mouseenter()... 等等
- * 2, 这样的方式, 下面两个事件不会被层叠, 都会执行
- * 3, 只能一个一个绑定
- */
- $("div:eq(0)").click(function () {
- alert(1);
- });
- $("div:eq(0)").click(function () {
- alert(2);
- });
- /** 方法 2
- * 1,bind("event1 event2 ... eventx",fn)
- * 2, 同时绑定多个事件触发条件, 执行同一个函数
- */
- $("div:eq(1)").bind("click mouseenter",function () {
- alert("bind 绑定法");
- });
- // 解绑
- $("div:eq(1)").unbind("click"); // 解绑指定的
- //$("div:eq(1)").unbind(); // 解绑所有的
- /** 方法 3
- * 1,delegate("selector","event1 event2 ... eventx",fn)
- * 2, 可以绑定父盒子里的子盒子触发事件, 执行函数
- */
- $("div:eq(2)").delegate("button","click mouseleave",function () {
- alert("delegate 绑定法");
- });
- // 解绑
- $("div:eq(2)").undelegate();
- /** 方法 4
- * 1,on("event1 event2 ... eventx","selector",data,fn)
- * 2, 可以绑定父盒子里的后代盒子触发事件, 执行函数
- * 3, 参数 data 由 event.data 带入函数中
- */
- $("div:eq(3)").on("click mouseleave","button",{"name":"mjm","age":24},function (event) {
- alert("on 绑定法"+event.data.name);
- });
- // 解绑
- $("div:eq(3)").off();
7. 存储数据
- /******************* 原生 JS**************************/
- //HTML 5 有一个 dataset 对象, 也有类似的功能 (IE 10 不支持), 不过只能保存字符串.
- element.dataset.user = JSON.stringify(user);
- element.dataset.score = score;
- /*******************jQuery**************************/
- //jQuery 对象可以通过 data 储存数据.
- $("body").data("foo", 52);
8. 显示与隐藏
- /******************* 原生 JS**************************/
- el.style.display = '';
- el.style.display = 'none';
- /*******************jQuery**************************/
- $(el).show();
- $(el).hide();
- ### 9. 页面加载初始化
- /******************* 原生 JS**************************/
Windows.οnlοad=function(){
- // 初始化内容
- }
- /*******************jQuery**************************/
- $(function(){
- // 初始化内容
- })
9. jQuery 获取的 dom 对象和原生的 dom 对象有何区别?
JS 原生获取的 dom 是一个对象, jQuery 对象就是一个数组对象, 其实就是选择出来的元素的数组集合, 所以说他们两者是不同的对象类型不等价.
10.forEach 与 each
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <div>
- </div>
- <div>
- </div>
- <div>
- </div>
- <div>
- </div>
- <div>
- </div>
- <script src="node_modules/jquery/dist/jquery.js">
- </script>
- <script>
- // IE 8 不支持
- // ;['abc', 'd', 'efg'].forEach(function (item, index) {
- // console.log(item)
- // })
- // 遍历 jQuery 元素
- // $.each(['abc', 'd', 'efg'], function (index, item) {
- // console.log(item)
- // })
- console.log($('div'))
- // 伪数组是对象
- // $('div') 对象的原型链中没有 forEach
- // 对象的原型链是 Object.prototype
- // 这个 each 是 jQuery 提供的
- // 这个 each 在 jQuery 的原型链中
- // $('div').each(function (index, item) {
- // console.log(item)
- // })
- // 可以在不兼容 forEach 的低版本浏览器中使用 jQuery 的 each 方法
- // 让伪数组也可以使用 forEach 方法
- // ;[].slice.call($('div')).forEach(function (item) {console.log(item)})
- </script>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/2916b00fb862