继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery常用方法和不常用方法合集

呼啦一阵风
关注TA
已关注
手记 181
粉丝 73
获赞 318


引入文件:

  1. <script type="text/javascript" src="jquery.js"></script>  

基础语法:


  1. $(selector).action();  

选择器:


  1. $("p")  

  2. $("p.intro")  

  3. $("p#demo")  

  4. 属性选择  

  5. $("[href]")   

  6. $("[href='#']")  

  7. $("[href!='#']")  

  8. $("[href$='.jpg']")  


  1. 获得内容或者设置内容 - text()、html() 以及 val()  


  1. 获取属性或者设置属性 - attr()  

添加


  1. append() - 在被选元素的结尾插入内容(在元素里面)  

  2. prepend() - 在被选元素的开头插入内容(在元素里面)  


  1. after() - 在被选元素之后插入内容(在元素外面)  

  2. before() - 在被选元素之前插入内容(在元素外面)  

删除和清空


  1. remove() - 删除被选元素(及其子元素)  

  2. empty() - 从被选元素中删除子元素  


操作样式


  1. .important  

  2. {  

  3. font-weight:bold;  

  4. font-size:xx-large;  

  5. }  

  6.   

  7. .blue  

  8. {  

  9. color:blue;  

  10. }  


  1. hasClass() - 是否包含某个类  if($(this).hasClass("abcd"))  

  2. addClass() - 向被选元素添加一个或多个类  

  3. removeClass() - 从被选元素删除一个或多个类  

  4. toggleClass() - 对被选元素进行添加/删除类的切换操作  

 

  1. $("p").css("background-color");  

  2. $("p").css("background-color","yellow");  

  3. $("p").css({"background-color":"yellow","font-size":"200%"});  

遍历


  1. $(selector).each(function(index,element));  

  2. $("li").each(function(){  

  3.   alert($(this).text())  

  4. });  

获取父级


  1. $("span").parent();  

  2. $("span").parents();  

  3. $("span").parents("ul");  

  4. $("span").parentsUntil("div");  

获取子级


  1. $("div").children();  

  2. $("div").children("p.1");  

  3. $("div").find("span");  

  4. $("div").find("*");  

获取同级(同胞)


  1. $("h2").siblings();  

  2. $("h2").siblings("p");  

  3. $("h2").next();  

  4. $("h2").nextAll();  

  5. $("h2").nextUntil("h6");  

  6. $("h2").prev();  

  7. $("h2").prevAll();  

  8. $("h2").prevUntil("h6");  

过滤


  1. $("div p").first();  

  2. $("div p").last();  

  3. $("p").eq(1);(索引)  

  4. $("p").filter(".intro");  

  5. $("p").not(".intro");  


请求

  1. $.get(URL,callback);  

  2. $.post(URL,data,callback);  

特效

隐藏和显示


  1. $(selector).hide(speed,callback);  

  2. $(selector).show(speed,callback);  

  3. $(selector).toggle(speed,callback);  

  4. $("p").hide();  

  5. $("p").show();  

  6. $("p").toggle();  

  7. $("p").toggle(5000);  

渐入和渐出

  1.  $(selector).fadeIn(speed,callback);  

  2.  $(selector).fadeOut(speed,callback);  

  3.  $(selector).fadeToggle(speed,callback);  

  4.  $(selector).fadeTo(speed,opacity,callback);  

  5.  $("#div1").fadeIn();  

  6.  $("#div2").fadeOut("slow");  

  7.  $("#div3").fadeToggle(3000);  

  8.  $("#div1").fadeTo("slow",0.15);  

滑动


  1. $(selector).slideDown(speed,callback);  

  2. $(selector).slideUp(speed,callback);  

  3. $(selector).slideToggle(speed,callback);  

  4. $("#panel").slideDown();  

  5. $("#panel").slideUp("slow");  

  6. $("#panel").slideToggle(3000);  

高度和宽度


  1. $("#div1").width();  

  2. $("#div1").width(500).height(500);  

停止


  1. $(selector).stop(stopAll,goToEnd);  

  2. $("#panel").stop();  

jQuery chaining

  1. $("#p1").css("color","red").slideUp(2000).slideDown(2000);  

原文出处

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP