修远兮 http://www.bai80.com ——带着希望，一路狂奔。 Sun, 05 Sep 2010 10:52:43 +0000 en hourly 1 http://wordpress.org/?v=3.0 JQuery基础教程-DOM操作（6） http://www.bai80.com/?p=300 http://www.bai80.com/?p=300#comments Thu, 02 Sep 2010 15:16:34 +0000 admin http://www.bai80.com/?p=300
  1. DOM:Document Object Model的缩写即文档对像模型。
  2. DOM操作一般分为3类即DOMCore（核心）、HTML-DOM和CSS-DOM。
  3. DOMCore并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。
  4. HTML-DOM的代码通常比较简短，不过它只能用来处理WEB文档。
  5. CSS-DOM是针对CSS的操作。在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性。
  6.  
  7. DOMCore：
  8. document.getElementsBytagName("form");
  9. element.getAttribute("src");
  10.  
  11. HTML-DOM:
  12. document.forms;
  13. element.src;
  14.  
  15. CSS-DOM：
  16. element.style.color="red";
  17.  
  18. 查找节点：
  19. ：eq()
  20. 匹配一个给定索引值的元素,从 0 开始计数。
  21.  
  22. 查找节点属性：
  23. attr()取得第一个匹配元素的属性值。
  24.  
  25. 创建元素节点：
  26. $(html)
  27. 例如：
  28. var $li_1=$("<li title="菠萝">菠萝</li>");
  29.  
  30. 插入节点：
  31. append()向每个匹配的元素内部追加内容。
  32. appendTo()将所有匹配的元素追加到指定的元素中。
  33.  
  34. prepend（）向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
  35. prependTO()将所有匹配的元素前置到指定的元素中。
  36.  
  37. after()在每个匹配的元素之后插入内容。
  38. insertAfter()将所有匹配的元素插入到指定的元素后面。
]]> http://www.bai80.com/?feed=rss2&p=300 0 JQuery基础教程-JQuery过滤选择器（5） http://www.bai80.com/?p=284 http://www.bai80.com/?p=284#comments Sat, 21 Aug 2010 11:39:07 +0000 admin http://www.bai80.com/?p=284 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都是以一个冒号开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

基本过滤器：

  1. ：first：选取第1个元素；
  2. $('div:first')选择取所有div元素中第1个div元素。
  3.  
  4. :last：选取最后一元素；
  5. $('div:last')选取所有div元素中最后个 div元素。
  6.  
  7. :not(selector)：去除所有与给定选择器匹配的元素；
  8. $('input:not(.myClass)')选取class不是myClass的input元素。
  9.  
  10. :even：选取索引是偶数的所有元素，索引从0开始；
  11. $('input:even')选取索引是偶数的input元素。
  12.  
  13. :odd：选取索引是奇数的所有元素，索引从0开始；
  14. $('input:odd')选取索引是奇数的input元素。
  15.  
  16. :eq(index):选取索引等index元素(index从0开始)；
  17. $('input:eq(1)')选取索引等于1的input元素。（equal）
  18.  
  19. :gt(index):选取索引大于index的元素（index从0开始）；
  20. $('input:gt(1)')选取索引大于1的input元素(注：大于1,而不包括1)。(greater than)
  21.  
  22. :lt(index):选取索引小于index的元素(index从0开始);
  23. $('input:lt(1)')选择索引小于1的input元素(注：小于1,而不包括有1)。（less than）
  24.  
  25. :header：选取所有的标题元素，例如h1,h2,h3等等；
  26. $(':header')选取网页中所有h1、h2、h3。
  27.  
  28. :animated：选取当前正在执行动画的所有元素；
  29. $('div:animated')选取正在执行动画的div元素。

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

  1. :contains(text)：选取含有文本内容为"text"的元素；
  2. $('div:contains('我')')选择含有文本“我”的div元素。
  3.  
  4. :empty：选取不包含子元素或者文本的空元素；
  5. $('div:empty')选取不包含子元素（包括文本元素）的div空元素。
  6.  
  7. :has(selector)选取含有选择器所匹配的元素的元素；
  8. $('div:has(p)')选取含有p元素的div元素。
  9.  
  10. :parent：选取含有子元素或者文本的元素；
  11. $('div:parent')选取拥有子元素（包括文本元素）的div元素。

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

  1. :hidden:选取所有不可见的元素；
  2. $(':hidden')选取所有不见的元素。包括<input type="hidden"/>,<div style="display:none"></div>和<div style="visibility:hidden;"></div>等元素。如果只想选择input元素，可以使用$('input:hidden')。
  3.  
  4. :visible：选择所有可见的元素；
  5. $('div:visible')选取所有可见的div元素。

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

  1. [attribute]：选取拥有此属性的元素；
  2. $('div[id]')选取拥有属性id的元素。
  3.  
  4. [attribute=value]：选取属性的值为value的元素；
  5. $('div[title=text]')选取属性title为'test'的div元素。
  6.  
  7. [attribute!=value]：选取属性的值不等于value的元素；
  8. $('div[title!=test]')选取属性title不等"test"的div元素（注：没有属性title的div元素也会被选取）。
  9.  
  10. [attribute^=value]：选取属性的值以value开始的元素；
  11. $('div[title^=test]')选取属性title以"test"开始的div元素。
  12.  
  13. [attribute$=value]：选取属性的值以value结束的元素；
  14. $('div[title$=text]')选取属性 title以"test"结束的div元素。
  15.  
  16. [attribute*=value]：选择属性的值含有value的元素；
  17. $('div[title*=test]')选取属性title含有"test"的div元素。
  18.  
  19. [selector1][selector2][selectorN]：用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围；
  20. $('div[id][title$='test']')选取拥有属性id，并且属性title以'test'结束的div元素。

