Jquery用法大全

一.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

猜你喜欢

转载自blog.csdn.net/wang_liuyong/article/details/81545556
今日推荐