Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1745664
  • 博文数量: 335
  • 博客积分: 4690
  • 博客等级: 上校
  • 技术积分: 4341
  • 用 户 组: 普通用户
  • 注册时间: 2010-05-08 21:38
个人简介

无聊之人--除了技术,还是技术,你懂得

文章分类

全部博文(335)

文章存档

2016年(29)

2015年(18)

2014年(7)

2013年(86)

2012年(90)

2011年(105)

分类: Web开发

2014-07-30 20:51:12

最近写一个小的WEB项目,使用CI框架来速成,这才发现JQUERY已经忘得差多了,因此买书来速成一下。
CSS用来分离内容与样式,
Jquery用来分离内容与行为 
基本的选择器:
元素,元素ID,元素的class


对应的3个选择器分别为: DIV #DIVID .DIVCSS 为表示区分,使用不用的前导符来区分。
同时同种类型的选择器之间可以组成组进行选择元素,使用逗号分隔,如DIV1,DIV2,DIV3
层次选择器:
看书理解这个时候,有点迷糊,自动动手写了一个程序就明白了。
为了便于理解,你要对你所要操作的整个文档有个文档树的概念,即DOM模型。
如:

点击(此处)折叠或打开

  1. <div id="two">
  2. <h3> demo of siblings ~ </h3>
  3. <ul>

  4.     <li id='l1'>li 1 </li>
  5.     <li id='l2'>li 2 </li>
  6.     <li id='l3'>li 3 </li>
  7.     <li id='l4'>li 3 </li>
  8. </ul>
  9. </div>


该文档对应的树如下:
                                                DIV
                                  -------------|-------------                                  
                                  |                             |

                                  H3                          UL
                                                   ------------|-------------------------
                                                   |             |               |          |
                                                   LI           LI              LI          li
                                                                                  |
                                                                                  H3
解释这个的目的主要是为了说明两个层次选择的使用。

点击(此处)折叠或打开

  1. $("ancestor descendant");
  2. $("parent >  child");
注意后代前者的范围更大,后者范围小,
针对上图选择器的的结果如下:


  • $("ancestor descendant");
  •     $("#two h3 ")的后代包含2个H3

  • $("parent >  child");
  •    $("#two >h3 ")的后代仅包含一个h3
     $("#two #l2 + li ").css("color","blue");   id=l3 的li  等价于$("#two#l2).next('li)
     $("#two #l2 ~ li ").css("color","red");     id=l3与id =l4的li    等价于$("#two #l2).nextall('li)
    JQUERY本身还提供了一个更加强大的功能
    $("#three #l2").sibilings('l2)"   id=l2与id =l3的li id=l4

    第三种为过滤选择器,
    相对来说更简单,它的前导符为:针对特定的规则进行筛选如 first,last,元素索引的奇偶,大于小于,以及取反操作,或者针对某些特定的事件如focus。
    还有就是内容过滤器以及可见性过滤器,实际中用的比较少,这里不做介绍。

     本实验用到的测试用例如下:

     

    点击(此处)折叠或打开

    1. <html>
    2. <head> <title>>demo of jquery</title>
    3.      <script src="//localhost/public/jslib/jquery-2.1.1.min.js"></script>
    4. <script type="text/javascript" >
    5. $().ready(function(){
    6.     $("#one h3 ").css("color","red");
    7.     $("#two >h3 ").css("color","green");
    8.     $("#three #l2 + li ").css("color","blue");
    9.     $("#four #l2 ~ li ").css("color","red");
    10.     $("#five #l2").siblings("li").css("color","red");
    11.     $(".demclass :focus").css("background","#bbffaa").css("border","1px solid #f00");
    12. });
    13. </script>

    14. </head>
    15. <body>
    16. <div id="one">
    17. <h3> demo of descendant blank </h3>
    18. <ul>
    19.     <li >li 1 </li>
    20.     <li>li 2 </li>
    21.     <li>li 3 <h3> this is h3 </h3> </li>
    22. </ul>
    23. </div>
    24. <div id="two">
    25. <h3> demo of child > </h3>
    26. <ul>

    27.     <li>li 1 </li>
    28.     <li>li 2 </li>
    29.     <li>li 3 <h3> this is h3 </h3> </li>
    30. </ul>
    31. </div>
    32. <div id="three">
    33. <h3> demo of next + </h3>
    34. <ul>

    35.     <li id='l1'>li 1 </li>
    36.     <li id='l2'>li 2 </li>
    37.     <li id='l3'>li 3 </li>
    38.     <li id='l4'>li 3 </li>
    39. </ul>
    40. </div>
    41. <div id="four">
    42. <h3> demo of siblings ~ </h3>
    43. <ul>

    44.     <li id='l1'>li 1 </li>
    45.     <li id='l2'>li 2 </li>
    46.     <li id='l3'>li 3 </li>
    47.     <li id='l4'>li 3 </li>
    48. </ul>
    49. </div>
    50. <div id="five">
    51. <h3> demo of siblings sibilings function </h3>
    52. <ul>

    53.     <li id='l1'>li 1 </li>
    54.     <li id='l2'>li 2 </li>
    55.     <li id='l3'>li 3 </li>
    56.     <li id='l4'>li 3 </li>
    57. </ul>
    58. </div>
    59. <div id='six' >
    60. <label> demo of focus </label>

    61. <input name="demo" class="demclass" id='demoid'>
    62. </div>
    63. </body>


        
    阅读(3635) | 评论(0) | 转发(0) |
    给主人留下些什么吧!~~