子元素过滤选择器

子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单。

  1. ：nth-child(index/even/odd/equation)：选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)；
  2. :eq(index)只匹配一个元素，而：nth-child将为每一个父元素匹配子元素，并且：nth-child(index)的index是从1开始的，而:eq(index)是从0算起的。
  3.  
  4. :first-child选取每个父元素的第1个子元素；
  5. :first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素，例如$('ul li:first-child')选取每个ul中第1个li元素。
  6.  
  7. :last-child选取每个父元素的最后一个子元素；
  8. 同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素，例如$(ul li:first-child)；选择每个ul中最后一个li元素。
  9.  
  10. :only-child：如果某个元素是父元素中惟一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会这匹配；
  11. $('ul li:only-child')在ul中选取是惟一子元素的li元素。

表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤。

  1. :enabled：选取所有可用元素；
  2. $('#form1:enabled')选取id为"form1"的表单内的所有可用元素。
  3.  
  4. :disabled：选取所有不可用元素；
  5. $('#form2:disabled')选取id为"form2"的表单内的所有不可用元素。
  6.  
  7. :checked：选取所有被选中的元素(单选框，复选框)；
  8. $('input:checked')选取所有被选中的input元素。
  9.  
  10. :selected：选取所有被选中的选项元素（下拉列表）；
  11. $('select:selected')选取所有被选中的选项元素。

表单选取器

  1. :input：选取所有的input、textarea、select和button元素；
  2. $(':input')选取所有input、textarea、select和button元素。
  3.  
  4. :text：选取所有的密码框；
  5. $(':text')选取所有的单选文本框。
  6.  
  7. :password：选取所有的密码框；
  8. $(':password')选取所有的密码框。
  9.  
  10. :radio：选取所有的单选框；
  11. $(':radio')选取所有的单选框。
  12.  
  13. :checkbox：选取所有的多选框；
  14. $('checkbox')选取所有的复选框。
  15.  
  16. :submit:选取所有的提交按钮；
  17. $(':submit')选取所有的提交按钮。
  18.  
  19. ：image：选取所有图片按钮；
  20. $(':image')选取所有图片按钮。
  21.  
  22. ：reset选取所有的重置按钮；
  23. $(':reset')选取所有的重置按钮。
  24.  
  25. :button：选取所有的按钮；
  26. $(':button')选取所有的按钮。
  27.  
  28. :file：选取所有的上传域；
  29. $(':file')选取所有的上传域。
  30.  
  31. ：hidden：选取所有不可见元素；
  32. $(':hidden')选取所有不可见元素（已经在不可见性过滤选择器中讲解过。）
]]> http://www.bai80.com/?feed=rss2&p=284 0 JQuery基础教程-JQuery层次选择器（4） http://www.bai80.com/?p=274 http://www.bai80.com/?p=274#comments Thu, 19 Aug 2010 16:19:18 +0000 admin http://www.bai80.com/?p=274 如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。

  1. $('ancestor descendant'):选取ancestor元素里的所有descendant元素；
  2. $('div span')选取div里的所有的span元素。
  3.  
  4. $('parent>child')：选择parent元素下的child元素，与$('ancestor descendant')有区别，$('ancestor
  5. descendant')选择的是后代元素；
  6. $('div>span')选取div元素下元素名是span的子元素。
  7.  
  8. $('prev+next')：选取紧接在prev元素后的next元素；
  9. $('.one+div')选取class为one的下一个div元素。
  10.  
  11. $('prev~siblings'):选取prev元素之后的所有siblings元素；
  12. $('#two~div')选取id为two的元素后面的所有div兄弟元素。
  13.  
  14. $('.one+div')==$('.one').next('div');
  15.  
  16. $('#prev~div')==$('#prev').nextall('div');
]]> http://www.bai80.com/?feed=rss2&p=274 0 JQuery基础教程-JQuery基本选择器（3） http://www.bai80.com/?p=263 http://www.bai80.com/?p=263#comments Wed, 18 Aug 2010 15:55:36 +0000 admin http://www.bai80.com/?p=263 基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素的ID、Class和标签名等来查找DOM元素。

  1. #ID：根据给定的ID匹配一个元素；
  2. $('#test')选取ID为test的元素。
  3.  
  4. .Class：根据给定的类名匹配元素；
  5. $('.test')选取所有Class为test的元素。
  6.  
  7. element：根据给定的元素名匹配元素；
  8. $(p)选取所有的p元素。
  9.  
  10. *：匹配所有元素；
  11. $(*)选取所有的元素。
  12.  
  13. selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回；
  14. $('div,span,p.myClass')选择所有div,span和拥有Class为myClass的p标签的一组元素。

