-
绝对定位与相对定位
W3CFUNS解释
属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置
W3CFUNS实例
-
如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用 relative，计算的时候不要忘记计算padding的值。
-
-
$(“#test”).each(i,item)方法:
函数中的this关键字指向一个不同的DOM元素
返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
利用each给元素设置不同样式：
$(“.laispace”).each(function(i){this.style.color=[‘#f00’,’#0f0’,’#00f’][i]});
$.each(obj, fn)
通用例遍方法，可用于例遍对象和数组。
-DOM和JQ对象互转时要注意：

$(document.getElementById(‘test’)) 相当于$(“#test”);
$(“#test”)[0]或者$(“#test”).get(0)
注意：eq()返回JQ对象，get()返回DOM对象，而JQ对象只能调用JQ方法，DOM对象同理
$(“div”).eq(2).html();//调用jquery对象的方法
$(“div”).get(2).innerHTML;//调用dom的方法属性-$(“$bt1”).click(function(){
$(“#bt2”).click(); //点击按钮1时也触发按钮2
})
-
扩展自定义功能:
[javascript]

$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
});//为在jquery的命名空间中扩展了min,max两个方法
//可以像下面这样使用
var a = 10,b=20;
var max = $.max(a,b);//20
var min = $.min(a.b);//10
[/javascript]

6月 1 2013

Javascript17

Javascript碎片积累

-
JS中的Image对象：

[javascript]
function getImageSize(imageEl) {
var i = new Image();
i.src = imageEl.src;
return new Array(i.width, i.height);
}
[/javascript]

image对象现在一般常用来预加载一些图片，先将其装入 DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。
需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。
-
for 和 class 是 JavaScript 中的关键字，所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替。

[javascript]
function getAttr(el, attrName){
var attr = {‘for’:’htmlFor’, ‘class’:’className’}[attrName] || attrName;
}
[/javascript]

-
交换两个变量值的巧妙方法，利用数组：
foo = [bar, bar=foo][0]; // 多巧妙啊！编程的时候不要忘记思考，否则你就只是一个完成工作的机器。
-
双感叹号的用法：!! 一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false。
-
注意一些类型转换：

[javascript]
a=parseInt(“1234″)
a=”1234″-0 //转换为数字
b=1234+”" //转换为字符串
c=someObject.toString() //将对象转换为字符串
[/javascript]

其中第1种、第4种为显式转换，2、3为隐式转换
布尔型的转换，javascript约定规则为
false、undefinded、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true
-
在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent
-
jQuery.trim()去除字符串前后的空格
-
jQuery.inArray()判断元素是否在数组中

[javascript]
var arr = ["html", "css", "js", "jquery"];
$.inArray(‘js’,arr);
[/javascript]

-
编写一个简单的 jQuery 插件（模板）

[javascript]
//You need an anonymous function to wrap around your function to avoid conflict
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin’s name
pluginname: function() {
//options
var defaults = {
option1: "default_value"
}
var options = $.extend(defaults, options);
//a public method
this.methodName: function () {
//call this method via $.pluginname().methodName();
}
//Iterate over the current set of matched elements
return this.each(function() {
var o = options;
//code to be inserted here
});
}
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we’ll stick to $ (I like dollar sign: ) )
})(jQuery);
[/javascript]

-
小技巧：在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器（需要浏览器支持 HTML5 属性 contenteditable）原文
-
所有JS对象共享的方法是toString()，返回该对象序列化格式后的字符串
-
元素的client属性(只读)指元素的内容部分再加上padding的大小，不包括border和滚动条占用的空间，故document元素的clientHeight和clientWidth属性，就代表了网页的相对大小。

[javascript]
// 获得网页的相对大小
function getViewport(){ // 页面加载完成后才能运行
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
// IE6 quirks模式
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}
[/javascript]

[javascript]
// 获取网页的绝对大小
// 如果网页内容能够在浏览器窗口中全部显示,不同浏览器有不同的处理，这两个值未必相等,要取它们之中较大的那个值
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),

height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
[/javascript]

-
每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

// 获取绝对位置的横坐标和纵坐标
// 由于在表格和iframe中，offsetParent对象未必等于父容器，所以以下函数对于表格和iframe中的元素不适用。

