网络书屋(Web Reading Room)

A blogging framework for hackers.

JQuery1-9April4th

1: jquery的加载顺序

IE中会有不同点 结论:jquery中使用$(function(){})即可!其他知道即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<Html>
  <Head>
    <script type="text/javascript" src="jquery-2.1.3.js">
    </script>
    <script type="text/javascript">

      //javascript
      //第四个加载
      //在IE中居然无法加载!!!
      //需要等待页面完全加载完毕才会触发
      onload=function()
      {
        //console的作用就是在浏览器的控制台 打印出结果
        console.log('javascript\'s onload');
        alert('javascript window.onload js ok 4');
      };
      //window object change into jQuery object
      //第五个加载
      $(window).load(function(){
        console.log('window onload');
        alert('$(window).load No 5');
      });

//第二个加载
      $(function()
        {
          console.log('dom ready='+$('#span').html());
          alert('$(function(){}niming hanshu! 2');
        });


      //Dom object change into Jquery Object
      // 很是奇怪 第一个加载
      //可以多次触发
      $(document).ready(function(){
        console.log('document ready')
        alert('$(document).ready Ok 1');
      });

      // THe most common  and most convininet
      //jQuery(function(){})
           //第三个加载  跟第二个一样的  按照前后顺序进行布置
      jQuery(function()
       {
        console.log('dom ready='+$('#span').html());
        alert(' jQuery(function(){}niming hanshu 3!')
       });

       function init()
       {
         console.log('body init');
       }

    </script>

  </Head>
  <Body onload="init()">

    <Span id="span"> Rupeng!</Span>
  </Body>
</Html>

2:Map 和each函数的使用 map:用于修改 each:用于遍历

map: value index each: key value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<Html>
  <Head>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>
    <script type="text/javascript">

       var arr=[1,2,4,5,6];
       $.map(arr,function()
             {
               alert('element'+arguments[1]+'=='+arguments[0]);
             });
        //namely  ,we can write below
        $.map(arr,function(ele,index)
              {
                alert('element'+index+'=='+ele);
              });

        //return a  new array ==2*old_array
              var newArray=$.map(arr,function(ele,index)
               {
                 return ele*2;
               })

        //$.map is similar to lisp's (map ...) 
        // so we can get the two properties of array with $.map function

        //print new array
        alert(newArray);


        var newArray2=$.map(arr,function(ele,index){
          return index>2?ele*2:ele;
        })

        alert(newArray2);


    </script>
    <script type="text/javascript">
      var dic={"name":"xiaoming","age":3,"gender":"1"};
      //each 主要用于遍历    map主要用于修改
      $.each(dic,function(key,value)
             {
               alert(key+'=='+value);
             })
    </script>
  </Head>
</Html>

3:jquery和jsDom的互转

1:jsDom –> jquery 把jsDom对象放在$()括号中即可 2: jquery –> jsDom

 两种方法
     a:  $().get(0)
     b: $()[0]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<Html>
  <Head>
    <Title> Test the transformation between jQuery and Dom </Title>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>

    <script type="text/javascript" >


      $(function(){

  /*
        document.getElementById('btn').onclick=function()
        {
          var dvObj=document.getElementById('dv');
          //方法1  Dom
          //dvObj.style.backgroundColor='black'; 
         
          //方法2 jQuery 方法
           //Dom object change into jQuery
//          var dvObjJquery=$(dvObj);
//          dvObjJquery.css('backgroundColor','yellow');

          // 把jquery对象转回到Dom对象
          var dvObjJquery=$(dvObj);
          //1  转回去dom的方法1
//          var dvObjAgain=dvObjJquery[0]; 
          //2  转回去dom的方法2
          var dvObjAgain=dvObjJquery.get(0); 
           dvObjAgain.style.backgroundColor='black'; 

        

        }
   */

        //1  省略了  等号
        //2  省略了   Dom长长的函数名调用
        //2  取而代之的是简易的jQuery语法  利用链式法则
        $('#btn').click(function()
                        {
                          $('#dv').css('backgroundColor','purple');
                        });
      })
    </script>
  </Head>

  <Body>
    <Input type="button" id="btn" value="changeColor"/>
    <Div id="dv" style="width:300px; height:200px; background-color:green">
      hello
      </Div>
  </Body>
