一.js选择器
document.getElementById();//一个元素 document.getElementsByClassName();//HTMLCollection元素集合 document.getElementsByName();//NodeList节点的集合 document.getElementsByTagNameNS(); //htmlCollection元素的集合 //说明：元素集合是节点集合的一个子集 document.querySelector();//选择符合匹配的第一个节点 document.querySelectorAll();//选择符合匹配的所有元素节点的集合
二.jquery中的选择器
var element1=$('#div1,#div2');//得到一个一个类数组的JQUERY对象
1.类数组变成数组
element1 = Array.prototype.slice.call(element1);
2.基本的选择器
$('#p1') $('.list') $('.lise>li') $('a[href="http://www.baidu.com"]') $('a[href*="www"]') $('a[href^="http"]') $('a[$="com"]') $('a[href][trget]') $('a[href!="http://www.baidu.com"]')//jquer独有的css没有的
3.位置筛选器
:first//首个 :last//最后一个 :even//偶数0,2,4···· :odd//奇数1,3,5....... :eq(n)//等于n :gt(n)//大于n :lt(n)//小于n
4.子元素筛选器
$('li:first-child') :first-child :last-child :first-ot-type :last-of-type :nth-child(1)//1，2,3......... :nth-last-child(2n) :nth-of-type() :nth-last-of-type() :only-child :only-of-type
5.表单筛选器
$('input:checkd') :checked :disabled :enabled :focus :button :checkbox :File :image :input :password :radio :reset :selected :submit :text
6.内容选择器
$(':empty') :empty//内容为空的元素css :contains(text)//包含某文本的元素 :has(select)//匹配某选择器的元素 :parent//包含子元素或文本元素的元素. //其他筛选器 //jquery特有的 :lang(languaage) :not(select) :root :target //jquery and css :hidden//不可见元素 :visible//可见元素 :header//标题元素 :animated//执行动画的元素
三.jquery选择器的性能优化
1.尽量使用css中有的选择器 2.避免过度约束 3.尽量id开头 4.尽量使选择器右面更精确 5.避免过度使用全局选择器 6.缓存选择器结果 logTime(function(){code});//打印执行code代码用时到控制台
四.jquery对象dom对象
1.检测
dom.nodeType->节点类型数量
jquery.jquery->版本号
2.转换
dom = jquerydom.get(index);或者dom=jquerydom[index]; jquerydom = $('dom');
五.创建html元素的两种方式
1.$('<a>',{ text:"baidu", href:"http://www.baidu", title:"baidu" }); 2.$('<a>baidu<a>').attr({ text:"baidu", href:"http://baidu.com", title:"baidu" }); //此时创建的html元素存在浏览器内存中为未加到页面中
六.从jquerydom集合中提取元素方式
jquerydom[index] 返回dom jquerydom.get(index) 返回dom jquerydom.eq(index) 返回jquerydom->$('li:eq(1)') jquerydom.first() 返回jquerydom jquerydom.last() 返回jquerydom //使用方法比筛选器选择器性能高 jquerydom.toArray() 返回一个dom对象的数组功能和不加参数的get()一样
七.通过关系查找元素
1.通过父子
jquerydom.parent(selector) 获取满足匹配的直接父元素
jquerydom.parents(selector) 获取满足匹配的所有祖先元素
jquerydom.closet(selector)从当前元素主机向上查找，返回最先匹配的元素，能获取到本身
jquerydom.children()所有子元素的集合五文本节点
jquerydom.contents() 所有子元素的集合包括文本节点
jquerydom.find() 所有后代元素的集合
2.通过兄弟关系
jquerydom.next('li') //下一个兄弟 jquerydom.nextAll('li') //后面的所有兄弟 jquerydom.nextUntill('li') //直到某个兄弟 erydom.prev('li') //前一个兄弟 jquerydom.prevAll('li') //前面的所有兄弟 jquerydom.prevUntill('li') //直到某个兄弟 erydom.siblings()//所有的同辈元素
八.筛选遍历jQuery对象
1.添加选择de对象
$('.item1, .item2')or $('.item1').add(".item2")
2.删除过滤对象
$('.item1, .item2').not('.item1');删除了.item1对象 $('.item1, .item2').not(function (index) { return $(this).hassClass(item1); }); $('.item1, .item2').filter('.item1'); 删除了除.item1对象外的其他对象 $('.item1, .item2').filter(function(index){ return $(this).hassClass(item1); });
3.关于二级菜单
$('li').has('ul'); //含有二级菜单的li
4.转换元素
$('li').slice(start, end);[start, end ) $('li').map(function(index,dom){ return this.id; });//返回的值仍然是jquerydom
5.遍历jquerydom
$('li').each(function(index,dom){ this.title=this.innerText; });
6.其他
$('li').is(selector); //li中至少一个符合匹配则返回true
九.特性和属性
1.获取设置
var dom=document.getElementById("dom1"); dom.atrributes()获取所有的特性 dom.getAttribute("style");获取style特性的值 (dom.setAttribute("style",{color:red})) dom.style获取style属性的值 特性的值总是字符串，属性的值不一定是字符串
2.特性属性的同步规则
1.attribute是dom对象中本来就存在的，特性属性的值同步 2.attribute是boolean类型的，不同步 3.attribute不是dom内建的，不同步
3.操作元素的特性attr
1.设置特性 jquerydom.attr('title') jquerydom.attr('title','baidu') jquerydom.attr({ title:"baidu" }) jquerydom.attr(function(index,previousvalue){ return "new" + previousvalue; }) 2.删除特性 jquerydom.removeAttr("attrname");
4.操作元素的prop
1.//设置属性 jquerydom.prop('title') jquerydom.prop('title', 'baidu') jquerydom.prop({ title: "baidu" })
5.特性属性总结
1.特性不区分大小写，属性区分大小写，dom中采用驼峰形式，jquery中采用全小写形式
2.特性一次可删除多个，属性一次只能删除一个
3.boolean类型尽量采用属性设置
6.在元素中存取数据
在dom上存取数据，直接设置在特性或属性可能会导致内存泄漏，影响浏览器性能 1.获取数据 jquerydom.data(name) 2.存数据 jquerydom.data(name, value) ; jquerydom.data({}); !!data方法设置的数据可以保留类型 3.检测dom是否存在数据 $.hasData(dom);
十.修改元素样式
jquerydom.addClass([name1,name2]);添加类 jquerydom.removeClass([name1, name2]);删除类 jquerydom.toggleClass(name,true / false);切换类 //应用实例 $('li').each(function(index){ $(this).toggleClass(".red",index%3===0); }); jquerydom.hasClass(name);检测类 //修改样式css jquerydom.css(name,value); jquerydom.css({ }); jquerydom.css(name,function(index,value){ return parseInt(value,10);//value带有单位px });
十一.尺寸
1.内容的尺寸 jquerydom.width() jquerydom.height() 第一个元素的尺寸 2.包含内边距 jquerydom.innerWidth(); jquerydom.innerHeight(); 3.包含内边距和边框 jquerydom.outerWidth(); jquerydom.outerHeight(); 4.包含内边距和边框和外边距 jquerydom.outerWidth(true); jquerydom.outerHeight(true);
十二.位置
1.元素在相对于document中的位置 第一元素有效,只对可见元素有效 jquerydom.offset() 返回{left:value top:value} 2.元素相对于最近的一个具有position：relative父元素的位置，如没有此父元素，则相对于document jquerydom.position(); 返回{left: value top: value} 3.滚动条位置 $(html).scrollTop(value) $(html).scrollLeft(value)
十二.获取设置元素内容
1.包含标签,只对集合中的第一个元素起作用 $('div.red').html(content); 2.纯文本 $('div.blue').text(content); 以上插入内容方法，会覆盖原来的内容，插入元素最好用append()方法。
十三.移动或插入元素
([content1,..]).appendTo(jquerydom); jquerydom.append([content1,..]);插入元素内部的最后 jquerydom.prepend([content1,..]);插入到元素内部的最前面 举例： $('li').append('<a href="#">阅读更多<a>'); jquerydom.after(content,[content1,..])元素之后插入内容 jquerydom.before(content,[content1,..])元素之前插入内容 //移动 jquerydom.append(selector); <div class="box"> <h1><h1> <ul> <p>loer rrsdxt fystfxcgf hcg</p> <li></li> <li></li> <li></li> <li></li> <ul> </div> $('ul').append($('h1'));将h1移动到ul内部的最后;
十四.包裹元素
$('li').wrap('<div class="box2"></div>');将每个li用div包裹起来 $('li').wrap($('h1'));将h1元素复制然后包裹每个li $('li').wrapAll($('h1'));将所有的li包裹在一个h1对象中 $('p').wrapInner('<div></div>');用div包裹p中文本的内容 $('p').unwrap('<div></div>');取消包裹，删除直接的父元素
十五.删除元素
jquerydom.remove();从页面上将该对象删除，删除该对象绑定的事件和附加的数据，但仍存在浏览器jquery对象集合中
jquerydom.detach();从页面上将该对象删除，保留对象绑定的事件附加的数据，仍存在浏览器jquery对象集合中
jquerydom.empty();只删除内容，不删除该元素，保留时间及数据
十六.复制
jquerydom.clone([event1[,deepEvent2]]) event1是否复制本身的数据及绑定的事件 event2是否复制其子元素的数据及绑定的事件 案例：$('item1').clone(true,true).appendTo('.item2');
十七.替换元素
replaceWith(content) $('h1').replaceWith('<h2>h2</h2>'); replaceAll(conyent) ('<h2>h2</h2>').replaceAll('h1');
十八.这些方法为破坏性方法,在使用链式语法时需要先用end()方法恢复。
appendTo(target)
prependTo(target)
insertBefore(target)
insertAfter(target)
replaceAll(target)
十九.处理表单元素的值
.val(value) 1.获取单选框的值 $('input[type="radio"]:checked').val(); 2.获取复选框的值 val()方法只返回元素集合中第一个元素的值,所以多选框值在同时选中多个选项时需要遍历 var value=$('input[type="checkbox"]:checked').map(function(index.obj){ return $(this).val(); }).toArray();
二十.DOM事件模型
1.DOM0级事件模型
onclick dom0级事件<div onclick="chnageimg()"></div> dom.onclick=function(){}; 只支持一个dom事件处理函数，后加的函数会覆盖掉前一个函数 考虑到兼容性： dom.onclick=function(event){ event=event||window.event;获取事件对象 target=event.target||event.srcElement;获取事件目标 } //事件冒泡 元素在触发事件时，回依次向上触发父元素的上的相同的事件 阻止事件冒泡的方法event.stopPropagation(); or event.cancelBubble = true;
2.DOM2级事件模型
//事件的捕获 事件会从该元素到其子元素依次进行触发 addEventListener(eventType,listener,useCapture) useCapture=false时，只触发事件冒泡机制 useCapture=true时，只触发事件捕获机制 dom.addEventListener('click',function(event){ },true);
二十一.Jquery事件模型
1.提供了统一的事件处理方法 2.允许添加多个事件处理函数 3.使用标准事件名称（不加on） 4.事件实例作为事件处理函数的第一个参数 5.标准化事件实例最常用的属性 6.提供了统一的事件取消和阻止默认行为的方法
1.添加事件处理函数
jquerydom.on(eventType,selector,data,function); 实例： $('div').on('click','div#name',{foo:'bar'},function(event){ console.log(event.data); }).on('mouseover',function(event){ });
2.事件的委托
<ul> li*300 </ul> 给300个li绑定点击事件 可以将事件委托给父元素ul,给ul绑定点击事件即可 $('ul').on('click',function(event){ 通过event.target来获取被点击的li元素 });
3.统一的方法和属性
event.stopPropagation()阻止事件冒泡 event.preventDefault()阻止默认行为 return false;同时阻止冒泡和默认行为
5.一次性处理函数
jquerydom.one(eventType,selector,data,function);
6.移除事件处理
jquerydom.off([eventType,],[selector,],function);
7.主动触发事件
1.使用方法触发 jquerydom.trigger(eventType,[,data]); jquerydom.triggerHandler(eventType,[,data]); ！！triggerHandler和trigger相比 1.不会触发浏览器默认事件 2.不会产生事件，冒泡 3.只触发对象集合中第一元素的事件处理函数 4.返回的是事件处理函数的返回值，不是jQuery对象 2.触发快捷方法 jquerydom.eventType();不传参数就可以主动触发 例： $('ul').click(); // jquerydom.hover()方法，拥有mouseout和mouseenter的综合功能
8.自定义事件
使用on()+trigger(); //标记该条已读 $('li').on('markAsRead',function(event){ console.log('已读%o'+$(this)); }).on('click',function(event){ $(this).trigger('markAsRead'); }); //全部标记已读 $('button').on("click",function(event){ $('li').trigger('markAsRead'); }); //事件命名空间
9.关于jquey插件
1.去jquery官方插件主页搜索 网址:http://plugins.jquery.com/ 2.去npm搜索 3.github上搜索 //通过cdn引入插件效果最好 http://www.bootcdn.cn/ //几个实用的插件 1.chosen选择框 https://github.com/harvesthq/chosen 2.pickdate日期选择输入 https://github.com/amsul/pickadate.js 3.Magnific-Popup点击图片弹出放大 https://github.com/dimsemenov/Magnific-popup