jquery小结5

1 jquery拖拉插件
$(function() {
//以透明度0.35随意拖动
$("#divDragD").draggable({ opacity: 0.35 });
//以透明度0.35随意在X轴方向拖动
$("#divDragX").draggable({ axis: "x", opacity: 0.35 });
//以透明度0.35随意在父窗口中拖动，拖动后返回原地
$("#divDragC").draggable(
{ containment: "parent",
opacity: 0.35,
revert: true
});
})
其中draggable后跟要拖动的各参数值，具体见jquery ui手册、、
2 droppable放置 ，比如做购物车的拖拉功能
$(function() {
//以透明度0.35随意拖动
$(".divDrag").draggable({ opacity: 0.35 });
$("#divCart").droppable({
drop: function() {
$(this)
.addClass("divGet") //改变购物车的CSS
.append($("<div></div>"))
.find("#divTip").remove(); //删除原有内容
}
})
})
<div id="divFrame">
<div class="divLeft">
<div class="divTitle">产品</div>
<div class="divDrag">
<img alt="" src="Images-8-2/img03.jpg" />
</div>

</div>
<div class="divRight">
<div class="divTitle">购物车</div>
<div id="divCart">
<div id="divTip">还没有产品</div>
</div>
</div>

</div>

3 jquery ui中的datapicker实现分段选择
即选择开始日期后，结束日期部分的日历选择时，只能在大于开始日期后才选择
<script type="text/javascript">
$(function() {
$("#txtStart").datepicker( //绑定开始日期
{ changeMonth: true, //显示下拉列表月份
changeYear: true, //显示下拉列表年份
showWeek: true, //显示日期对应的星期
firstDay: "1",
onSelect: function(dateText, inst) {
//设置结束日期的最小日期
$('#txtEnd').datepicker('option', 'minDate', new Date(dateText.replace('-', ',')))
}
})

$("#txtEnd").datepicker( //绑定结束日期
{ changeMonth: true, //显示下拉列表月份
changeYear: true, //显示下拉列表年份
showWeek: true, //显示日期对应的星期
firstDay: "1",
onSelect: function(dateText, inst) {
//设置开始日期的最大日期
$('#txtStart').datepicker('option', 'maxDate', new Date(dateText.replace('-', ',')))
}
})
}) </script>