</Html>

4多重选择器 注意:中间不能有空格 否则没有反应 这是需要注意的

      text() 类似于jsDom的innerText()
      html()类似于 innerHtml()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<Html>
  <Head>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>

    <script type="text/javascript">
//      alert('hello')
      $(function()
        {
          $('#btn').click(function(){
//            alert('hello');
//            $('#cls').text('This is  a  layer');  // class selector


            //$('div#cls').css('backgroundColor','yellow');  // label with Id selector
//            $('div #cls').css('backgroundColor','yellow'); //中间不能有空格  否则没有反应 这是需要注意的
//   同样的标签加上lei也不是不能加上空格


            $('div#cls').text('InnerText方式添加');
            $('div#cls').html('<H1>InnerHTML方式添加</H1>');

            //标签选择器的隐式编程   隐式循环! 这是一个jQuery的一个好处 implicit cycle
            $('p').text('Set all the p the value');

          });
        });
    </script>

    <style type="text/css">
       #cls
       {
         width:300px;
         height:200px;
         background-color:green;
       }
    </style>
  </Head>

  <Body>
    <input type="button" id="btn" value="change"/>
    <div id="cls">

    </div>
    <p class="name"></p>
    <p class="name"></p>
    <p class="name"></p>
    <p class="name"></p>
    <p class="name"></p>
    <p class="name"></p>
    <p class="name"></p>
    <p class="name"></p>
  </Body>
</Html>

5: 选择器 过滤器的使用 :first first() :last last() :eq() :lt() :gt()

注意:可不敢再把siblings()漏掉了!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
  <head>
    <title>  test  the start mark</title>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>
    <script type="text/javascript">
      $(function(){
        //注意是tr  行
        $('#tb tr:first').css('backgroundColor','green').css('fontSize','50px');
        $('#tb tr:last').css('color','black');
        // 0-3之间  0 1 2 3
        $('#tb tr:gt(0):lt(3)').css('fontSize','25px');
        $('#tb tr:odd').css('backgroundColor','yellow');

        $('#tb tr').click(function(){
          //可不敢再犯这种错误了! ! siblings()  加上括号
          $(this).css('backgroundColor','red').siblings().css('backgroundColor','gray');
        })
      })
    </script>


   <style type="text/css">
      .cls
      {
        background-color:black;
      }
      td
      {
        border:1px solid red;
      }
    </style>
  </head>

  <body>
    <table id="tb" style="width:2\450px;height:20px;text-align:center; font-size:14px ;border:1px solid black;cursor:pointer">
      <tr>
        <td>Name</td>
        <td>Mark</td>
      </tr>
      <tr>
        <td>Chairman Mao</td>
        <td>89</td>
      </tr>
      <tr>
        <td>Chairman Hu</td>
        <td>79</td>
      </tr>
      <tr>
        <td>Chairman Deng</td>
        <td>99</td>
      </tr>
      <tr>
        <td>Chairman Xi</td>
        <td>98</td>
      </tr>
      <tr>
        <td>Chairman jiang</td>
        <td>76</td>
      </tr>

    </table>
  </body>
</html>

6:相对容器 和绝对容器

$(‘p div’) 绝对容器 p的后代 $(‘div’,‘p’) 相对容器 所有在p标签中的 div 参考点不一样

