jQuery常用方法总结

在这里我总结了一些jQuery中一些常用的方法,来供大家学习使用。

$("#box").css("width",500)

这里的#box可以为id名class名标签名,还支持一些css3选择器。

基本选择器

$("div")//选择所有的div标签元素,返回div元素数组
$(".myClass")//选择使用myClass类的css的所有元素
$("*")//选择文档中的所有的元素
$("#myELement,div,.myclass")//可以运用多种的选择方式进行联合选择

层叠选择器:

$("form input")//选择所有的form元素中的input元素
$("#main > *")//选择id值为main的所有的子元素
$("label + input")//选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")//同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:

$("tr:first")//选择所有tr元素的第一个
$("tr:last")//选择所有tr元素的最后一个
$("input:not(:checked) + span")//过滤掉:checked的选择器的所有的input元素
$("tr:even")//选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd")//选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)")// 选择所有的td元素中序号为2的那个td元素   
$("td:gt(4)")//选择td元素中序号大于4的所有td元素
$("td:lt(4)")//选择td元素中序号小于4的所有的td元素
$(":header")//匹配如 h1, h2, h3之类的标题元素
$("div:animated")//匹配所有正在执行动画效果的div元素

内容过滤选择器:

$("div:contains('John')")//选择所有div中含有John文本的元素
$("td:empty")//选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)")//选择所有含有p标签的div元素
$("td:parent")//选择所有的以td为父节点的元素数组

可视化过滤选择器:

$("div:hidden")//选择所有的被hidden的div元素
$("div:visible")//选择所有的可视化的div元素

属性过滤选择器:

$("div[id]")//选择所有含有id属性的div元素
$("input[name='newsletter']")//选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']")//选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']")//选择所有的name属性以'news'开头的input元素
$("input[name$='news']")//选择所有的name属性以'news'结尾的input元素
$("input[name*='news']")//选择所有的name属性包含'news'的input元素
$("input[id][name$='man']")//可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且name属性以man结尾的input元素

子元素过滤选择器:

$("div span:first-child")// 返回所有的div元素的第一个子节点的数组
$("div span:last-child")//返回所有的div元素的最后一个节点的数组
$("div button:only-child")//返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器:

$(":input")//选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text")//选择所有的text input元素
$(":password")//选择所有的password input元素
$(":radio")//选择所有的radio input元素
$(":checkbox")//选择所有的checkbox input元素
$(":submit")//选择所有的submit input元素
$(":image")//选择所有的image input元素
$(":reset")//选择所有的reset input元素
$(":button")//选择所有的button input元素
$(":file")//选择所有的file input元素
$(":hidden")//选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器:

$(":enabled")//选择所有的可操作的表单元素
$(":disabled")// 选择所有的不可操作的表单元素
$(":checked")//选择所有的被checked的表单元素
$("select option:selected")//选择所有的select 的子元素中被selected的元素

注意以上这些都必须加双引号。除了以下不加引号。

$(this)
$(document)
$(window)

jquery提供非常简短的代码便可实现动画效果(注意:对于同一物体只能在上一动画完成后才执行下一动画,不同物体的动画是同时进行的)。

1$("div").animate({"width":600},1000);

序与迭代

eq()方法
我们可以通过eq()方法来精确找到某个序列中的某个元素。

$(".box2 p").eq(1)//Class名为box2下的1号下标p元素
$("p").eq(5)//下标为5的p元素

index()方法
返回这个元素在亲兄弟中的排名,无视选择器怎么选。

1$(".teshu").click(function(){
2   alert($(this).index());
})//点击class名为teshu物体弹出他在亲兄弟中的排名。

each()
each()表示遍历节点,也叫作迭代符合条件的节点(好比for循环)。

1$("p").each(function(i){
2   $(this).animate({"width":50 * i},1000);
});//将p标签的宽度依次递增50px

length属性
一共有几个p

1$("p").length

get()方法
get()方法和eq()方法基本一致,eq()返回的是jQuery对象,get()返回的是原生JS对象。原生对象后面要跟着原生属性、方法:

$("p").eq(2).html("哈哈哈哈哈哈");

等价于:

$("p").get(2).innerHTML = "哈哈哈哈哈哈";

等价于:

$("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";

动画相关方法

show()显示、hide()隐藏、toggle()切换,
如果show()、hide()、toggle()里面有数值,将变为动画。

$("div").show([时间],[回调函数]);//语法
$("div").show();//让一个本身是display:none;元素显示
$("div").hide();//隐藏元素display:none;
$("div").toggle();//切换显示状态。自行带有判断,如果可见,就隐藏;否则显示。

slideDown()、slideUp()、slideToggle()方法

slideDown : 下滑展开
slideUp:上滑收回
slideToggle : 滑动切换

$("div").slideUp();
$("div").slideDown();
$("div").slideToggle();

fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法

fadeIn()淡入
fadeOut()淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换

$("div").fadeIn(5000);
$("div").fadeOut(5000);
$("div").fadeTo(1000,0.3);
$("div").fadeToggle(5000);

stop()

停止当前的animate动画,但是不清除队列,立即执行后面的animate动画:

$("div").stop();

停止当前的animate动画,并且清除队列,盒子留在了此时的位置:

$("div").stop(true); 

瞬间完成当前的animate动画,并且清除队列:

$("div").stop(true,true);

瞬间完成当前的animate动画,但是不清楚队列,立即执行后面的动画:

$("div").stop(false,true);

finish()

finish()瞬间完成所有动画队列!

$("div").finish();

delay()

elay延迟,延迟指定秒数后执行。

$("div").delay(1000).animate({"left":500},1000);
$("div").delay(1000).slideUp();
$("div").delay(1000).hide(1);//必须写1,写1了就是运动

is(":animated")

is()方法表示身份探测,返回true、false。
is表示“是不是”,而不是“是”

$(this).is(".t")//判断p是不是有t这个类
is(":animated")//判断这个元素是否在运动中。

可以用该方法来防止动画的积累,判断div有动画就跳出函数不执行。

if($("div").is(":animated")){
        return;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • 请记得在进行JQuery类库的运用时,加入JQuery类库,并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 2,897评论 1 40
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 651评论 0 3
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,635评论 18 503
  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 1,081评论 0 2
  • 警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document....
    hx永恒之恋阅读 2,841评论 3 104