4 对话框
$(function() {
$("#btnSubmit").bind("click", function() { //检测按钮事件
if ($("#txtName").val() == "") { //如果文本框为空
sys_Alert("姓名不能为空！请输入姓名");
}
});
function sys_Alert(content) { //弹出提示信息窗口
$("#dialog-modal").dialog({
height: 140,
modal: true,
title: '系统提示',
hide: 'slide',
buttons: {
Cancel: function() {
$(this).dialog("close");
}
},
open: function(event, ui) {
$(this).html("");
$(this).append("" + content + "
");
}
});
}

function sys_Confirm(content) { //弹出询问信息窗口
$("#dialog-modal").dialog({
height: 140,
modal: true,
title: '系统提示',
hide: 'slide',
buttons: {
'确定': function() {
$("#spnName").remove();
$(this).dialog("close");
},
'取消': function() {
$(this).dialog("close");
}
},
open: function(event, ui) {
$(this).html("");
$(this).append("" + content + "
");
}
});
}

5 jquery的工具函数
1）浏览器检测
<script type="text/javascript">
$(function() {
var strTmp = "您的浏览器名称是：";
if ($.browser.msie) { //IE浏览器
strTmp += "IE";
}
if ($.browser.mozilla) { //火狐相关浏览器
strTmp += "Mozilla FireFox";
}
strTmp += " 版本号是：" //获取版本号
+ $.browser.version;
$("#divTip").html(strTmp);
})
</script>
2） 数组和对象
each遍历：
unction() {
var arrStu = { "张三：": "60", "李四：": "70", "王二：": "80" }
var strContent = "<li class='title'>姓名：分数</li>";
$.each(arrStu, function(Name, Value) {
strContent += "[*]" + Name + Value + "
";
})
3）$.grep() ，比如查找大于5且序号小于8的元素
var strTmp = "变更前数据：";
var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.map(arrNum, function(ele, index) {
if (ele > 5 && index < 8) { //元素值大于5且序号小于8
return ele + 1; //元素增加1
}
})
strTmp += arrNum.join();
strTmp += "<br/><br>变更后数据："
strTmp += arrGet.join();
4）$.map() ，可以变更数组中的元素
　　　　　　 var strTmp = "变更前数据：";
var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.map(arrNum, function(ele, index) {
if (ele > 5 && index < 8) { //元素值大于5且序号小于8
return ele + 1; //元素增加1
}
})
strTmp += arrNum.join();
strTmp += "<br/><br>变更后数据："
strTmp += arrGet.join();

　　　5) $.inArray()
在数组中找某个元素，找到返回索引号，找不到则返回-1,
$.inArray(value,array),value:要检索的对象
　　　6) $.contains(container,contained)
检查一个dom节点中是否包含另外一个dom节点，如果container包含contained，则返回true

7)$.param()对数组序列化
　　　　　　　将对象序列化后可传输的URL
如：
　　　　 var arrInfo = { id: 101, name: "tao", sex: 0 };
　　　　　　　 var arrNewInfo = $.param(arrInfo);
　　　　　　　变为id=101&name=tao&sex=0
8)$.extend()扩展工具函数
　　　　　　比如搞个求两数中的最大值
　　　　 ; (function($) {
$.extend({
"MaxNum": function(p1, p2) {
return (p1 > p2) ? p1 : p2;
}
});
})(jQuery);
　　　　　　　使用$.MaxNum(5,6);

6 性能优化
　　　　
1)有id,TAG,class三者情况下，用id访问速度最快
　　　2)　优化事件中的冒泡，通过target()方法，获取父元素，并为该元素绑定一个事件，比如：
　　　　<fieldset id="frame" style="width:200px">
<legend>输入信息</legend>
<div>姓名：<input id="Text1" type="text"/></div>
<div>性别：<input id="Text2" type="text" /></div>
<div>年龄：<input id="Text3" type="text" /></div>
</fieldset>
　　　 $(function() {
$("#frame").bind("click", function(e) {
$objChild = $(e.target);//捕捉触发事件的元素
$objChild.addClass("txt");//增加子元素的样式
})
});
　　　　　 $objChild = $(e.target);获得触发事件的元素，将事件绑定传递到父元素中，通过冒泡
传递到各子元素，使各个子元素也被同样绑定，比逐个input快
　　　　
　　　3)可以通过xxxx.data(name,value),设置缓存数据，包括设置json,移除为
　　　　removeData(name)
4)减少对dom元素的操作，一次操作多点
var arrList = ["list0", "list1", "list2", "list3", "list4", "list5"];
var strList = ""; //初始化字符
$.each(arrList, function(index) {
//遍历后累加数组元素
strList += ("[*]" + arrList[index] + "
");
})
//一次性完成DOM元素的增加
$("#ulFrame").append(strList);
5) dom对象与JQUERY对象的类型转换
dom向jquery转换：
<div id="div0"></div>
<div id="div1"></div>
$(function() {
//***** DOM对象转成jQuery对象 *****//
//DOM对象
var objDom0 = document.getElementById("div0");
//转成jQuery对象
var $obj0 = $(objDom0);
//调用jQuery中的方法设置其中的内容
$obj0.html("DOM对象转成jQuery对象后设置的内容");

//***** jQuery对象转成DOM对象 *****//
//jQuery对象
var $obj1 = $("#div1");
//转成DOM对象
var objDom1 = $obj1.get(0);
//调用JavaScript中的对象方法设置内容
objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容";
})