注意

      //$('this').siblings.css('backgroundColor','');//可不敢再犯这个错误
      //this不需要加上单引号
      //为什么无法直接行t添加上 颜色? 因为真正在表面显示的是td
      //$(this).siblings().css('backgroundColor','');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
  <head>
    <title>  test  the start mark</title>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>
    <script type="text/javascript">
      $(function(){

        //绝对定位
        // $('div p')表示div下的p元素
        //相对定位
        //相对div元素的p标签
        //$('p','div') 表示在div层中的p元素

        $('#tb tr').click(function(){
          //$('this').siblings.css('backgroundColor','');//可不敢再犯这个错误
          //this不需要加上单引号
          //为什么无法直接行t添加上 颜色? 因为真正在表面显示的是td
          //$(this).siblings().css('backgroundColor','');

          $('td',$(this).siblings()).css('backgroundColor','');
          $('td:even',$(this)).css('backgroundColor','red');
          $('td:odd',$(this)).css('backgroundColor','yellow');
        });

        //学习了.hover(,) 函数的使用方式
        //来的时候是第一个参数
        //去的时候是第二个参数
        $('tr').hover(function(){
          $(this).find('td').addClass('hover');
        },function(){
          $(this).find('td').removeClass('hover');
        });


        //l列的追踪
        $('td').hover(function(){
          var $index=$(this).index();
          $(this).addClass('hover');
          $('td:nth-child('+($index+1)+')').addClass('hover');
        },function(){
          $('#tb tr').children().removeClass('hover');
        });
        alert('Total rows:'+$('#tb tr').length);


      })
    </script>


   <style type="text/css">
     .hover
     {
       color:#fff;
       background-color:gray;
     }
      .cls
      {
        background-color:black;
      }
      td
      {
        border:1px solid red;
      }
    </style>
  </head>

  <body>
    <table id="tb" style="width:2\450px;height:20px;text-align:center; font-size:14px ;border:1px solid black;cursor:pointer">
      <tr>
        <td>First</td>
        <td>Second</td>
        <td>Third</td>
        <td>Fourth</td>
        <td>Fifth</td>
        <td>Sixth</td>
        <td>Seventh</td>
        <td>eighth</td>
        <td>nineth</td>
        <td>tenth</td>
      </tr>
      <tr>
        <td>First</td>
        <td>Second</td>
        <td>Third</td>
        <td>Fourth</td>
        <td>Fifth</td>
        <td>Sixth</td>
        <td>Seventh</td>
        <td>eighth</td>
        <td>nineth</td>
        <td>tenth</td>
      </tr>
      <tr>
        <td>First</td>
        <td>Second</td>
        <td>Third</td>
        <td>Fourth</td>
        <td>Fifth</td>
        <td>Sixth</td>
        <td>Seventh</td>
        <td>eighth</td>
        <td>nineth</td>
        <td>tenth</td>
      </tr>
      <tr>
        <td>First</td>
        <td>Second</td>
        <td>Third</td>
        <td>Fourth</td>
        <td>Fifth</td>
        <td>Sixth</td>
        <td>Seventh</td>
        <td>eighth</td>
        <td>nineth</td>
        <td>tenth</td>
      </tr>

    </table>
  </body>
</html>

一个有趣的分页

奇巧淫技

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
   .page
   {
       margin:5px;
   }
   .hover
   {
       background-color:#00f;
       color:#fff;
       cursor:hand;
   }
    </style>

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

         $(document).ready(function () {
           //实际的效果是在先前的表格中进行隐藏和显示的小伎俩! 奇巧淫技
           //get the rows
             var $rows = $('table tbody tr').length;
          // get the show lines  页面行数
             var $pagesize = 2;
          //总页数
             var $pagecount = Math.ceil($rows / $pagesize);
          //创建一个层
             var $div = $('<div id="pages"></div>');
          //在层中加入page
             for (var i = 0; i < $pagecount; i++) {
               //把创建的东西加入到层中
                 $('<span class="page">' + (i + 1) + '</span>').appendTo($div);
             }
             $div.appendTo('table');

             //appendd the hover
             //设置页面的数字的悬浮效果
             $('.page').hover(function () {
                 $(this).addClass('hover');
             }, function () {
                 $(this).removeClass('hover');
             });

             //增加了页面行的点击隐藏的事件
             $('table tbody tr').click(function(){
               $(this).hide();

             })
             //隐藏所有行
             $('table tbody tr').hide();
             //获得所有的tr行对象
             var tr = $('table tbody tr');
             for (var i = 0; i < $pagecount - 1; i++) {
                 $(tr[i]).show();
             }

             //设置页面的点击事件 效果
             $('span').click(function () {
                 $('table tbody tr').hide();
                 for (i = ($(this).text() - 1) * $pagesize; i <= $(this).text() * $pagesize - 1; i++) {
                     $(tr[i]).show();
                 }
             })
         });
     </script>
