jquery api学习系列之3

来源：互联网发布：韩国第一淘宝模特短发编辑：程序博客网时间：2024/04/29 10:42

pre{ font-family: Courier New!important; font-size: 12px!important; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); font-family: Courier New!important; font-size: 12px!important; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0; color: rgb(0, 0, 0);

工具方法

1. end()
2. splice(start,end) 选取一个匹配的子集进行分割

$.xxx 不仅可以给jq使用，还可以给原生的js使用原生的不太具体

($)jQuery.support.[boxModel cssFloat opacity style...] 展示不同浏览器之间的bug
jQuery.each(callback) 通用例遍方法，可用于例遍对象和数组。

  jQuery.each(['a','b','c'],function(index,ele){ 
    if(index == 2){ 
return false;
     }
    alert(index+'==='+ele);
   })

区别于each方法：

 $('div').each(function(index, element) {
      $(this).click(function(){ 
    $(this).toggleClass('b');
  })
  });

jQuery.grep(array, callback, [true/false]) true代表返回符合条件的元素
jQuery.makeArray() 将一个类数组转换为数组，可以使用数组的所有方法
jQuery.map(arr|obj,callback) 将一个数组转换为另外一个数组

$.map( [0,1,2], function(n){  return n > 0 ? n + 1 : null;});  //  生成的是一个新的数组

jQuery.toArray()
$.type() 判断类型
$.trim() 去掉前后空格的
$.inArray(元素，数组名) 针对数组的操作类似于indexOf,元素在数组中的位置
$.proxy(函数，重新要指向的位置，([参数]))([参数]) 这样子会直接执行改变this的指向的
$.noConflict() 防止冲突
parseJSON   字符串解析成json格式，字符串数据经行解析，严格模式的json格式
$makeArray() 类数组，一组集合元素,转换成数组，可以使用数组的方

$.ajax( {url :'xx.php',
         data: 发送给服务器的的串联化数据,
         type: 'POST'默认是get,
         success:function(data){ 返回的内容data},
         error:function(){ },
         contentType:请求头信息，在post请求的时候会用到
         cache:缓存
         timeout:延时，
         dataType:返回的数据类型
         })

$.extend():扩展的是工具下的插件
$.fn.extend:扩展到jq对象下的插件
$.load(url (data) fn) 返回的是一个页面
$.getJSON() 方法异步加载JSON格式数据,获取服务器中的数组，并对获取的数据进行解析，显示在页面中
$.getScript() 使用getScript()方法异步加载并执行js文件
$.get(url,[callback],[type]),使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据 type:返回内容格式，xml, html, script, json, text, _default。
$.post(url,[data],[callback] post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，
$(selector).serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：
$.ajaxSetup([options]),使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项

案例1    瀑布流展示图片
   1：找出最小的li
   2.   scroll事件要判断什么时候开始加载第二页，就是当前最小li的高度+距离顶部的距离 = 可视区的高度+滚动条的高度。这个是临界条件。
   3. 当加载到最后一页的时候，要走后门，跳出即可。

$(function(){ 
   var aLi = $('li');
var ipage = 1;
var b =true;
ajx();
function ajx(){
    $.ajax({
     url:"getPics.php",
 type:"POST",
 data: capge=ipage,
 success: function(data){
   if( !data.length){
   return;   
   }
   var data =$.parseJSON(data);
   for(var i=0; i<data.length; i++ ){
   
   var a = $('<li>').appendTo('ul');
   var _inn = getShort();
   $('img').css({
             'width':225,
 'height': data[i].height/data[i].width*225
 });
  $('<div><img src='http://blog.163.com/qyl_anikin/blog/+data[i].preview+'><p>'+data[i].title+'</p></div>').appendTo($('li').eq(_inn) );
   
   }
 b = true;
 }
 
   });
}

$(window).scroll(function(){ 
  var shortLi =  $('li').eq(getShort());
  if( ($(shortLi).offset().top + $(shortLi).outerHeight()) < ($(window).height() + $(window).scrollTop()) ){   
   if( b){
 b = false;
 ipage++;
 ajx();
// console.log(ipage); 
 }
 }
})
 function getShort() {
var index = 0;
var ih = aLi[index].offsetHeight;  
for (var i=1; i<aLi.length; i++) {
if ( aLi[i].offsetHeight < ih ) {
index = i;
ih = aLi[i].offsetHeight;
}
}
return index;
}
 })

0 0