toggle(fn,fn)

每次点击后依次调用函数;如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能,不需要另外.click(fn)了

$(document).ready(function(){

$(“.btn1”).click(function(){
$(“p”).toggle();
});
});

很多时候我们都需要这种有规律的切换,第一次点击做什么,第二次做什么,第三次做什么……

toggle里面你可以写无数个函数(function),jquery会按次数进入循环,如果你只写2个,第三次进入的还是第一个方法……如果3个方法,第四次进入的就是第一个方法

遇到第一次无效的情况,那就是最后忘记添加“.trigger(‘click’);”切记!必须加!

 $(this).toggle(
     function () {
        // 第一次……
     },
     function () {
        // 第二次……
     }
 ).trigger('click');
$("#id").css('display','none'); 
$("#id").css('display','block'); 
或 
$("#id")[0].style.display = 'none';
Advertisements

Set/Clear Default Input Value

very old snippet from CSS-tricks:

$(‘.default-value’).each(function() { var default_value = this.value; $(this).focus(function(){ if(this.value == default_value) { this.value = ”; } }); $(this).blur(function(){ if(this.value == ”) { this.value = default_value; } }); });

clear textbox after form submit

Add an id for the textarea.

<textarea name='comment' id='comment'></textarea>

Hook into the submit process and add:

$('#comment').val('');

 input placeholder attribute

adding HTML5 placeholder behavior to the browsers that don’t support it. We are going to use a jQuery plugin by Mathias Bynens. Check out the GitHub repo for details.

Use the plugin as follows:

$('input, textarea').placeholder();

You’ll still be able to use jQuery#val() to get and set the input values. If the element is currently showing a placeholder, .val()will return an empty string instead of the placeholder text, just like it does in browsers with a native @placeholder implementation. Calling .val('') to set an element’s value to the empty string will result in the placeholder text (re)appearing.

CSS

The plugin automatically adds class="placeholder" to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:

input, textarea { color: #000; }
.placeholder { color: #aaa; }
  • Automatically checks if the browser natively supports the HTML5 placeholder attribute for input and textarea elements. If this is the case, the plugin won’t do anything. If @placeholder is only supported for input elements, the plugin will leave those alone and apply to textareas exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)
  • Caches the results of its two feature tests in jQuery.fn.placeholder.input and jQuery.fn.placeholder.textarea. For example, if @placeholder is natively supported for input elements, jQuery.fn.placeholder.input will be true. After loading the plugin, you can re-use these properties in your own code.
    • Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra input element to fake@placeholder for password inputs. This means you can safely do stuff like:
      <label for="bar">Example label</label>
      <input type="password" placeholder="foo" id="bar">

      And the <label> will always point to the <input> element you’d expect. Also, all CSS styles based on the ID will just work™.

placeholder

how to use?

Call $(selector).placeholder(options) on an input element with an attribute placeholder.

$('input#search').placeholder();
$(":input[placeholder]").placeholder();

Options

The following options can be passed to the plugin.

  • activeClass –The class to apply when input is blurred. Defaults to placeholder.
  • focusClass – The class to apply when input is active. Defaults to placeholderFocus.
  • overrideSupport –Pass true to force the plugin to work on browsers which natively support the placeholderattribute. Defaults to false.
  • preventRefreshIssues – Optionally attempt to prevent Firefox from auto filling values on refresh, by turning autocompleteoff. Defaults to true.

https://github.com/Strangemother/jQuery.placeholder/blob/master/example.html

Another placeholder:

http://www.andresvidal.com/labs/placeholder.html

$('input#search').placeholder({onBlur: "blurred", onChange: "changed"});


;( function( ) {} );

JavaScript Semicolon Insertion

Everything you need to know

jquery 库和其他javascript代码里经常看到函数前面有分号,加号或者其他操作符号。

在函数前面加:+  ;  ~ !  – 等等一元操作符,javascript 引擎都会将后面的statement转换成表达式(expression),这样就可以调用了。

一、分号

加分号除了自调用的目的外,还有另外一个目的。当两个js文件压缩在一起的时候,为了防止上一个文件没有以分号结束,如果那也的话就会引起错误:

A.js文件的内容:

1
2
function add (a,b){return a+b}
document.write(‘hello world’)

B.js文件的内容:document.write(‘hello javascript’);

合并压缩后的文件:document.write(‘hello world’)document.write(‘hello javascript’);

这样就会发生语法错误。当然这样简单的js代码很少会分成两个文件来写。但现实世界,说能说的清楚。

所以在函数前加分号又多了一层意思:防止多个.js文件压缩合并后产生语法冲突。

二、加号

在javascript里,加号有转换类型的作用,会将后面的值转换成number,所以当执行:console.log(typeof +function(){});

会得到结果number

其实最好的办法是加括号

(function(){console.log(‘hello world’)})();

javascript 函数之——函数前面的一元操作符(unary)

via http://html5lin.com/javascript-function-and-unary/

javascript中为何在匿名function函数后面还外加一个括号

(function(){…}())或 (function(){})()

匿名函数自调用”,也就是说,定义一个匿名函数,然后马上调用它(因为它是匿名的,如果不立即调用就获取不到该函数的引用了)。

通常它被应用在一些大型的JS框架中(如上面所说的),因为这个匿名函数的函数体相当于提供一个匿名的名字空间,这样就不会再与用户自定义的JS函数、变量、对象发生冲突了。尽管JS没有显示地提供命名空间的定义和使用机制,但这种匿名方式却不失为是一种很好的解决命名空间问题的方法。

(function(){代码})()就等于执行了一个函数,只不过它是匿名的而已。如果在这个匿名函数内部想再次调用这个函数,就需要调用constructor属性了(这是Object中定义的,JS的继承机制如同Java一样保证了了所有对象都继承Object类)。

1、下列哪些正确?(B、C

A.function(){

       alert(“Here!”);

    }();

B.(function(){

       alert(“Here!”);

    })();

C.(function(){

       alert(“Here!”);

    }());

2、下列哪个结果是正确的?(A、B、C、D

A.(function(a1,a2){

       alert(“Here!”+(a1+a2));

    })(1,2);

B.(function(a1,a2){

       alert(“Here!” +(a1+a2));

    }(1,2));

C.void function(a1,a2){

       alert(“Here!” +(a1+a2));

    }(1,2);

D.var f = function(a1,a2){

       alert(“Here!” +(a1+a2));

    }(1,2); 

注:A 、B、C与D四种格式都正确,前两者属于同种情况的不同写法,后两种是将函数对象的返回值赋给其他变量,C是忽略函数返回值,而D正相反!

空语句。 一个分号,只有一个分号的时候,它是一个空语句,并且什么也不干。 空语句可以出现在任何一个语句可以出现的地方。

有些情况当需要一个语句时,空语句是很有用的,但不是必须的。 这种情况下,块代码也是允许的,只是一个空的块比一个分号要长而已。

例如: 下面2个语句是等效的

while(processNextItem() > 0);
while(processNextItem() > 0) {}
人不是机器,总有可能忘记写分号。上面的分析说明,对于人来说,行首特例加分号的策略其实更简单易行。

‘use strict’ javascript

The EcmaScript 5 definition includes a declaration to switch the engine running your code into so-called “strict mode.” This is often touted as an obviously beneficial way to catch programmer mistakes, because in strict mode a browser will throw runtime errors when it encounters script that, while not syntactically wrong, is at least bad practice.

Strict mode helps out in a couple ways:

  • It catches some common coding bloopers, throwing exceptions.
  • It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
  • It disables features that are confusing or poorly thought out.

ECMAScript 5 Strict Mode, JSON, and More

 

Debugging JavaScript in Chrome

use the JavaScript Console to debug your program.

  1. Finding Errors in your Program
  2. Tracing and Breakpoints
  3. Examining Databases
  4. Looking at the Cache

Execution control

The execution control buttons are located at the top of the side panels and allow you to step through code. The buttons available are:

 Continue: continues code execution until we encounter another breakpoint.

 Step over: step through code line-by-line to get insights into how each line affects the variables being updated. Should your code call another function, the debugger won’t jump into its code, instead stepping over so that the focus remains on the current function.

 Step into: like Step over, however clicking Step into at the function call will cause the debugger to move its execution to the first line in the functions definition.

Step out: having stepped into a function, clicking this will cause the remainder of the function definition to be run and the debugger will move its execution to the parent function.

Toggle breakpoints: toggles breakpoints on/off while leaving their enabled states intact.

 

JavaScript

在初期阶段,只使用HTML开发网页 ,开发的只是静态的网页。 html是不能与用户互动和提供动态变化的。 随着脚本语言出现解决了这一问题。有两种类型的脚本语言服务器端和客户端。

当网页被请求,这个请求被发送到服务器并获得数据及显示在窗口。

  • 如果客户端网页(浏览器,例如Mozilla ,火狐狸/ IE浏览器)产生动态变化将会调用客户端的脚本语言(例如-Javascript )
  • 如果服务器端的网页(服务器检查请求并且在数据传输到浏览器前依据数据更改网页)产生动态变化将会调用服务器的脚本语言(例如- php)

Java脚本代码嵌入到HTML文件中。每当浏览器访问网页,脚本与HTML文件一起被传输到浏览器。
JavaScript用于创建动态变化,验证表单,检测访客细节,创建/使用cookies,等等。JavaScript用于所有主要的浏览器,例如Internet Explorer, Mozilla, Firefox, Netscape, Opera, Safari 等等。
Java and Javascript:
不要混淆javascript 和 java 。Java是一种由Sun Microsystems开发的应用程序开发语言,与JavaScript没有关联。 Javascript 比java 创建的早。JavaScript多次被命名为java script。

字符串-例如:”sdfesdfe”
对一个字符串变量来说,赋给它的值应该用双引号引起来。
如果一个数字被双引号引起来,它会被处理为字符串而不是数字。
例如:如果

var a = “2”;
var b = “2”;

那么 a+b 将会是”22″ 而不是 4。

“等于 (==)” 和 “严格等于 (===)” 的主要不同是 “等于 (==)” 运算符是在类型转换后执行而”严格等于 (===)”是在类型转换前比较。

例如 “5” == 5
和 “5” !== 5

with语句:
“with” 语句用于操作有多个函数的对象或者多次使用一个对象的某个函数。write 函数执行了很多次而没有使用 document.write() 同时 title (document.title) 也被调用。 你可以在 “with” 语句中使用任何对象。 例如 date, math, 等等。

<script language=”javascript”>
with(document)
{
write(” 在 with 语句内 <br>”);
write(” 使用 with(对象名) 我们可以直接调用它的函数 <br>”);
write (” 标题 -“+title);
}
</script>

结果:
在 with 语句内
使用 with(对象名) 我们可以直接调用它的函数
标题 – Javascript教程-使用 with 语句例子, 代码, 函数

函数内的语句不会被自动的执行。我们必须引用或调用函数执行函数语句。只要调用函数名就可以引用函数。

<script language=”javascript”>
function test()
{
document.write(” —- 这是一个测试功能 —- “);
}

test();
</script>

结果:
—- 这是一个测试功能 —-

Math对象包括可容易的进行数学运算的方法或者函数。Math对象是内置对象并且无需像Date对象那样实例化。Math同时包括预定义的变量包括了计算中常用的常数例如圆周率Pi,自然对数LN2,log10等等…

对象Window

方法或者函数prompt(string)

说明:这种方法是用于得到动态用户的输入或者数据。它把信息做为变量。用户在弹出信息输入框中可输入数据。

<form name=tett>
<input type=text name=tf value=”测试提示” size=15>
</form>
<script language=javascript>
var df = prompt(” 输入您的姓名 “);
document.tett.tf.value = df;
</script>

在特定的时间间距后如何调用一个方法?或者在JavaScript中如何在一定的时间间隔后执行一个函数?

<script language=javascript>
function testtimeout(){
setTimeout(“printer()”,3000);
}
function printer(){
alert(” 测试时间”);
}
</script>
<form name=xcv>
<input type=button onClick=”testtimeout()” value=”测试时间”>
</form>

Document 对象:
全部用户可编辑和在浏览器中显示的 html 标签内的内容组成了 javascript 中的文档(document)对象。文档对象是任何html元素的上级对象。

ar dd = document.domain;

文档对象模型(DOM):
在进一步学习表单和事件处理之前, 我们应该明白它归属的范围。 使用 javascript 完成的对网页上的任何动作或事件基于 DOM (文档对象模型 dynamic object model)。 每一个 html 元素可以使用 javascript DOM 动态访问和控制
W3C 组织的文档对象模型 (DOM) 提供了平台和语言无关的应用界面,允许程序动态操作访问网页内容、结构以及文档样式。 文档对象模型 (DOM)是合法 HTML 的应用程序开发接口 (API)。
所有 HTML 对象及其属性可以通过 DOM 树进行访问。 例如,表单 “form1” 可以使用这种方式引用到 document.form1;

事件处理:
事件是在网页上触发的动作,多由用户完成。 有内置的称呼来处理这些事件。 例如:我们考虑表单中的一个按钮或者一个链接。如果用户把鼠标移到它上面,将会触发一个 “mouseover” 事件。我们可以捕获这样的事件并触发一个 javascript 函数来完成动作。
事件处理器通常添加一个属性到 html 标记中。使用 onMouseOver 捕获鼠标移动事件。

<script language=javascript>
function output()
{
alert(“测试按钮事件”);
}
</script>

<input type=button onMouseOver=”output()”>

表单对象 :
表单对象是为 html 中的表单创建的。 我们可以在 javascript 中用表单对象动态提交、重设表单和控制表单上的按钮、复选框的各种事件。

方法或函数:
如下为 DOM (文档对象模型, Dynamic Object Model)中可以动态控制表单的函数或方法列表
所有下述示例基于表单对象
<form name=tform action=”index.php” method=post>
<input type=button value=xxx> </form>

submit() 用于在 javascript 动态提交表单 提交时用:
document.tform.submit();
reset() 用于动态重设表单 重设时用:
document.tform.reset();
handleEvent() 用于触发事件

表单对象有如下属性。
所有下述示例基于表单元素。
<form name=tform action=”index.php” method=post>
<input type=button value=xxx> </form>

DOM 属性 说明 示例
action 用于获取或设置表单动作(action) 获取时用:
var ss = document.tform.action;
设置时用:
document.tform.action = “form-object.php”;
elements 属性 “elements” 返回表单中包括所有元素的数组(如按钮、文本框和复选框等等) 获取时用:
var ss = document.tform.elements;
encoding 用于获取或设置表单的 enctype 属性。 获取时用:
var ss = document.tform.encoding;
设置时用:
document.tform.encoding = “”;
length 属性 “length” 用于获取表单中元素的个数。 获取时用:
var ss = document.tform.length;
method 属性 “method” 获取或设置表单的 “method” 属性,取值为 POST 或者 GET。 获取时用:
var ss = document.tform.method;
设置时用:
document.tform.method= “GET”;
name 属性 “name” 用于设置或者获取表单名称。 获取时用:
var ss = document.tform.name;
target 属性 “target” 用于设置或者获取表单的目标(target)。 获取时用:
var ss = document.tform.target;
设置时用:
document.tform.target = “xxxx”;

 

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web