</head>
<body>
<table border="1" width="200px">
<thead>
<tr>
<th>ID</th><th>Name</th><th>Mark</th>
</tr>
</thead>
<tbody>
<tr><td>100</td><td>Steven</td><td>100</td></tr>
<tr><td>101</td><td>Mike</td><td>70</td></tr>
<tr><td>102</td><td>Robot</td><td>80</td></tr>
<tr><td>103</td><td>Perry</td><td>100</td></tr>
<tr><td>104</td><td>Lion</td><td>90</td></tr>
<tr><td>105</td><td>Andy</td><td>85</td></tr>
</tbody>

</table>
</body>
</html>

一个小练习: 东西部篮球队

注意:

   //可不敢再犯这个错误   1  逗号写成了句话   2: siblings后直接街上css的参数
      //$(this).css('backgroundColor'.'red').siblings()'backgroundColor','');

      //由此错误可得到一个结论
      // jQuery分成两个部分一个是获得Dom对象  紧接着是设置CSS样式!
      // 也就是js其实就是把这两个部分按照链条一样一对一对的串起来了
      //一个Dom一个Css  然后再一个Dom 一个CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<Html>
  <Head>
    <Meta charset="utf-8">
    <script type="text/javascript" src="jquery-2.1.3.js"></script>

    <script type="text/javascript">
      $(function(){
        $('ol li').mouseover(function(){
          //可不敢再犯这个错误   1  逗号写成了句话   2: siblings后直接街上css的参数
          //$(this).css('backgroundColor'.'red').siblings()'backgroundColor','');

          //由此错误可得到一个结论
          // jQuery分成两个部分一个是获得Dom对象  紧接着是设置CSS样式!
          // 也就是js其实就是把这两个部分按照链条一样一对一对的串起来了
          //一个Dom一个Css  然后再一个Dom 一个CSS
          $(this).css('backgroundColor','red').siblings().css('backgroundColor','');
        });
        $('ol li').click(function()
           {

             //第一种写法
//             $(this).prevAll().css('backgroundColor','blue');
//             $(this).nextAll().css('backgroundColor','yellow');

             //第二种写法
             //end的作用就是从前面所有 又跳回到$(this)的作用!!关键点是end() 这样才可以帮助我们就你行链式编程
             $(this).prevAll().css('backgroundColor','blue').end().nextAll().css('backgroundColor','yellow');
           })
      });
    </script>

  </Head>

  <Body>
    <Ol id="east">
      <Li>亚特兰大 老鹰</Li>
      <Li>芝加哥 公牛</Li>
      <Li>波士顿 凯尔特人</Li>
      <Li>夏洛特 黄蜂</Li>
      <Li>克利夫兰 骑士</Li>
      <Li>布鲁克林 篮网</Li>
      <Li>迈阿密 热火</Li>
      <Li>底特律 活塞</Li>
      <Li>纽约 尼克斯</Li>
      <Li>奥兰多 魔术</Li>
      <Li>印第安纳 步行者</Li>
      <Li>费城 76人</Li>
      <Li>华盛顿 奇才</Li>
      <Li>密尔沃基 雄鹿</Li>
      <Li>多伦多 猛龙</Li>
    </Ol>
    <Ol id="west">
      <Li>金州 勇士</Li>
      <Li>丹佛 掘金</Li>
      <Li>达拉斯 小牛</Li>
      <Li>洛杉矶 快船</Li>
      <Li>明尼苏达 森林狼</Li>
      <Li>休斯顿 火箭</Li>
      <Li>洛杉矶 湖人</Li>
      <Li>奥克兰陈马成 雷霆</Li>
      <Li>孟菲斯 灰熊</Li>
      <Li>菲尼克斯 太阳</Li>
      <Li>波特兰 开拓者</Li>
      <Li>新奥尔良 鹈鹕</Li>
      <Li>萨克拉门托 国王</Li>
      <Li>犹他 爵士</Li>
      <Li>圣安东尼奥 马刺</Li>
    </Ol>
    <Ul id="other">
      <Li>步行者</Li>
      <Li>山猫</Li>
    </Ul>
  </Body>
