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 += "
})
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 <
{ //元素值大于5且序号小于8return 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 <
{ //元素值大于5且序号小于8return 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
$.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 += ("
})
//一次性完成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对象后设置的内容";
})
1 楼
daixu2008
2011-10-20
代码内的表情很给力！