jQuery常用功能使用总结2

续篇

上一张总结了jquery中常见的选择器，原生和jquery相互转换, DOM,事件，运动，没有阅读的同学，请回头查看；

jQuery.Callbacks 事件触发机制

这个函数常见的应用场景是事件触发机制，也就是设计模式中的观察者（发布、订阅机制）,我是在QQ音乐项目中带着大家用到此方法，不熟悉的同学回头去看QQ音乐项目我录制的视频;

1、不传入任何参数，调用add的时候将函数add到内部的list中，调用fire的时候顺序触发list中的回调函数;

function fn1(val){
    console.log('fn1 says:' + val);
}
function fn2(val){
    console.log('fn2 says ' + val);
}
var cbs = $.Callbacks();  //我们通过调用$.Callbacks获取到一个callback实例
cbs.add(fn1); //向内部队列添加函数,等同于我讲过的订阅发布中的“事件订阅”
//fn1 says:leilei
cbs.fire('leilei'); //依次执行队列里的函数,等同于订阅发布中的"发布"，这里的leilei参数会被fn1和fn2的参数val接收
cbs.add(fn2);
//fn1 says:ymy
//fn2 says ymy
cbs.fire('ymy');

2、构造函数传入once，回调函数列表只被fire一次

function fn1(val){
    console.log('fn1 says ' + val);
}
var cbs = $.Callbacks('once');
cbs.add(fn1);
//fn1 says foo 
cbs.fire('foo');
cbs.fire('foo');

3、构造函数传入unique，保证在add过程中没有重复的函数

function fn1(val){
    console.log('fn1 says ' + val);
}
var cbs = $.Callbacks('unique');
cbs.add(fn1);
cbs.add(fn1);
//虽然添加了两次，但因为有unique这个选项，所以只会有一次输出
//fn1 says foo 
cbs.fire('foo');

jquery中前后台数据交互

我最常用 $.ajax，里面参数可以省略掉很多，只留type,url,success;其他参数根据需要而定；

$.ajax({
   type: "POST", //请求方式，常用的get,post,jsonp
   url: "some.php", //请求地址
   data: "name=John&location=Boston", //前端传给后台的参数
   dataType:'json',//后台返回的数据格式为json格式
   cache:false, //是否缓存
   async:false, //强制要求同步
   success: function(msg){ //请求成功后接收到的数据，数据就是msg
     alert( "Data Saved: " + msg );
   }
});

数组和对象操作

1、$.each——遍历
$.each(obj,function(param1,param2))
遍历数组时：param1为元素序号，param2为元素内容；
遍历对象时：param1为元素属性名，param2为元素属性值。
注意：该工具方法很强大，支持遍历原生和jquery元素
2、$.grep——筛选数组
$.grep(array,function(element,index))：array为要筛选的数组，element为数组中的元素，index为元素在数组中的序号（0起）。

var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.grep(arrNum, function(ele, index) {
      return ele > 5 && index < 8 //筛选出：元素值大于5且序号小于8的新数组
})
//筛选后数据：8,7,9,10

3、$.map——数据变更
$.map(array,function(element,index))：array为要筛选的数组，element为数组中的元素，index为元素在数组中的序号；
和$.each的区别，就是map有返回值，而each没有返回值
4、$.inArray()——查找数组元素
$.inArray(value,array)：查找元素在数组中的元素，如果不存在则返回-1。

var arrNum = [4, 21, 2, 12, 5];
var arrPos = $.inArray(12, arrNum); //结果：3

字符串操作

$.trim()：去掉字符串左右两侧的空格。这是jQuery核心库中唯一针对字符串处理的函数。

URL操作

$.param(obj)：其中obj为数组或者jquery对象，该方法将其序列化为键值对。

var arrInfo = { id: 101, name: "lei" , sex: 0 }; //基本信息数组
var arrNewInfo = $.param(arrInfo);
//arrNewInfo; 结果：id=101&name=lei&sex=0

jquery插件的扩充

$.fn.extend() 给原型上扩充插件，只有实例可以使用这些扩充的方法；

$.fn.extend({
               "test": function (p1, p2) {
                   return p1 && p2;
               }
})
//只有实例可以使用
$().test('ymy','leilei');  //返回 true；

$.extend() 给类上扩充插件，实例不能使用，只有类可以使用

$.extend({
                "test": function (p1, p2) {
                    return p1 && p2;
                }
})
//只有类可以使用
$.test('ymy','leilei');  //返回 true；

$.proxy——改变事件函数的作用域

两种格式：
$.proxy(function,scope)：function为指定的事件方法，scope为事件函数设置作用域的对象。
$.proxy(scope,functionName)：scope为函数的作用域对象，functionName为函数名，它必须是scope对象的一个属性。

$( function() {
            var objMyInfo = {
              name: "小蕾", //设置对象name属性
                sex: "女", //设置对象sex属性
                ShowEvent: function() { //设置执行的事件
                    $( "#divShow").html("姓名：" +
                     this.name + "

性别：" +
                     this.sex);
                }
}
//结果：姓名:""，性别:undefined
$( "#Button1").bind("click" ,objMyInfo.ShowEvent);
 //通过proxy函数绑定设置的事件。结果：姓名:小蕾,性别:女。
$( "#Button1").bind("click" ,$.proxy(objMyInfo, "ShowEvent"));
//通过proxy函数绑定设置的事件。结果：姓名:小蕾,性别:女。
$( "#Button1").bind("click" , $.proxy(objMyInfo.ShowEvent, objMyInfo));

jQuery获得select option的值和对select option的操作

获取Select ：

获取select 选中的 text :

$("#ddlRegType").find("option:selected").text();

获取select选中的 value:常用于表单元素值的获取

$("#ddlRegType ").val();

获取select选中的索引:

$("#ddlRegType ").get(0).selectedIndex;

设置select:

设置select 选中的索引：

 $("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：

    $("#ddlRegType ").attr("value","Normal“);

    $("#ddlRegType ").val("Normal");

    $("#ddlRegType ").get(0).value = value;

清空 Select:

$("#ddlRegType ").empty();