</Html>

7:过滤器的练习

注意: even和odd选择器 index从0开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
  <head>
    <title>  test  the start mark</title>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#btnFirst').click(function(){
          $('div:first').css('backgroundColor','green').siblings().css('backgroundColor','blue');
        });
        $('#btnFirst2').click(function(){
          $('div').first().css('backgroundColor','red').siblings().css('backgroundColor','blue');
        });
        $('#Last').click(function(){
          $('div:last').css('backgroundColor','purple').siblings().css('backgroundColor','blue');
        });
        $('#Last2').click(function(){
          $('div').last().css('backgroundColor','red').siblings().css('backgroundColor','blue');
        });

        $('#eq2').click(function(){
          $('div:eq(2)').css('backgroundColor','black').siblings().css('backgroundColor','blue');
        });
        $('#lt2').click(function(){
          //范围性内容 不能用siblings
          //$('div:lt(2)').css('backgroundColor','black').siblings().css('backgroundColor','blue');
          $('div:lt(2)').css('backgroundColor','black');
        });
        $('#gt2').click(function(){
        // $('div:gt(2)').css('backgroundColor','red').siblings().css('backgroundColor','blue');
          $('div:gt(2)').css('backgroundColor','red');
        });
        //下标从0开始  index 所以表面上even是第一个元素 
        $('#even2').click(function(){
         // $('div:even').css('backgroundColor','red').siblings().css('backgroundColor','blue');
          $('div:even').css('backgroundColor','red');
        });
        $('#odd2').click(function(){
          //$('div:odd').css('backgroundColor','red').siblings().css('backgroundColor','blue');
          $('div:odd').css('backgroundColor','red');
        });
        // 当然也是可以组合起来  $('div:gt(3):lt(2)')
        // $('div:not(.cls)')
        $('#olivenot').click(function(){
          //必须加上. 句话才是有效的
          $('div:not(.cls)').css('backgroundColor','yellow');
        });
      $('#header1').click(function(){
        $('h1,h2,h3,h4,h5,h6').css('backgroundColor','gray');
      });
      $('#header2').click(function(){
        $(':header').css('backgroundColor','yellow');
      });



      });
    </script>
    <style type="text/css">
      div
      {
        width:150px;
        height:30px;
        margin-bottom:10px;
        background-color:blue;
      }
      td
      {
        border:1px solid red;
      }
      .cls
      {
           background-color:olive;
      }
    </style>
  </head>


  <body>
    <Input type="button" id="btnFirst" value="divColorToGreenFirst"/>
    <Input type="button" id="btnFirst2" value="divColorToGreenFirst2"/>
    <Input type="button" id="Last" value="divColorToGreenLast"/>
    <Input type="button" id="Last2" value="divColorToGreenLast2"/>
    <Input type="button" id="gt2" value="divColorToGreenGreater2"/>
    <Input type="button" id="eq2" value="divColorToGreenEqual2"/>
    <Input type="button" id="lt2" value="divColorToGreenLess2"/>
    <Input type="button" id="even2" value="divColorToGreenEven"/>
    <Input type="button" id="odd2" value="divColorToGreenOdd"/>
    <Input type="button" id="olivenot" value="not olive"/>
    <Input type="button" id="header1" value="header1"/>
    <Input type="button" id="header2" value="header2"/>
    <Div></Div>
    <Div></Div>
    <Div class="cls"></Div>
    <Div></Div>
    <Div></Div>

    <H1>Header 1</H1>
    <H2>Header 2</H2>
    <H3>Header 3</H3>
    <H4>Header 4</H4>
    <H5>Header 5</H5>
    <H6>Header 6</H6>

  </body>
