jquery前台开发框架的学习心得

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器 。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插 入一堆js来调用命令了，只需定义id即可。

在应用jquery框架时，首先要导入jquery的核心包<script type=”text/javascript” src=”lib/jquery-1.3.2.js”></script>。它包括一些最常用的功能，jquery也有很多扩展包，不过都是基于核心包来完成的，扩展包可以更好的展示一些页面效果，下面我来介绍我所了解的jquery的功能。

在载入页面完成后就会加载下面的jquery代码，在页面弹出一个对话框：

$(document).ready(function(){
alert(“asasassdsds”);
});

下面是jquery对层得操作：

$(function() {
/**点击aaa这个层时这个层就影藏起来**/
$(“#aaa”).click(function(){
$(this).hide(“slsow”);
});
/**对这个层实现拖拽效果**/
$(“#draggable”).draggable();
});

/**可调节层的大小**/
<script type=”text/javascript” src=”ui/ui.resizable.js”></script>
$(“#resizable”).resizable();

/**选择也可以拖动选择，后变颜色**/
<script type=”text/javascript” src=”ui/ui.selectable.js”></script>
$(“#selectable”).selectable();

/***层的拖动**/
<script type=”text/javascript” src=”lib/jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”lib/ui.core.js”></script>
<script type=”text/javascript” src=”lib/ui.draggable.js”></script>
$(“#draggable”).draggable();
$(“#draggable”).draggable({ axis: ‘y’ });/**只能竖线拖动**/
$(“#draggable2″).draggable({ axis: ‘x’ });/**只能横向拖动**/

下面是jquery是数组的操作：

/**对数组操作每个元素都乘以2**/
var arr = [3,5,8];
var arr2 = $.map(arr,function(item){return item * 2 ;});
alert(arr2);
/**遍历键值对和普通的数组**/
var arr = [3,5,8];
var dict = {“tom”:20,”jeery”:50,”jim”:30};
$.each(dict,function(key,value){alert(key + “年龄是：” + value);});
/**只有一个参数时就只处理了key**/
$.each(dict,function(key){alert(key);});
/**没有参数时就只处理了value**/
$.each(dict,function(){alert(this);});

jquery对页面的内容的操作：

/**读取网页上的内容显示出来**/
$(function(){alert($(“#aaa”).html());})
/**html()中的有参数时就是赋值，没参数时就是取值
$(“#aaa”).html(“蛮好！！<font color=’red’>呵呵</font>”);
/**设置CSS样式**/
$(“#aaa”).css(“background”,”red”);
/**读取CSS的样式**/
$(“#aaa”).css(“background”);

/**获取这个层得全部内容（包括html的标记）**/
$(“#draggable”).html();
/**获取这个层得文本内容（不包括html的标记）**/
$(“#draggable”).text();

/**对txt1赋值 和 取值**/
$(“#txt1″).val(new Date());
alert ($(“#txt1″).val());

jquery对用户信息的验证：

/**对表单进行简单的验证**/
$(document).ready(function()?{?
$(“#myForm”).validate({
rules: {
username: { required: true },
password: { required: true }
},
messages: {
username: {required:”<font color=’red’>需要输入用户名</font>”},
password: {required:”<font color=’red’>请输入密码</font>”}
}
});
});

/**验证用户在数据库是否存在了**/
$(‘#username’).blur(function(){
var url = “validate.php?username=” + $(‘#username’).val();
$.get(url, function(data){ // 这里可以将post换成get
if(data == 0 ){
$(“.nameNew”).html(“<font color = ‘red’>用户名不存在</font> “);
}else if(data == 1){
$(“.nameNew”).html(“<font color = ‘red’>用户名存在</font> “);
}
});
});

jquery对无序列表拖拽排序后保存：

/**排序后保存**/
<script type=”text/javascript” src=”lib/jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”lib/ui.core.js”></script>
<script type=”text/javascript” src=”lib/ui.draggable.js”></script>
<script type=”text/javascript” src=”lib/ui.sortable.js”></script>
$(function() {
$(“#sortable”).sortable({ /**拖动排序**/
revert: true
});
$(“#draggable”).draggable({ /**拖动后就复制了**/
connectToSortable: ‘#sortable’,
helper: ‘clone’,
revert: ‘invalid’
})
$(“ul, li”).disableSelection();
});
<ul>
<li id=”draggable”>Drag me down</li>
</ul>
<ul id=”sortable”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

This entry was posted in web开发, 易网联信 and tagged easymobi, 事件, 交互操作, 自定义控件. Bookmark the permalink.