基本选择器和CSS中的选择器差不多，这个些比较好记，今天先记这些。

]]> http://www.bai80.com/?feed=rss2&p=263 0 HTML标签默认display属性 http://www.bai80.com/?p=250 http://www.bai80.com/?p=250#comments Tue, 17 Aug 2010 14:23:34 +0000 admin http://www.bai80.com/?p=250

Display

none：此元素不会被显示。
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素。（CSS2.1 新增的值）
list-item：此元素会作为列表显示。
run-in ：此元素会根据上下文作为块级元素或内联元素显示。
compact：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker：CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table：此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
inline-table：此元素会作为内联表格来显示（类似table），表格前后没有换行符。
table-row-group：此元素会作为一个或多个行的分组来显示（类似 tbody）。
table-header-group：此元素会作为一个或多个行的分组来显示（类似 thead）。
table-footer-group：此元素会作为一个或多个行的分组来显示（类似 tfoot）。
table-row：此元素会作为一个表格行显示（类似 tr）。
table-column-group：此元素会作为一个或多个列的分组来显示（类似 colgroup）。
table-column：此元素会作为一个单元格列显示（类似 col）
table-cell：此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption：此元素会作为一个表格标题显示（类似 caption）
inherit：规定应该从父元素继承 display 属性的值。

  1. a                 display:inline
  2. abbr              display:inline
  3. acronym           display:inline
  4. address           display:block
  5. applet            display:inline  (不赞成使用)
  6. area              display:inline
  7. b                 display:inline
  8. base              display:none
  9. basefont          display:none    (不赞成使用)
  10. bdo               display:inline                
  11. big               display:inline
  12. blockquote        display:block  
  13. body              display:block
  14. br                display:inline
  15. button            display:inline
  16. caption           display:table-caption
  17. center            display:block    (不赞成使用)
  18. cite              display:inline
  19. code              display:inline
  20. col               display:table-column
  21. colgroup          display:table-column-group
  22. dd                display:block
  23. del               display:inline
  24. dir               display:block    (不赞成使用)
  25. div               display:block
  26. dfn               display:inline
  27. dl                display:block
  28. em                display:inline
  29. fieldset          display:block
  30. font              display:inline   (不赞成使用)
  31. form              display:block
  32. frame             display:block
  33. frameset          display:block
  34. h1--h6            display:block
  35. head              display:none
  36. hr                display:block
  37. html              display:block
  38. i                 display:inline
  39. iframe            display:inline
  40. img               display:inline
  41. input             display:inline
  42. ins               display:inline
  43. isindex           display:block     (不赞成使用)
  44. kbd               display:inline
  45. label             display:inline
  46. legend            display:block
  47. li                display:list-item
  48. link              display:inline
  49. map               display:block
  50. menu              display:block      (不赞成使用)
  51. meta              display:none
  52. noframes          display:none
  53. noscript          display:none
  54. object            display:inline
  55. ol                display:block
  56. optgroup          display:block
  57. option            display:block
  58. p                 display:block
  59. param             display:none
  60. pre               display:block
  61. q                 display:inline
  62. s                 display:inline      (不赞成使用)
  63. samp              display:inline
  64. script            display:none
  65. select            display:inline
  66. small             display:inline
  67. span              display:inline
  68. strike            display:inline      (不赞成使用)
  69. strong            display:inline
  70. style             display:none
  71. sub               display:inline
  72. sup               display:inline
  73. table             display:table
  74. tbody             display:table-row-group
  75. td                display:table-cell
  76. textarea          display:inline
  77. tfoot             display:table-row-group
  78. th                display:table-cell
  79. thead             display:table-header-group
  80. title             display:none
  81. tr                display:table-row
  82. tt                display:inline
  83. u                 display:inline      (不赞成使用)
  84. ul                display:block
  85. var               display:inline
  86. xmp               display:block
]]> http://www.bai80.com/?feed=rss2&p=250 2 JQuery做的点击内容展示效果 http://www.bai80.com/?p=205 http://www.bai80.com/?p=205#comments Mon, 02 Aug 2010 16:16:05 +0000 admin http://www.bai80.com/?p=205 其中应用到了.find()方法，.find()方法：是搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
.end()方法：回到最近的一个”破坏性”操作之前。即，将匹配的元素列表变为前一次的状态。
.siblings()方法：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

