jquery学习2009

segment 2009-05-04

jquery事件：与用户交互

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

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

$("#myDiv").toggle();

});

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

$("#myDiv").toggle();

}).click();

如下所列的事件都符合我在之前所介绍的设计模式，而且也都具有与其相关联的两个函数。

blur() - 在 Form 元素失去焦点时调用，例如，用 tab 键移出具有焦点的文本字段

change() - 在 Form 元素失去焦点，并且其值因获得焦点而更改时调用。Internet Explorer 和 Firefox 对此的处理稍微不同。

click() - 当在页面元素（不一定是 Form 元素）上单击时调用

dblclick() - 当在页面元素（不一定是 Form 元素）上双击时调用

error() - 当元素出现内部错误时调用，不同的浏览器对此的处理不同，可能很多人都亲自体验过

focus() - 当某个 Form 元素获得焦点时调用

keydown() - 当页面元素在其上/内发生一个 keypress 时调用

keyup() - 当页面元素在其上/内释放一个 keypress 时调用

keypress() - 当相同的页面元素相继发生 keydown 和 keypress 时调用

select() - 文本在文本字段内被选中时调用，而不是内容在组合框内被选中时（这时发生的是更改事件）调用。

submit() - 提交 Form 时调用

还有一些函数不遵守上文概括的模式，而且也只包含一个可调用的函数

我将这些例外也列于此，但它们不常用：

resize(fn) - 对象调整大小时调用

scroll(fn) - iframe 卷起时调用

load(fn)/unload(fn) - 对象在页面上加载/重载时发生

jquery用hover(fn1,fn2)代替mouseover(fn) 和 mouseout(fn)

jquery的属性：(attributes模块)收集信息

attr(str)

val()

text()

html()

data():用来访问包含在每个页面元素的内部 Map 的一种方式就像一个

键值对；

jquery的css：在事件和信息基础上提供反馈

jquery的effects模块：

它包含很多特性，比如隐藏元素、随处移动元素、淡入淡出元素等

show() hide()

fadeIn()

fadeOut()

fadeTo()

jquery的ajax模块：

segment 2009-05-04

http://baike.baidu.com/view/1020297.htm

$("#msg").html();

$("#msg").html("hello");

上面两行代码，调用了同样的函数。但结果却差别很大。

第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。

jquery与ajax

get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。

$.get("search.do",{id:1},rend);

function rend(xml){

alert(xml);

}

$.post("search.do",{id:1},rend);

function rend(xml){

alert(xml);

}

下面两个在指定的Dom对象上绑定响应ajax执行的事件。

$("#msg").ajaxStart(function(){

this.html("正在加载。。。。");

});

$("#msg").ajaxSuccess(function(){

this.html("加载完成！");

});

渐入淡出效果：

$("#msg").fadeIn("fast");

$("#msg").fadeOut("slow");

jquery和checkbox结合使用：

$(document).ready(function(){

$("#selectall").click(selectAll);

//selectAll是一个函数；

});

// This function will get called every time someone clicks on the selectall checkbox

function selectAll()

{

//返回selectall的状态；if checked, return

a boolean; if not, return an undefined

var checked = $("#selectall").attr("checked");

$(".selectable").each(function(){

var subChecked = $(this).attr("checked");

if (subChecked != checked)

$(this).click();

});

}

segment 2009-05-04

使用过的jquery函数：

// the eq() function lets you reference an element in the array directly.

// In this case, it will get the 3rd paragraph (0 referenced of course) and hide it

$("p").eq(2).hide();

//each() function

$("p").each(function(){ });

// The slice() function lets you input a start and an end index in the array, to

// create a subset of the array. This will hide the 3rd through 5th paragraphs on the

// page

$("p").slice(2,5).hide();

val() function

segment 2009-04-17

sitepen快速教程之ajax:

1. getting data

dojo.xhrGet，最重要的两个参数是url:目的，handleAs：怎样处理返回的数据，当数据返回以后，传到load:中处理。

2. handle可以用于代替load和error。

3.dojo.io.iframe,

dojo.io.script,

4. send data

sitepen快速教程之animations;

1. 所有的animations使用一个单独的'magic object '作为它的参数，最重要的参数是node，这是一个将要应用animation的dom 节点。有一些参数是可以选择的，一些作为高级应用。

2.base animations:

animations 包含在dojo.js中的有fadein ,fadeout和animateProperty。dojo.animateProperty用处很大，是大所属高级动画的基础。

3.dojo.fx:还有一些animations被打包在了dojo.fx这个模块中，