</html>

一个有趣的slideup and down 小案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    </style>
     <script src="jquery-2.1.3.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $('#message1').css({ 'backgroundColor': '#f00', 'text-align': 'center','width':'200px' }).hide();
             $("#message2").css({ 'backgroundColor': 'gray', 'text-align': 'center','width': '200px' }).click(function () {
                 $(this).slideUp();
                 $("#message1").slideDown();
             });
         });
     </script>
</head>
<body>
<p id="message1">Welome to My Blog</p>

<p id="message2">Welcome to My Facebook</p>
</body>
</html>

8: 评分和addClass

.end()断链的使用,之所以要断链也是因为返回来的是集合,而不是原先的对象 注意:

  //测试开关灯
  //隐含着规律是:jquery获得的都是集合的元素
//做判断一定得是 $(function(){})里面中

五角星是直接输入,而不是通过图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
  <head>
    <title>  test  the start mark</title>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>
    <script type="text/javascript">

      // 测试评分
      $(function(){
        $('#tb td').mouseover(function(){
            //$(this).prevall().css('backgroundcolor','red');
            $(this).text('○').prevall().text('○').end().nextall().text('☆');
        });
        $('#tb td').mouseout(function()
        {
          $('#tb td').text('☆');
        });
      });
    </script>


    <script type="text/javascript">
      //测试开关灯
      //隐含着规律是:jquery获得的都是集合的元素
    //做判断一定得是 $(function(){})里面中
    $(function(){
      if($('#btn').length>0)
        {
          alert('存在id=#tb的标签');
        }else
        {
          alert('不存在id=#tb的标签');
        }
        $('#btnopen').click(function(){
          $('body').addclass('cls');
        });
        $('#btnclose').click(function(){
          $('body').removeclass('cls');
        });
        $('#btncloseopen').click(function(){
          if($('body').hasclass('cls'))
            {
                $('body').removeclass('cls');
            }else
            {
                $('body').addclass('cls');

            }
        });
        $('#btncloseopen2').click(function(){
            $('body').toggleclass('cls');
        });

    });


    </script>
    <style type="text/css">
      .cls
      {
        background-color:black;
      }
      td
      {
        border:1px solid red;
      }
    </style>
  </head>

  <body>
    <table id="tb" style="width:250px;height:20px;text-align:center; font-size:20px ;border:1px solid black;cursor:pointer">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <input type='button' name="hello" value="hello" id="btn"/>
    <input type='button' name="open" value="turn on the light" id="btnopen"/>
    <input type='button' name="close" value="turn off the light" id="btnclose"/>
    <input type='button' name="openclose" value="turn off|on the light" id="btncloseopen"/>
    <input type='button' name="openclose2" value="turn off|on the light2" id="btncloseopen2"/>
  </body>
</html>

两个综合实验:

case1: 数组 练习join() append() sort() splice() hover()悬停事件 concat()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<Html>
  <Head>
    <Title>  test  the start mark</Title>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>

    <!--1 touppercase-->
    <style type="text/css">
      .hover
      {
          background-color:red;
          font-size:24px;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        //核心:touppercase
        // Good!  Let the array become beautiful
        var namePostion=$('#names');
        var Member=['basket','foot','tennis','running','pingpong','net'];
        // map() 迭代数组中每个元素  并为每个元素分别调用一次回调函数
        Member =$.map(Member,function(value,index){
          return(index+1+'.'+value.toUpperCase());
        });
        $.each(Member,function(index,value){
          namePostion.append($('<Li class="sport">'+value+'</Li>'));
        });

        //使用了悬停事件
        $('.sport').hover(function(){
           //   alert('ok');
              $(this).addClass('hover');
        },function(){
              $(this).removeClass('hover');
           //   alert('byel');
        });

      })
    </script>
    <!--2 grep-->
    <style type="text/css">
      #All
      {
        background-color:green;

      }
      #Part
      {
        background-color:gray;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        var Member=['basket','foot','tennis','running','pingpong','net'];
        //一定要注意在p和#All不要加入空格
        // join通过<br>来划分数组中的元素
        $('p#All').append(Member.join('<br/>'));
        //grep() 分析数组的所有元素,把不想要的元素过滤掉。
        Member = $.grep(Member,function(value){
          return value.length > 6;
        });
        $('p#Part').append(Member.join('<br/>'));
      });


    </script>

    <!--3 join sort-->

    <style type="text/css">

      .All
      {
        background-color:red;
      }
      .Part
      {
        background-color:gray;
      }
      .AllNumber
      {
        background-color:blue;
      }
      .PartNumber
      {
        background-color:lime;
      }
    </style>



    <script type="text/javascript">
      $(function(){
        var Member=['basket','foot','tennis','running','pingpong','net'];
        //重复的一个练习
        $('p.All').append(Member.join('<Br>'));
        $('p.Part').append(Member.sort().join('</Br>'));

        var Number1 = [12,43,2,34,6,34];
        $('p.AllNumber').append(Number1.join('<Br/>'));

        // a b 两个值 进行比较  大的那个放在后排
        Number1 =  Number1.sort(function(a,b){
          return a-b;
        });
        $('p.partNumber').append(Number1.join('<Br/>'));

      });

    </script>

    <!--4 splice-->
    <style type="text/css">

      .Part1
      {
        background-color:lime;
      }

      .Remain
      {
        background-color:red;
      }
    </style>



    <script type="text/javascript">

      $(function(){
        var Member=['basket','foot','tennis','running','pingpong','net'];
        //第一个参数为索引开始   第二个参数为删除的个数     splice作用返回前两个成员到Filter数组
        var Filter=Member.splice(0,2);
        $('p.Part1').append(Filter.join('<Br/>'));
        $('p.Remain').append(Member.join('<Br/>'));
      })

    </script>

    <!--5  concat -->
    <style type="text/css">

      .First
      {
        background-color:lime;
      }
      .Last
      {
        background-color:gray;
      }
      .Whole
      {
        background-color:red;
      }
    </style>



    <script type="text/javascript">
      $(function(){
        var first=['basket','foot','tennis'];
        var last=['running','pingpong','net'];
        $('p.First').append(first.join('<Br/>'));
        $('p.Last').append(last.join('<Br/>'));
        var whole=first.concat(last);
        $('p.Whole').append(whole.join('<Br/>'));
      });

    </script>


    <!--6  Json sort-->
    <style type="text/css">
      .All1
      {
        background-color:green;
      }


    </style>



    <script type="text/javascript">
      $(function(){
        var students=[{Name:'Qianqian',Role:'Administrator',Age:'45'},
          {Name:'Lilei',Role:'Programmer',Age:'15'},
          {Name:'Dongyuliang',Role:'Seller',Age:'25'},
          {Name:'LiFeng',Role:'manager',Age:'25'},
          {Name:'zhaoli',Role:'Architector',Age:'35'}
        ];

        //有点类似 Java中的treeset的作用  需要设置一个比较器
        students=students.sort(function(studnetA,studentB){
          if(studnetA.name>studentB.name){
            return 1;
          }else if(studnetA.name < studentB.name)
          {
            return -1;
          }else
          {
            return 0;
          }
        });
        $.each(students,function(index,value){
          $('p.All1').append('<Tr><Td>>'+value.Name+'</Td><Td>'+value.Role+'</Td><Td>'+value.Age+'</Td></Tr>');
        });
      });

    </script>

  </Head>

  <Body>
    <p id="names"></P>

    <hr/>
    <H3> Member Name</H3>
    <P id="All"></P>
    <H3> Part Name</H3>
    <P id="Part"></P>
    <Hr/>

    <H3>Not sort string array</H3>
    <P class="All"></P>
    <H3> sort string array</H3>
    <P class="Part"></P>
    <H3>Not sort number</H3>
    <P class="AllNumber"></P>
    <H3> sort number</H3>
    <P class="PartNumber"></P>

    <Hr/>
    <H3>get the  Filer array</H3>
    <P class="Part1"></P>
    <H3>get the remain array</H3>
    <P class="Remain"></P>

    <Hr/>
    <H3>Get the First part</H3>
    <P class="First"></P>
    <H3>Get the Last part</H3>
    <P class="Last"></P>
    <H3>Get the Whole part</H3>
    <P class="Whole"></P>


    <Hr>
    <H3>Member Info</H3>
    <P class="All1"></P>


  </Body>

