jQuery-基础

just2learn

浏览: 71330 次
性别:
来自: 北京

最近访客更多访客>>

xiao1291147

xiaoshiyier

plasterdoll

wwssmm00220033

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

HTML 页面组成：

基本的标签 + 样式 + 行为

markup : HTML标签

style : 样式，CSS

script : 行为，jQuery

Write less, do more!

var checkedValue = jQuery('input:radio[name="someRadio"]:checked').val();

你需要什么功能？

页面事件处理

数据校验-获取不同标签的值

异步请求后台获取数据

jQuery能提供给你哪些功能？

Event事件处理

selector选择器定位元素并取值

Ajax，get,post

Just begin

self-named: jQuery

alias: $

Unobtrusive JavaScript 非侵入式的脚本-不要把脚本写在标签上，而应该分离。

achieving better page organization and increased code versatility.

就像CSS样式表一样，将标签和样式分离开，这样管理起来更加方便，也更清晰，更加合理

Separating style from structure : use CSS

Separating behavior from structure : use jQuery

Make sure that the button element exists before we attempt to augment it

1.x and 2.x , download which ?

从2.0开始，jQuery只关注未来的趋势，而不会兼顾老版本浏览器IE6,IE7,IE8

因此，jQuery将删除那些处理浏览器兼容性的代码，使得代码量减少了12%左右，而且更快

如果需要支持IE8以下的浏览器，只能选择1.x版本

compressed or uncompressed ?

生产上使用compressed，因为体积更小

测试使用uncompressed，因为格式化了，可读性好

use CDN to include jQuery in our web pages

jQuery对象

//expose jQuery to the global object as usual

window.jQuery = window.$ = jQuery;

GitHub

jQuery’s modules

ajax: Contains all the Ajax functions like ajax(), get() and post().

effects: Contains the methods that allow animations like animate() and slideUp().

event: Contains the methods to attach event handler to the browser events like on() and off().

jQuery fundamentals

jQuery focuses on retrieving elements from HTML pages and performing operations upon them.

致力于通过选择器获取元素，并在这些元素上施加行为

selectors

by type : input

by attributes : [name='xxx']

by position: parent child

You must waiting until the page is loaded before performing page operations,

The jQuery library is exposed through a property called jQuery and a shortcut called $. \

Using them we have access to the properties and the methods .

jQuery's utilities or jQuery utility methods

使用jQuery工具箱中的方法

var trimmed = $.trim(someString);

$.trim() 去除字符串两端的空格

$.isArray() 测试参数是否为数组类型

注意：这些方法实际上是$()function中的方法（JavaScript中，方法中可以在定义方法）

jQuery chaining: a programming technique to call several methods in a single statement.

var obj = new Obj();

obj.method().anotherMethod().yetAnotherMethod();

select elements from the DOM

two parameters: a selector and a context(optionally).

通过context的设置，可以

XML might be familiar with XPath as a means to select elements within an XML document.

jQuery中的选择器类似与通过XPath解析XML中的节点

find all the <p> contained in a <div>. Contained doesn't mean the <div> is the parent of the <p>, it can also be a generic ancestor.

首先根据指定的context定位元素，然后再根据selector进行查询

var paragraphsInDiv = = jQuery("p", "div");

var paragraphsInDiv = = $("p", "div");

查询器将返回的数据封装为一个数组并在此基础上进行包装，并提供一系列的方法来处理这个对象

术语叫做jQuery wrapper or wrapped set

jQuery wrapper methods, is that when they’re done with their action (like a hide operation),

they return the same group of elements, ready for another action.

当处理完一个方法后，会返回同样的数据集，以便对其调用其他function

A better place to put code using jQuery

The document ready handler

Traditionally:

window.onload=funciton(){//do stuff here}

需要等待DOM tree构建完成，以及其它资源(image,flash,etc)被加载并呈现到窗口之后，才会触发window.onload事件

jQuery way:

jQuery provides a simple means to trigger the execution of code once the DOM tree has loaded (only waiting the DOM,without waiting for external resources)

jQuery(document).ready(handler);

$(handler);

jQuery(document).ready(function() {

// your code goes here...

});

jQuery(function() {

// your code goes here...

});

Best practices:

put the libraries included in your page before the closing <body> tag!

At that point, all of the other elements are already in the DOM.

So you can completely avoid the use of $(document).ready .

把<script>放到</body>标签签名，将其作为DOM的一部分

As we’ve seen, the jQuery() function can be used to do the following:

• Select and wrap DOM elements to be operated upon by wrapper methods 选择得到结果，对结果进行包装，提供包装后的方法对结果进行处理

• Serve as a namespace for global utility functions 提供全局工具方法

• Establish code to be executed when the DOM is ready for manipulation 文档加载完毕才开始对元素进行操作

分享到：

effective java (六：枚举和注解) | util.Concurrent-ReadWriteLock

2014-06-05 16:46
浏览 399
评论(0)
分类:非技术
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery-基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery-基础

评论

发表评论

相关推荐

常用对象的使用

最近访客更多访客>>