dojo.fx.combine,

dojo.fx.chain,

dojo.fx.wipeIn,

dojo.fx.wipeOut

dojo.fx.slideTo

4. dojo._Animation:

5. dojo.animateProperty:

6. dojo.query.Animations:

dojo.NodeList-fx

sitepen快速教程之events:

1. 这一部分将要介绍如何和网页进行交互。

2. dojo.connect: 把事件和函数结合起来。

3.connect也用于对象方法，比如在Digit或者animation中定义类，

sitepen快速教程之dom magic：

1. dojo.query:dojo所提供的一个非常好用的工具，它让我们能快速解析dom，并得到我们所需要的节点，下面介绍一下如何更好地使用这条语句。

2.dojo.NodeList

sitepen快速教程：

1.dojo配置

toggle：切换

dojo有一个在运行时设置不同的配置选项机制，分别是parseOnload,切换网页负荷解析的工具和标记代码；isDebug，启用或禁用某些调试信息；

更方便的，你可以直接通过一个自定义属性名称djConfig，在包含dojo.js的<script></script>中设置这些选项。

2. dojo.addOnLoad方法在document确实"ready"以后再执行。

// a very common method of loading code onLoad

var init = function(){

console.log("I run after the page is ready.");

};

dojo.addOnLoad(init);

// and/or pass an anonymous function

dojo.addOnLoad(function(){

console.log("I also run, but second. ");

});

3.dojo.require()的作用是：下载所有需要的dojo代码

这个函数允许你使用dojo.js中没有提供的东西，比如：

Drag and Drop, animations, didit工具，dojox工程，

甚至包括你自己写的代码。

4.dojo.byId()，读取id中的内容

dojo.byId("testHeading").innerHTML = "We're on our way!";

改变id中内容。

// post some data, ignore the response:

dojo.xhrPost({

form: "someFormId", // read the url: from the action="" of the <form>

timeout: 3000, // give up after 3 seconds

content: { part:"one", another:"part" } // creates ?part=one&another=part with GET, Sent as POST data when using xhrPost

});

// get some data, convert to JSON

dojo.xhrGet({

url:"data.json",

handleAs:"json",

load: function(data){

for(var i in data){

console.log("key", i, "value", data[i]);

}

});

dojo第二个例子：The postman always clicks twice

1.Basic Layout

Divide the screen into list and messages areas把屏幕划分为列表和消息区域

Add the navigation bars - address book, message list, etc. - to the left hand area增加导航条

Add the message preview pane增加消息预览格

Add the tabbed panes for Compose Mail增加

Glue on the toolbar and progress bar组合工具条和进度条

segment 2009-04-13

dojo学习：

1.button中引用javascript代码，从服务器中读取数据；

function helloCallback(data,ioArgs) {

alert(data);

}

第一个参数是从服务器返回来的数据，第二个参数是dojo输入输出绑定对象；

dojo.xhrGet({

url: 'response.txt',

load: helloCallback,

error: helloError

});

</script>

</button>

response.txt是源文件，load和error都是javascript函数；

2.使用GET把数据传输到服务器上；

Hello World!

dojo.xhrGet({

url: 'HelloWorldResponseGET.php',

load: helloCallback,

error: helloError,

content: {names: dojo.byId('name').value }

});

</script>

</button>

Please enter your name: <input type="text" id="name">

上面的names是要传递的参数名称，其它页面可以通过request.getParameter("names")来得到这个参数；

3.使用POST传递参数到服务器

// Don't forget to replace the value for 'url' with

// the value of appropriate file for your server

// (i.e. 'HelloWorldResponsePOST.asp') for an ASP server

dojo.xhrPost({

url: 'HelloWorldResponsePOST.php',

load: helloCallback,

error: helloError,

form: 'myForm'

});

</script>

<br>

Please enter your name: <input type="text" name="name">

</form>

4.使用AOL提供的在线DOJO版本，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Taxes, The Surest Thing Next to Death!</title>

@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

</style>

djConfig="parseOnLoad: true"></script>

dojo.require("dojo.parser");

</script>

</head>

5.使用同文件夹下面的dojo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Taxes, The Surest Thing Next to Death!</title>

@import "/dojoroot/dijit/themes/tundra/tundra.css";

@import "/dojoroot/dojo/resources/dojo.css"

</style>

djConfig="parseOnLoad: true"></script>

dojo.require("dojo.parser");

</script>

</head>

<body class="tundra">是dojo的默认主题样式；

8.dojo验证和帮助，首字母自动大写，去除空格，

猜你喜欢