周记 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 );
});