BlogJava-飞翔的起点-随笔分类-jqueryhttp://www.blogjava.net/forgood/category/36368.html从这里出发zh-cnWed, 03 Dec 2008 14:03:13 GMTWed, 03 Dec 2008 14:03:13 GMT60jQuery_AJAX学习http://www.blogjava.net/forgood/archive/2008/12/03/244047.htmlforgoodforgoodTue, 02 Dec 2008 16:03:00 GMThttp://www.blogjava.net/forgood/archive/2008/12/03/244047.htmlhttp://www.blogjava.net/forgood/comments/244047.htmlhttp://www.blogjava.net/forgood/archive/2008/12/03/244047.html#Feedback0http://www.blogjava.net/forgood/comments/commentRss/244047.htmlhttp://www.blogjava.net/forgood/services/trackbacks/244047.htmlJQUERY-AJAX学习

forgood 2008-12-03 00:03 发表评论
]]>jquery API学习（2）http://www.blogjava.net/forgood/archive/2008/12/02/244046.htmlforgoodforgoodTue, 02 Dec 2008 15:56:00 GMThttp://www.blogjava.net/forgood/archive/2008/12/02/244046.htmlhttp://www.blogjava.net/forgood/comments/244046.htmlhttp://www.blogjava.net/forgood/archive/2008/12/02/244046.html#Feedback0http://www.blogjava.net/forgood/comments/commentRss/244046.htmlhttp://www.blogjava.net/forgood/services/trackbacks/244046.html 今天学jQuery对象访问：

1.each(callback) 该方法以每一个匹配的元素作为上下文来执行一个函数，
在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从0开始的int）
返回‘false’将停止循环（相当于普通循环中使用的‘break’）
返回‘true’将跳至下一个循环，（相当于在普通的循环中使用‘continue’）
参数：callback（function）
e.g1

<img/><img/>
jQuery代码：
$('img').each(function(){
this.src="test"+i+".jpg";
});

e.g2

<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>

jQuery代码：

$('button').click(function(){
    $('div').each(function(index,domEle){//domEle ==this
            $(domEle).css('backgroundColor',"yellow");
            if($(this).is("#stop")){
                $("span").text("stopped at  div index #"+index);
                return false;}
});});

2.size() 和length
都可以勇于得到jQuery对象中元素的个数，
返回： Number

e.g1
<img src="test1.jpg"/><img src="test2.jpg"/>
jQuery代码：
$("img").size();

e.g2
同理：$("img").length;


3.get()取得所有匹配的DOM元素集合
返回：Array<Element>

e.g1
<img src="test1.jpg"/><img src="test2.jpg"/>
jQuery代码：
$("img").get().reverse();
result:
[<img src="test1.jpg"/><img src="test2.jpg"/>]

4.get(index)
取得其中一个匹配元素，index表示取得第几个匹配的元素
返回值：Element
HTML代码：
<img src="test1.jpg"/><img src="test2.jpg"/>
jQuery代码：
$("img").get(0);
result:
[<img src="test1.jpg"/>]

5.index(subject)
搜索与参数表示的对象匹配的元素，并返回相应元素的索引值，
如果哦找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1
返回值；
Number
参数:
subject(Element)
e.g1返回id值为foobar的元素的索引值
<div id="foobar"><div></div><div id="foo"></div></div>

jQuery代码：

$("div").index($("#foobar")[0])   //0
$("div").index($('#foo')[0]) // 2
$("div").index($('#foo')) // -1




备注：
今天在浏览别人博客的时候看到的，收藏。

有时候,我们页面当中并不需要把要用到的JS全部加载出来,

这会使页面加载时速度变慢~~~如果能按需加载,那能提高不少性能...也能节约不少流量~~~给用户带来好的体验~~

好比说,当某个JS效果是触发事件才显示的...这个效果被封闭在一个JS中,,我想大家经常这样做吧~~这时候,我们能按需加载那就不必在页面载入时去加载JS文件~~~这在jquery插件中很多。

用法：
1 , 当在需要的时候再加载所需的javascript和css文件。
$.include('file/test.js')或$.include('file/test.css')

