jquery实战(四)-----包装集、数组、增加等功能
2016-01-26 21:06
766 查看
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()命令来选择包装集并隐藏它。
相关文章推荐
- jquery实战(三)------Ajax
- jQuery第二章
- jQuery Ajax 简单的实现跨域请求
- jQuery第一章
- jquery与其他js冲突
- discuz教程:discuz模板js与jQuery冲突的解决方案
- jQuery.each()函数(译)
- 用jquery.icheck.js插件美化复选框
- 动态显示jQuery.validator 的验证信息
- jQuery实例之实现对表格内容的操作
- jQuery EasyUi实战教程之布局篇
- 【看完想不会都难的系列教程】- (3) JQuery+JQueryUI+Jsplumb 实现拖拽模块,流程图风格 - 技术弟弟 - 博客园
- jQuery Easyui实现左右布局
- 【看完想不会都难的系列教程】- (3) JQuery+JQueryUI+Jsplumb 实现拖拽模块,流程图风格 - 技术弟弟 - 博客园
- jQuery获取的checkbox的属性checked为undefined
- jQuery Mobile动态刷新页面样式
- jQuery练习(二)
- jQuery 微信 weui 访问地址
- jQuery选择器中的包含关系
- jQuery:获取浏览器中的分辨率