jquery实战(四)-----包装集、数组、增加等功能

1.包装集

//1.JavaScript确定包装集的大小
/*
	jquery元素包装集运行起来与数组非常相似：像JavaScript数组那样拥有length属性。而这个属性的值，就是包装元素的个数。
	如果想要利用方法而不是length属性，可以利用jquery定义的size()方法
*/
$('#someDiv').html('there are'+$('a').size()+'link(s) om this ');
/*里面的$('a')包装器，匹配所有<a>类型的元素，接着调用size()方法。返回匹配元素的个数。吧个数
用于拼凑字符串，然后调用html()方法。匹配的方式从左到右。因为有括号，一般是从左到右，
*/
//获取包装集的元素
//从页面上带有Alt特性的所有<img>元素的集合中获取第一个元素。
$('img[alt]')[0]
或者
//利用get(index)方法 
$('img[alt]').get(0)
//页面上近邻<label>元素的所有<button>元素包装到jquery包装器里，然后创建有哪些元素所组成的JavaScript数组
//赋值给allLabeledButtons
var allLabeledButton = $('label+button').get();
//获取下标
var n = $('img').index('img#findMe')[0]
//筛选元素包装集
//1.添加更多元素到包装集
//想要匹配带有Alt或title特性的所有<img>元素 
$('img[alt],img[title]')
//说明add()方法的操作过程
$('img[alt]').add('img[title]')
//假定一个元素引用，命名为someElement变量，则可以把元素添加到带有Alt属性的所有图像集中：
$('img[alt]').add(someElement);

2.数组

//1.修整字符串
$.trim(value)
$('#someField').val($.trim($('#someField').val()));
//2.对属性和集合进行迭代
var anArray ={'one','two'};
for(var n=0 ;n<anArray.length; n++){
	//do something
}
或者
$.each(anArray,function(n,value){
	//do somethinng
});
//3.对数组进行筛选
$.grep()
$.bigNumbers = $.grep(originalArray ,function(){
	return value >100;
});

3.增加等功能

//1.让页面生动起来
//操作元素，首先获取元素。通过这个命令可以轻松地吧属性设置到匹配集里的所有元素上。
$('img').each(function(){
	this.alt ='th is image['n+']'+this.id;
})
//将所由值收集到一个数组里
var allAlts = new Array();
$('img').each(function(){
	allAlts.push(this.alt);	
});
//如果只想获取单个元素的属性值(请记住匹配集可以当成JavaScript数组来处理),就可以通过如下语句获取属性
var altValue = $('#myImages')[0].alt;
//设置特性值的时候，注意特性值有那些？
$('*').attr('title',function(index){
	return 'i am elements' +index +'and my name is ' +(this.id ? this.id : 'unset');
});
//这个命令将分别作用于页面上的所有元素，设置个元素的title特性为一个字符串。
$('input').attr({
	value:'',title:'please enter a value'
});
//删除特性
//removeAttr()
//解决双重提交的问题，注意：这种方式防止不了攻击，所有服务器端代码必须继续保持警惕
$("form").submit(function(){
	$(":submit",this).attr("disabled","disabled");
});
this指针总是引用已绑定事件的页面元素
function swap(){
	$('tr').toggleClass('striped');
}
//这个函数利用toggleClass命令为所有<tr>元素切换名为striped的类。
//6.获取设置样式
$("div.expandable").css("width",function(){
	return $(this).width()+20+"px";
});
$("div.myElemenys").width(500)
等效于
$("div.myElemenys").css("width","500");
//7.设置元素内容
html()
//8.移动和复制元素
$('p').append('<b> some</b>');//追加到所有<p>元素的现有内容的末尾
$("p.appenfToMe").append($("a.appendMe");//把带有类appendMe的所有链接，追加到带有类appendMede<p>元素。
//9.包裹元素
$("a.surprise").wrap("<div class='hello'></div>");//把带有surprise类的各种链接包裹在带有类hello的<div>,
//10.克隆
$('img').clone().appendTo('fieldset.photo');//获取图像元素的副本并追加带有类名photo的<fieldset>元素里。
$('ul').clone().insertBefore('#here');//克隆所有的<ul>元素，包括她们的后代元素
$('ul').clone().insertBefore('#here').end().hide();//插入克隆副本之后，利用end()命令来选择包装集并隐藏它。