[javascript]
function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualLeft;
　　}
　　function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualTop;
　　}
[/javascript]

// 获取网页元素的相对位置:绝对坐标减去滚动条滚动的距离

[javascript]
function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft;
　　　　}
　　　　return actualLeft-elementScrollLeft;
　　}
　　function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop;
　　　　}
　　　　return actualTop-elementScrollTop;
　　}
// scrollTop和scrollLeft属性是可以赋值的
[/javascript]

-
-
object.prop和object[‘prop’]是等价的，当属性是带空格的string时就只能用方括号了：person[‘first name’];
-
for…in 循环输出的属性名顺序不可预测,使用之前先检测对象是否为null 或者 undefined
-
hasOwnProperty是js中唯一一个处理属性但是不查找原型链的函数

[javascript]
Object.prototype.prop = ‘propsss’;
var obj = {und:undefined};
obj.prop; // propsss
‘und’ in obj; // true
obj.hasOwnProperty(‘prop’); // false
obj.hasOwnProperty(‘und’); // true
//只有hasOwnProperty可以给出正确和期望的结果，尤其在遍历一个对象时
//除了hasOwnProperty外，没有其他方法可以排除原型链上的属性（不是定义在对象自身上的属性）
//如果hasOwnProperty被占用呢？来看：
var obj = {
hasOwnProperty: function(){
return false;
},
prop: ‘this is bad…’
};
obj.hasOwnProperty(‘prop’); // 总是返回false
//这样解决：
{}.hasOwnProperty.call(obj,’prop’); // 返回true
[/javascript]

-
Object的每个实例都具有下列属性方法：
1.Constructor：保存着用于创建当前对象的函数上面例子构造函数就是 Object()
2.hasOwnProperty(prop):检查给定的属性是否在当前对象实例中（而不是在实例的原型中）。作为参数的属性必须以string形式指定
3.isPrototypeOf(object):用于检查传入的对象是否是另一个对象的原型。
4.propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用for in语句
5.toLocaleString():返回对象的字符串表示，与环境的地区对应
6.toString():同上
7.valueOf(): 返回对象的字符串、number、Boolean表示。通常与toString()相同
-
javascript中的乘法问题：
可用 10000 作为基数确保精度，如 31.12 10000 9.7 / 10000
-
function语句在解析时会被提升，对代码求值时js引擎在第一遍会声明函数并将它们放到源代码树的顶部。

[javascript]
alert(sum(10,10))
function sum(n1,n2){
return n1+n2;
}
//单独使用下面代码时，函数表达式会出错：
alert(sum(10,10));
var sum = function (n1,n2){
return n1+n2;
}
[/javascript]

命名函数表达式即被认为是函数声明也被认为是函数表达式

[javascript]
typeof g; // "function"
var f = function g(){};
//上面这个例子论证了 jScript 是如何把一个命名函数表达式处理成一个函数声明的
//在函数声明发生之前就把 g 给解析了【在IE中检测】
[/javascript]

-
this是在函数调用时才被确定的而不是定义的时候

[javascript]
var Dog = {
toString: function() { return ‘dog’;},
fn: function() { alert(this);},
};
var Cat = {
toString: function() { return ‘cat’;}
};
Dog.fn(); // dog
Dog‘fn’ // dog
Cat.fn = Dog.fn;
Cat.fn(); // cat
var func = Dog.fn;
func(); // window
[/javascript]

apply和call的区别，在于apply用数组传递参数，而call用多参数逗号传递参数：

[javascript]

function myFunc(arg1,arg2,arg3){

// code …

}

myFunc.apply(null,[arg1,arg2,aeg3]);

myFunc.call(null,arg1,arg2,arg3);

// 第一个参数指定调用函数myFunc的对象

[/javascript]

构造函数的理解：当new修饰符修饰函数时，this就会指向新对象，该对象会自动返回，称之为构造函数：

[javascript]
function Person(name){
this.name = name;
this.sayName = function(){
alert("我的大名是：" + this.name);
}
}

var person1 = new Person("xiaolai"); // 构造函数返回一个对象，赋值给变量 xiaolai
person1.sayName(); // 『我的大名是：xiaolai』
[/javascript]

-
March 6, 2014—添加—

获取元素的classList:

