最近比较忙,但是每天网上还是的坚持学点,不积小流,无以成江河。
今天学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 加入脚本,请加入延时函数。
Loads, and executes, a local JavaScript file using an HTTP GET request.
Before jQuery 1.2, getScript was only able to load scripts from the same domain as the original page. As of 1.2, you can now load JavaScript files from any domain. Warning: Safari 2 and older is unable to evaluate scripts in a global context synchronously. If you load functions via getScript, make sure to call them after a delay.
返回值
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.");
});