</Html>

case2: 事件触发

bind() unbind() trigger() 多类的设置 class=“ ”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<Html>
  <Head>
    <Title>  test  the common jQuery event </Title>
    <script type="text/javascript" src="jquery-2.1.3.js"></script>


    <!--1  trigger   bind  unbind-->
    <style type="text/css">
      .Red
      {
          color:red;
      }
      .Green
      {
        color:green;
      }
      .unbind
      {
        color:lime
      }
      .buttons
      {
        width:150px;
        height:20px;
        margin:5px;
        border:2px solid;
        float:left;
        font-weight:bold;
        background-color:gray;
      }
      .Down
      {
        color:green;
      }
      .Up
      {
        color:red;
      }
      .Over
      {
        color:lime;
      }
      .Mouses
      {
        width:150px;
        height:20px;
        margin:5px;
        border:2px solid;
        float:left;
        font-weight:bold;
        background-color:gray;
      }

    </style>
    <script type="text/javascript">
      //可不敢再犯这个错误
      //$('.button').bind('click',function(){
    $(function(){
       $('.buttons').bind('click',function(){
        alert('You have clicked '+$(this).text()); //innerText()
        // trigger without click !!!  automated;
      //可不敢再犯这个错误
        //$(.Green).trigger('click');
       // $('.Green').trigger('click');

       // unbindf test
        $('.Unbind').bind('click',function(){
          alert('You have clicked the'+$(this).text()+'<Br/>After that the button will unbind the click event!');
          $('.Unbind').unbind('click');

        })
      });

      //mouse event
      $('.Mouses').bind('mousedown',function(){
          alert('your mouse have been pressed down'+$(this).text());
      });

      $('.Mouses').bind('mouseup',function(){
          alert('your mouse have been pressed up'+$(this).text());
      });

      $('.Mouses').bind('mouseover',function(){
          alert('your mouse have been pressed over'+$(this).text());
      });


      //focus test
      $('#btn').focus(function(){
        alert('ol');
        $('#btn').html('<Font color="red"><Strong>Focus</Strong></Font>');
      });
      $('#btn').blur(function(){
        alert('fuck');
        $('#btn').html('<Font color="gray"><Italic>Focus</Italic></Font>');
      });


    });
    </script>



  </Head>

  <Body>
    <H3>Test bind and trigger</H3>
    <!--Multiple classes !!! Take Note-->
    <Span class="Red buttons">Red</Span>
    <Span class="Green buttons">Green</Span>
    <Span class="Unbind buttons">Unbind it</Span>
    <Br/>
    <hr/>
    <Br/>
    <H3>Test bind and trigger</H3>
    <!--Multiple classes !!! Take Note-->
    <Span class="Mouses Down">Mouse Down</Span>
    <Span class="Mouses Up">Mouse Up</Span>
    <Span class="Mouses Over">Mouse over</Span>

    <Br/>
    <hr/>
    <Br/>
    <H3>Test focus and blur</H3>
    <!--     Input cannot  html  -->
    <Input type="text" name="mouse" id="btn" values="focus"/>

    </Div>



  </Body>

</Html>