JQuery常用方法

65 阅读 0 评论 43 点赞

我是靠谱客的博主自信香氛，最近开发中收集的这篇文章主要介绍JQuery常用方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery选择器

选择器：简洁的写法，支持CSS1到CSS3的选择器

$(“#test”)选取id为test的元素---单个元素

$(“.test”)选取所有class为test的元素---元素集合

$(“div”)选取所有的<div>元素---元素集合

$(“div span”)选取<div>里的所有的<span>(可以选到子和孙所有元素)元素---元素集合

$(“div:first”)选取所有<div>元素中第1个<div>元素---单个元素

$( "input:checked")选中被勾选了的复选框元素

$(“div:last”)选取所有<div>元素中最后一个<div>元素---单个元素

$(“input:even”)选取索引(索引从0开始,0算为偶数)是偶数的<input>元素---元素集合

$(“input:odd”)选取索引(索引从0开始)是奇数的<input>元素---元素集合

$(“div[title=test]”)选取属性title为“test”的<div>元素---元素集合

$(“div:nth-child(1)”) 选取所有div中，是其父标签的第一个子元素的div元素---元素集合

....... $("a:contains('x')") 选取出含内容x的a标签

jQuery DOM

创建节点:

运用传统的javascript方法，创建一个div节点：

var newDiv = document.createElement(‘div’);

newDiv.innerText = ' 新建节点';

jQuery中创建一个div节点：

$(‘<div>新建节点</div>’);

插入节点:

用javascript方法，插入一个节点：

var Newp = document.createElement(“p”);

document.body.appendChild(Newp);

jQuery中插入节点：例：$( a ).append( c );

节点里（前后）

$( a ).append( c ) ------a里末尾插c -- 链式操作做会操作到a元素

$( c ).appendTo( a ) ---把c插到a里末尾 -- 链式操作做会操作到c元素

$( a ).prepend( c ) ------a里前面插c

$( c ).prependTo(a) ---把c插到a里前面

节点（前后）

$( a ).after( c )-----------a之后插c

$( c ).insertAfter(a) ----把c插到a之后

$( a )before( c ) --------a之前插c

$( c ).insertBefore(a）---把c插到a之前

删除节点:

用javascript方法，删除一个节点：

var b = document.getElementById(“test”);

var c = b.parentNode;

c.removeChild(b);

jQuery中删除节点：

$('#test').remove();

remove() 删除节点

empty() 清空节点内容

detach() 移除被选元素，包括所有的文本和子节点，返回移除元素的副本

替换节点:

用javascript方法，替换节点：

parent.replaceChild( newNode , oldNode );

jQuery中替换节点：

$(“<p>替换 </p>”).replaceAll(“#test1″);

复制节点:

运用传统的javascript方法，复制一个节点：

var txt = document.querySelector("p");

var clonep = txt.cloneNode(true);

document.body.appendChild(clonep);

jQuery中复制一个节点：

var clone_a = a.clone(true); 深复制包括事件处理程序

$('body').append(clone_a);

常用方法:

.filter(x)获得匹配元素集合中符合条件x的元素

$("li").filter(".box")//选中的是所有li中类名为box的元素
$("li .box")//选中的是li下所有类名为box的子元素

.not(X)获得匹配元素集合中不符合条件X的元素

$("#div").not(".box") //选中div中没有.box的div

.children() 获得匹配元素集合中每个元素的所有子元素

.next() 获得匹配元素集合中每个元素的下一个同辈元素

.nextAll()获得匹配元素集合中每个元素的下面所有同辈元素

.prev() 获得匹配元素集合中每个元素紧邻的上一个同辈元素

.prevAll()获得匹配元素集合中每个元素紧邻的上面所有同辈元素

.parent() 获得当前匹配元素集合中每个元素的父元素

.closest() 必须传参数。从当前元素开始，返回最先匹配到的符合条件的元素。当前元素符合则会选到当前元素

.find()里面要传参，获取到匹配到元素中所有符合条件的子元素

.find(child) 获得当前匹配元素集合中每个元素的后代

.siblings() 获得匹配元素集合中所有元素的同辈元素

. eq() 匹配元素集合中指定索引的一个元素

$("li").eq(2) //选中的是li元素集合中下标为2的那个li

. index() 方法返回指定元素相对于其他指定元素的 index 位置

$("h3").index()
//会返回一个数值。这个数值是选中的元素h3在跟她一起的兄弟节点中的位置。如果页面有多个h3（即$("h3")是个元素集合)。则会返回第一个h3元素在它的兄弟节点中的位置。

.end() 将匹配的元素变为前一次的状态

.each() 循环，为每个匹配的元素执行函数

.is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果有元素匹配给定的参数，则返回 true

.addClass() 为每个匹配的元素添加指定的类名

.removeClass() 从匹配的元素中删除全部或者指定的类

.toggleClass() 从匹配的元素中添加或删除一个类

.hasClass() 检查元素是否含有某个特定的类，有则返回true

.attr() 设置或返回被选元素的属性和值

$("#div").attr("id") //得到匹配中的元素的id属性 =>div
$("#div").attr("class","box2") //设置选中元素的clss属性为box2

.prop() 设置或返回被选元素的属性和值。注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示：如需检索 HTML 属性，请使用 attr() 方法代替。

$('input).prop('checked')
//判断input框是否被勾选，勾选中则返回true，否则返回false。
$('input').prop('checked',true) //将选中的input框勾选上。

.removeAttr() 从每一个匹配的元素中删除一个属性

.html() 设置或取得第一个匹配元素的html内容 innerHTML

.text() 设置或取得第一个匹配元素的文本内容 innerText

.val() 设置或返回匹配元素的值(表单元素) value

.css() 设置或返回匹配元素的样式属性

.width() 设置或返回匹配元素的宽度

.innerWidth() width+padding

.outerWidth() width + border + padding

.outerWidth(true) width + border + padding + margin

.height() 设置或返回匹配元素的高度

.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移 dom.scrollLeft dom.scrollLeft = 100

.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移

.position() 获取匹配元素相对于定位父元素的偏移 {left: 40, top: 50}

.offset() 获取或设置匹配元素在当前视口的相对偏移 {left: 40, top: 50}

. wrap() 使用指定的 HTML 元素来包裹每个被选元素

$("p").wrap("<div></div>"); 给每个P元素包裹一个div元素

......

$.trim( str ) 函数会移除字符串开始和末尾处的所有空白字符

$.each() 遍历数组

$.each(data,function (index,value) {

console.log('数组当前元素的索引' + index);

console.log('数组当前元素的值' + value);

});

jQuery动画

展开／收起:

slideUp(null/speed , easing , fn); 收起

slideDown(null/speed , easing , fn); 展开

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

示例

$('#con').slideDown( 1000 , 'swing' , function (){ alert('123'); } );

$('#con').slideUp({

duration:1000,

easing:'easeOutElastic',

complete:function (){

alert('再见~');

}

});

反转开关:（显示/隐藏）

toggle(null/speed , easing , fn);

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

1.用于绑定两个或多个事件处理器函数，以响应被选元素轮流的 click 事件

2.如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

显示隐藏：

show(null/speed , easing , fn); 显示

hide(null/speed , easing , fn); 隐藏

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

淡入淡出：

fadeIn(null/speed , easing , fn); 淡入

fadeOut(null/speed , easing , fn); 淡出

参数：可选

null：不传参，执行默认效果

speed：'slow'|'normal'|'fast' 或毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

自定义动画：

用法一 : animate({styles} , speed , easing , fn)

参数：可选

{styles}：一组css设置集合

speed：'slow'|'normal'|'fast' 或毫秒数

easing：指定动画效果，默认是"swing"，可扩展

fn：回调函数，当动画执行完毕以后执行

animate( )方法执行css属性集的自定义动画

用法二 : animate({styles} ,{queue,duration,easing,complete});

参数：

{styles}：一组css设置集合

queue：是否加入动画队列执行 true/false (默认true)

duration：定义动画持续时间

easing：指定动画效果，默认是“swing”，可扩展

complete：回调函数，当动画执行完毕以后执行

可操作属性：

不是所有的css属性都可以用Jquery动画（animate函数）来动态改变，下面是JQ可以操作的css属性（能用数字表示其大小的就能改变）：

backgroundPosition borderWidth borderBottomWidth

borderLeftWidth borderRightWidth borderTopWidth

borderSpacing margin marginBottom marginLeft

marginRight marginTop outlineWidth padding

paddingBottom paddingLeft paddingRight

paddingTop height width maxHeight maxWidth

minHeight maxWidth font fontSize opacity

bottom left right top letterSpacing wordSpacing

lineHeight textIndent scrollLeft scrollTop

… …

停止动画：

stop()停止当前动画(并不会停止动画队列中剩下的动画)

stop(true)停止所有动画

stop(true,true)停止所有动画,并到达当前动画的终点

$("#go").click(function(){

$(“.block”).animate({left: ‘200px'}, 5000);

});

$("#stop").click(function(){

$(".block").stop(); //停止当前动画

});

jQuery事件绑定

on( ) 把事件绑定到当前及以后添加的元素上面

语法：on( event , selector , fn )

$("p").on("click", function(){ //未来元素无效
alert( $(this).text() );
});
$(“ul”).on( “click” , “li”,
function(){ //未来元素有效。li则是未来添加的元素
alert( $(this).html() );
});
//给同一个元素添加多个时间，不同的事件用同一个事件处理函数
$("#div").on(click mouseover),function(){
console.log(1)
})
//给同一个元素添加多个时间，不同的事件用同不同事件处理函数
$("#div").on("click",function(){ console.log(2) }).on("mousemove",function(){ console.log(3) })
或者
$("#div").on（{click:function(){console.log(1)},mousemove:function(){console.log(2)}}）

off

off( event , selector , fn ) on()的反向操作，移除用on()绑定的事件