周记 2015.6.21

1. this和$(this)的区别

    this.title = "Test";

    this其实是一个Html元素(textbox), textbox有text属性,所以这样写是完全没有什么问题的。

    $(this).attr(’title’, ‘Test’);

    $(this)是一个JQuery对象,JQuery拥有attr()方法可以get/set DOM对象的属性。使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。

 

2. 如何使用样式

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

    外部样式表

    当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

    <head>

           <link rel="stylesheet" type="text/css" href="mystyle.css">

    </head>

    内部样式表

    当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

    <head>

              <style type="text/css">

                        body {background-color: red}

                        p {margin-left: 20px}

              </style>

     </head>

     内联样式

     当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

     <p style="color: red; margin-left: 20px">

           This is a paragraph

     </p>

 

3. jquery的声明:

    $(document).ready(function(){});

    $().ready(function(){});

 

4. 隐藏与显示:

    $("#hide").click(function(){

          $("p").hide();
    });

 

    $("#show").click(function(){

         $("p").show();
    });

 

5. div 显示与隐藏

    <div style="border:1px solid #000;background:#eee">

         <span style="width:200;height:200;visibility:hidden"></span> // CSS属性为visibility:hidden的对象

    </div><br>

    <div style="border:1px solid #000;background:#666">

    <span style="width:200;height:200;display:none"></span> // CSS属性为display:none的对象


    特别提示:

    用visibility属性控制隐藏的对象还占据着它显示时的位置,而display则没有。

    特别说明

    display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:

    none 隐藏元素,不保留元素显示时的空间。

    block块方式显示元素。

    inline 以内嵌方式显示元素。


6. 页面加载完毕触发事件:

     window.onload = function(){

         $("#addIndex").click();

     }

 

7. 判断是否为IE浏览器设置相关属性

    if("ActiveXObject" in window){

           $("#pageContainer").css("margin-top","17px");

          $("#sidebarToggler").css("margin-top","25px");

    }

8. padding 简写属性在一个声明中设置所有内边距属性。

   说明

   这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,

   有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

    padding:10px 5px 15px 20px;

   上内边距是 10px

   右内边距是 5px

   下内边距是 15px

   左内边距是 20px

   可以只不写全部,例如:

   padding:10px 5px;

   上内边距和下内边距是 10px

   右内边距和左内边距是 5px

 

9. $.each( collection, callback(indexInArray, valueOfElement) )

   其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,

   而没有参数也是可以的。

   $.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体

   中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字)

    $.each([52, 97], function(index, value) {

           alert(index + ‘: ‘ + value); 

    });

    $.each(map, function(key, value) {

            alert(key + ‘: ‘ + value); 

    }); 

    回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历

    遍历对象的属性,传入 key和value :

    $.each( { name: “John”, lang: “JS” }, function(k, v){

              alert( “Key: ” + k + “, Value: ” + v );

     }); 

你可能感兴趣的:(周记 2015.6.21)