[javascript]
selector.classList 获取所有的class
selector.clasList.add(value); // 添加类
selector.clasList.remove(value); // 删除类
selector.clasList.toggle(value); // 切换类
selector.clasList.contains(value); // 判断是否包含类
[/javascript]

获取DOM中获得了焦点的元素

[javascript]
document.activeElement
[/javascript]

判断DOM是否加载完成

[javascript]
document.readyState // ‘complete’ or ‘loading’
[/javascript]

判断浏览器采用了哪种渲染模式

[javascript]
document.compatMode // ‘CSS1Compat’ 为标准模式，’BackCompat’ 为混杂模式
[/javascript]

判断浏览器采用的字符集

[javascript]
document.defaultCharset // 默认字符集
document.charset // 采用的字符集
[/javascript]

访问所有自定义属性

[javascript]
selector.dataset.myid; // 获取div[data-myid=‘100’]中的100
[/javascript]

将某个元素调入视窗内

[javascript]
selector.scrollIntoView()
[/javascript]

返回元素的子元素节点（不包括其他节点）

[javascript]
selector.children // 是HTMLCollection的一个实例
[/javascript]

获取视窗大小
[javascript]
function getViewport() {
// 判断是否混杂模式
if (document.compatMode == ‘BackCompat’) {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
[/javascript]
获取元素在视窗内的位置
[javascript]
selector.getBoundingClientRegt() // 返回对象含属性 left right top bottom
[/javascript]
获取页面的样式表
[javascript]
document.styleSheets;
document.styleSheets[0].disabled = true; // 禁用第一个样式表
[/javascript]

6月 1 2013

Tools6

Goagent使用心得

Goagent实在是太棒了，可畅游被Qiang了的网站。初次安装可详见 https://code.google.com/p/goagent/wiki/InstallGuide

小赖使用总结：

1.goagent突然上不去了？

可能是国内cn的代理IP被封了，这时候可打开 local/proxy.ini 修改profile = google_cn 为 profile = google_hk

2.翻Qiang点击切换按钮麻烦？

打开 SwitchySharp ->选项->切换规则，点击【新建规则】，编写如下：注意 ://.twitter.com/ 里的是通配符，指可匹配任意字符

3.手动切换代理很麻烦？

按2的设置后，点击 SwitchySharp->自动切换模式，那么每次浏览时，goagent就会按建立好的切换规则来选择是否使用代理来翻Qiang了

4.打开goagent.exe麻烦？

找到goage.exe右键创建快捷方式，把它放到开始菜单-所有程序-启动的文件夹里（win7下即C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup）

5.还想开机自启动？

按3和4设置后，每次只要一开机，goagent就启动了，每次只要一翻Qiang,goagent就自动代理了。

打开local/proxy.ini 找到visible = 1改为visible = 0可将goagent隐藏在任务栏哦

6.看完一部片（别邪恶啊）就上不去了？

Goagent一个APPID有1G/天的流量使用，刷刷twitter玩玩facebook就够了，可要是在youtube上看视频耗掉了流量，1G耗完就会显示 “goagent 服务器未发送任何数据，因此无法加载该网页“，这并不是像1所说的代理IP被封了或者goagent自己抽风了，而是当前APPID的1G流量已经用完。打开https://appengine.google.com/dashboard?&app_id=s~**yourAppid** 就可以看到Outgoing Bandwidth为100%啦！

7.出现了6所说的情况流量不够用？

可回到https://appengine.google.com/，点击【Create Application】，输入Application Identifier 如myappid-2（要check Availability），输入Application Title（可任填），然后再次点击【Create Application】。然后打开 local/proxy.ini 编辑 appid = myappid-1 | myappid-2 （添加myappid-2，用 | 隔开），再打开servr/uploader.bat 输入 myappid-2，就可以将这个新的配置上传了，打开https://appengine.google.com会发现myappid-2在Running,代表新增的myappid-2已经激活，重启goagent.exe，打开浏览器，又可以继续翻Qiang啦！

以此类推，可最多申请十个APPID，共10G的流量。

Laispace - 来思碑

天酬勤笨先飞，乐观进取。

wordpress for SAE 搬家心得

jQuery碎片积累

Javascript碎片积累

Goagent使用心得