HTML标签默认display属性

Posted by admin on 2010/08/17 2 comments

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

JQuery做的点击内容展示效果

Posted by admin on 2010/08/02 1 comment

其中应用到了.find()方法，.find()方法：是搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
.end()方法：回到最近的一个”破坏性”操作之前。即，将匹配的元素列表变为前一次的状态。
.siblings()方法：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

具体效果如下：

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

正好明天工作用，嘻嘻。

JQuery基础教程-学习笔记整理（2）

Posted by admin on 2010/08/02 0 comments
.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()
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

JQuery基础教程-学习笔记整理（1）

Posted by admin on 2010/07/25 1 comment
.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 元素集合；