2,  当然若你一次想加载多个文件你也可以这样写:
$.include(['file/test.js','file/test.css'])。

3,  因为这两个文件的路径相同，所以可以先指定路径再加载所有文件：
$.ImportBasePath  = 'file/';
$.include(['test.css','test.js']);

4,  你还可以加载完文件后执行回调函数
$.include("file/test.css",function(){
   alert("加载css后执行");
});
插件下载地址:http://www.94this.com.cn/myCode/jqueryIncludefile/jqueryIncludefile.rar

注:jquery 自带了有一个异步请求的方法,$.getScript ,可以异步加到JS并执行

jQuery.getScript(url,[callback])

通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

 

返回值

XMLHttpRequest

参数

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

示例

载入 jQuery 官方颜色动画插件 成功后绑定颜色变化动画。

HTML 代码:

<button id="go">» Run</button>
<div class="block"></div>

jQuery 代码:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});

 

加载并执行 test.js。

jQuery 代码:

$.getScript("test.js");

 

加载并执行 test.js ，成功后显示信息。

jQuery 代码:

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});








forgood 2008-12-02 23:56 发表评论
]]>jquery API学习（1）http://www.blogjava.net/forgood/archive/2008/11/30/243549.htmlforgoodforgoodSun, 30 Nov 2008 07:48:00 GMThttp://www.blogjava.net/forgood/archive/2008/11/30/243549.htmlhttp://www.blogjava.net/forgood/comments/243549.htmlhttp://www.blogjava.net/forgood/archive/2008/11/30/243549.html#Feedback0http://www.blogjava.net/forgood/comments/commentRss/243549.htmlhttp://www.blogjava.net/forgood/services/trackbacks/243549.html
1、jQuery(exp,[context]),这个函数接受一个包含css选择器的字符串，然后用这个字符串去匹配一组元素，通俗的讲，exp参数是要匹配的表达式，context是匹配的范围，可以是dom元素，文档或者jquery对象。
jQuery的核心功能都是通过这个函数实现的，
例子：
a.找到所有p元素，并且这些元素都是div元素的子元素
HTML代码：<p>guoxzh</p><div><p>guoxiaozheng</p></div><p>guoxzh</p.

jQuery代码：$("div>p")

b.在文档的第一个表单中，查找所有的当选按钮

HTML代码：是带有type值为radio的input元素
JQuery代码：$("input:radio",document.forms[0]);

c.在一个有AJAX返回的xml文档中，查找所有的div元素

$("div",xml.responseXML);

2.jQuery(html)根据提供的原始的HTMl标记字符串，动态创建有jQuery对象包含的Dom元素，你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")；
返回值：
    JQuery
参数：
   用于动态创建dom元素的HTML标签的字符串，

例子：
a.动态创建一个div元素，追加到body里
jQuery代码：
$("<div><input type="text" name="name" value=""></div>").appendTo("body");

b.创建一个<input>元素必须同时设定type属性，
jQuery代码：
IE中无效

$("<input>").attr("type","checkbox");

在IE中有效

$("<input type='checkbox'>");

3.jQuery(element)将一个或多个元素DOM元素转化为jQuery对象
这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。

返回值：jQuery

例子：
a.设置页面的背景色
jQuery代码：
$("document.body").css("background","black");

b.隐藏一个表单中所有元素
jQuery代码：
$("myForm.elements").hide();


forgood 2008-11-30 15:48 发表评论
]]>jquery学习网站http://www.blogjava.net/forgood/archive/2008/11/30/243537.htmlforgoodforgoodSun, 30 Nov 2008 06:40:00 GMThttp://www.blogjava.net/forgood/archive/2008/11/30/243537.htmlhttp://www.blogjava.net/forgood/comments/243537.htmlhttp://www.blogjava.net/forgood/archive/2008/11/30/243537.html#Feedback1http://www.blogjava.net/forgood/comments/commentRss/243537.htmlhttp://www.blogjava.net/forgood/services/trackbacks/243537.htmljquery官方网站
http://jquery.com/
jquery中文学习网站
http://jquery.com/


forgood 2008-11-30 14:40 发表评论
]]>