陶瓷上釉:JQuery常用小知识

来源:百度文库 编辑:九乡新闻网 时间:2024/04/28 11:17:36

1.

$('td:empty').html('-');    td可替换

要在表格中的每一个空列中都添加一个横杠,可以使用::empty 伪选择器

 

2.

resize方法,在每一个匹配元素的resize事件中绑定一个处理函数。

eg:

让人每次改变页面窗口的大小时很郁闷的方法:

 

$(window).resize(function(){
  alert("Stop it!");
});

 

3.$.trim(str):删除字符串两端的空白字符。

eg:

$("input").val( $.trim("  hello, how are you?   ") ) ;

 

4.JQuery的一些基础解释:

view plaincopy to clipboardprint?

  1. 1,调用方法是要注意:  
  2. 调用方法时要注意操作的是dom对象还是jquery对象。  
  3. 普通的dom对象一般可以通过$()转换成jquery对象。  
  4. 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。  
  5. 由于jquery对象本身是一个集合(返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法)。  
  6. 所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。  
  7. 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,  
  8. 其中$(exp).get(0) 等效于$(exp)[0]。  
  9. 可以使用dom中的方法,但不能再使用Jquery的方法。  
  10.   
  11. 以下几种写法都是正确的:  
  12. $("#msg").html();  
  13. $("#msg")[0].innerHTML;(经常新手会 $("#msg")[0].html() ,当然这是错误的写法。)  
  14. $("#msg").eq(0)[0].innerHTML;  
  15. $("#msg").get(0).innerHTML;  
  16. 要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。  
  17.   
  18.   
  19.   
  20.   
  21. 2,同一函数实现set和get:  
  22. Jquery中的很多方法都是如此,主要包括如下几个:  
  23. $("#msg").html();               //返回id为msg的元素节点的html内容。   
  24. $("#msg").html("new content");         
  25. //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content   
  26.   
  27. $("#msg").text();               //返回id为msg的元素节点的文本内容。   
  28. $("#msg").text("new content");         
  29. //将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content   
  30.   
  31. $("#msg").height();               //返回id为msg的元素的高度   
  32. $("#msg").height("300");       //将id为msg的元素的高度设为300   
  33. $("#msg").width();               //返回id为msg的元素的宽度   
  34. $("#msg").width("300");       //将id为msg的元素的宽度设为300   
  35.   
  36. $("input").val(");       //返回表单输入框的value值   
  37. $("input").val("test");       //将表单输入框的value值设为test   
  38.   
  39. $("#msg").click();       //触发id为msg的元素的单击事件   
  40. $("#msg").click(fn);       //为id为msg的元素单击事件添加函数   
  41. 同样blur,focus,select,submit事件都可以有着两种调用方法  
  42.   
  43. $("#msg").css("background");               //返回元素的背景颜色   
  44. $("#msg").css("background","#ccc")       //设定元素背景为灰色   
  45. $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式   
  46.   
  47. $("p").bind("click", function(){alert($(this).text());});       //为每个p元素添加单击事件   
  48. $("p").unbind();       //删除所有p元素上的所有事件   
  49. $("p").unbind("click")       //删除所有p元素上的单击事件   
  50.   
  51.   
  52.   
  53. 3,集合处理功能  
  54. $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})         
  55. //实现表格的隔行换色效果   
  56. $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})  
  57. //为三个不同的p元素单击事件分别设定不同的处理  

 

 

 

5.visible知识

view plaincopy to clipboardprint?

  1. .is(':visible')是什么意思?  
  2. 最近刚刚开始学习jq。 看了几个小例子 了。  
  3. 遇到一个问题不清楚,查了API 也没搞清楚。  
  4. API说IS()的意思:  
  5. Boolean布尔值is( String  expr )用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。  
  6. $(document).ready(function() {  
  7. $('#faq').find('dd').hide();  
  8. $('#faq').find('dt').click(function() {  
  9.          var answer = $(this).next();  
  10.          if (answer.is(':visible')) {  
  11.              answer.slideUp();  
  12.          } else {  
  13.              answer.slideDown();  
  14.          }  
  15.      });  
  16. });  
  17.   
  18. 请高手帮我解释一下  if (answer.is(':visible')) {  
  19. 这句话的含义。里面的(:visible)  是啥意思?  
  20. 为什么能这么写?  
  21.   
  22.   
  23. 正解:  
  24. answer.is(':visible')是指可见的answer元素.  
  25. 如果可见就调用answer.slideUp();使之隐藏.  
  26. else则是不可见的元素 调用answer.slideDown();使之显示.  
  27. 类似的写法还有answer.is(':first')answer.is(':last')之类的,类似于CSS的伪类a:hover  

 

 

6.下面给出一个用split的实例:
msg ="2007/10/01";
     msg = msg.split("/");
     alert(msg[2]);
  他会把 msg 分成一个3块组成一个数组 ,然后就可以轻松获取了。

 

7.

一个新的挑战是从一组类似或相同的元素中只选择某一个特定的元素。
jQuery提供了filter()和not()来做这个。
filter()能够将元素精简到只剩下满足过滤条件的那些,not()恰恰相反,他移除了所有满足条件的。

view plaincopy to clipboardprint?

  1.     
  2.   
  3.    
  4.    
  5.