具体效果如下：

提示：你可以先修改部分代码再运行。

正好明天工作用，嘻嘻。

]]> http://www.bai80.com/?feed=rss2&p=205 1 JQuery基础教程-学习笔记整理（2） http://www.bai80.com/?p=197 http://www.bai80.com/?p=197#comments Mon, 02 Aug 2010 13:00:33 +0000 admin http://www.bai80.com/?p=197
.blind 为每个匹配元素的特定事件绑定事件处理函数。
例如:
$(document).ready(function(){
    $('#switcher').bind('click',function(){
        $('body').addClass('large');
    });
});
.toggle()切换元素的可见状态；
例如：
    $(document).ready(function(){
        $('#switcher h3').toggle(function(){
            $('#switcher h3').addClass('bg1');                                 
        },function(){
            $('#switcher h3').removeClass('bg1');
        });                       
    });
.toggleClass()如果存在（不存在）就删除（添加）一个类。
例如：
    $(document).ready(function(){
        $('#switcher h3').click(function(){
            $('#switcher h3').toggleClass('bg1');                             
        });
    });
.unbind()bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
将段落的click事件取消绑定
jQuery 代码:
$("p").unbind( "click" )
.hide()以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。
.trigger()在每一个匹配的元素上触发某类事件。
.css()访问第一个匹配元素的样式属性。
.slice()选取一个匹配的子集，开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
.hide()隐藏显示的元素。
.show()显示隐藏的匹配元素。
.next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
.slideToggle()通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
.siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
.slideUp()
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
]]> http://www.bai80.com/?feed=rss2&p=197 0 JQuery基础教程-学习笔记整理（1） http://www.bai80.com/?p=182 http://www.bai80.com/?p=182#comments Sun, 25 Jul 2010 07:32:42 +0000 admin http://www.bai80.com/?p=182
.ready()：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数；
.addClass()：为每个匹配的元素添加指定的类名；
.removeClass()：从所有匹配的元素中删除全部或者指定的类；
:not()：去除所有与给定选择器匹配的元素；
$('a[title]')选择所有带title属性的链接；
$('a[href^="mailto:"]')选择所以href属性具以mailto开头的a元素；
$('a[href$=".pfd"]')选择所以href属性并以.pdf结尾的a元素；
:eq匹配一个给定索引值的元素，从0开始计数；
:nth-child()匹配其父元素下的第N个子或奇偶元素，从1开始；
例如：
在每个 ul 查找第 2 个li
HTML代码：
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
JQuery代码：
$("ul li:nth-child(2)")
结果：
<li>Karl</li>,   <li>Tane</li>
:odd匹配所有索引值为奇数的元素，从 0 开始计数；
:even匹配所有索引值为偶数的元素，从 0 开始计数；
:contains匹配包含给定文本的元素；
.filter筛选出与指定表达式匹配的元素集合；
HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
JQuery 代码:
$("p").filter(".selected")
结果:
<p class="selected">And Again</p>
.get()取得所有匹配的 DOM 元素集合；
]]> http://www.bai80.com/?feed=rss2&p=182 1 昨日的无悠阁，今日的修远兮 http://www.bai80.com/?p=171 http://www.bai80.com/?p=171#comments Mon, 19 Jul 2010 09:21:33 +0000 admin http://www.bai80.com/?p=171

]]> http://www.bai80.com/?feed=rss2&p=171 6 端午节，不归夜 http://www.bai80.com/?p=159 http://www.bai80.com/?p=159#comments Tue, 15 Jun 2010 18:12:10 +0000 admin http://www.bai80.com/?p=159 这一年真是祸不单行，接二连三的出问题。人家都说本历年这一年会比较倒霉，像来不信鬼神的我也开始相信这一说法了。

这一年是抱怨最多的一年，因为有太多的期望与现实不符；这一年是最浮躁的一年，因为各个方面的压力让我有点不知所措；这一年是最暴躁的一年，紧张而又繁重的工作让我变的越来越尖酸；这一年是进步最慢的一年，貌似每天很忙，却又看不到成果。这一年的今天是最倒霉的一天，因为忘了带钥匙，只能在网吧过夜了。

]]> http://www.bai80.com/?feed=rss2&p=159 7