jqueryajax不能返回XML的问题

如果返回的是个XML字符流而不是XML文件还是要将其转换为XML对象才可正常解析。

如下:

var xmlObject = new ActiveXObject(“Msxml.DOMDocument”);

xmlObject.async = false; 

xmlObject.loadXML(message);

$(xmlObject).find(“op”).each(function(){

  var ss = $(this).text();

  var aa = ss.split(“|”);

  var key = aa[0];

  var name = aa[1];

});

记得将datatype:xml修改成datatype:html

常用正则整理

一种简单的正则表达式验证工具:浏览器的地址栏!

输入javascript:/^\s*$/.test(” “); 回车后,得到true;

输入javascript:/^\s*$/.test(“0”); 回车后,得到false。

常用正则:

javascript:/^\s*$/.test(" ");
javascript:/^\d+$/.test("0123456789");
javascript:/^[1-9]\d*$/.test("1234567890");
javascript:/^- ( :\d+|\d{1,3}( :,\d{3})+)( :\.\d+) $/.test("-233,323,432.323456");
javascript:/^- ( :\d+|\d{1,3}( :\.\d{3})+)( :,\d+) $/.test("232.232.292,2533");
javascript:/^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test("2008-11-29");
javascript:/^\d\d \.\d\d \.\d\d\d \d $/.test("11.29.2008");

email

8./^((([a-z]|\d|[!#\$%&'\*\+\-\/=\ \^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\ \^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a)) (\x20|\x09)+) (([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a)) (\x20|\x09)+) (\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\. $/i.test(email);

url

9./^(https |ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@) (((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\. )(:\d*) )(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*) ) (\ ((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\ )*) (\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\ )*) $/i.test(url);

参考:jquery.validate.js

300+Jquery,CSS,MooTools和JS的导航菜单

引用
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手。但今天我要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了。我收集的这些资源,从非常简单的HTML和CSS导航菜单,到非常复杂和高级的JQuery、JavaScript和MooTools技术,这都可以让你轻松实现褪色、滑动、拖动等效果。

http://article.yeeyan.org/view/47543/19224 from_com 并对其中一种效果进行了整理:已作为附件上传。

EASYUI表单扩展

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<title>禁止访问</title>

<script type=”text/javascript” src=”jquery-1.4.4.min.js”></script>

<script type=”text/javascript” src=”jquery.easyui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”themes/default/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”themes/icon.css”>

<script>

<!– 导入jquery.js  和easy_ui.js 自定义自己的 JS  家庭地址 是验证密码的–>

$(function(){

  $(‘#uiform input’).each(function () {

            if ($(this).attr(‘required’) || $(this).attr(‘validType’))

                $(this).validatebox();

        })

});

$.extend($.fn.validatebox.defaults.rules, {

    CHS: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5]+$/.test(value);

        },

        message: ‘请输入汉字’

    },

    ZIP: {

        validator: function (value, param) {

            return /^[1-9]\d{5}$/.test(value);

        },

        message: ‘邮政编码不存在’

    },

    QQ: {

        validator: function (value, param) {

            return /^[1-9]\d{4,10}$/.test(value);

        },

        message: ‘QQ号码不正确’

    },

    mobile: {

        validator: function (value, param) {

            return /^((\(\d{2,3}\))|(\d{3}\-)) 13\d{9}$/.test(value);

        },

        message: ‘手机号码不正确’

    },

    loginName: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5\w]+$/.test(value);

        },

        message: ‘登录名称只允许汉字、英文字母、数字及下划线。’

    },

    safepass: {

        validator: function (value, param) {

            return safePassword(value);

        },

        message: ‘密码由字母和数字组成,至少6位’

    },

    equalTo: {

        validator: function (value, param) {

            return value == $(param[0]).val();

        },

        message: ‘两次输入的字符不一至’

    },

    number: {

        validator: function (value, param) {

            return /^\d+$/.test(value);

        },

        message: ‘请输入数字’

    },

    idcard: {

        validator: function (value, param) {

            return idCard(value);

        },

        message:’请输入正确的身份证号码’

    }

});

/* 密码由字母和数字组成,至少6位 */

var safePassword = function (value) {

    return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\ \\\/\’\”]*)|.{0,5})$|\s/.test(value));

}

var idCard = function (value) {

    if (value.length == 18 && 18 != value.length) return false;

    var number = value.toLowerCase();

    var d, sum = 0, v = ’10×98765432′, w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = ‘11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91’;

    var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);

    if (re == null || a.indexOf(re[1]) < 0) return false;

    if (re[2].length == 9) {

        number = number.substr(0, 6) + ’19’ + number.substr(6);

        d = [’19’ + re[4], re[5], re[6]].join(‘-‘);

    } else d = [re[9], re[10], re[11]].join(‘-‘);

    if (!isDateTime.call(d, ‘yyyy-MM-dd’)) return false;

    for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];

    return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));

}

var isDateTime = function (format, reObj) {

    format = format || ‘yyyy-MM-dd’;

    var input = this, o = {}, d = new Date();

    var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);

    var len = f1.length, len1 = f3.length;

    if (len != f2.length || len1 != f4.length) return false;

    for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;

    for (var i = 0; i < len; i++) o[f1[i]] = f2[i];

    o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);

    o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);

    o.dd = s(o.dd, o.d, d.getDate(), 31);

    o.hh = s(o.hh, o.h, d.getHours(), 24);

    o.mm = s(o.mm, o.m, d.getMinutes());

    o.ss = s(o.ss, o.s, d.getSeconds());

    o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);

    if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;

    if (o.yyyy < 100) o.yyyy += (o.yyyy > 30   1900 : 2000);

    d = new Date(o.yyyy, o.MM – 1, o.dd, o.hh, o.mm, o.ss, o.ms);

    var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;

    return reVal && reObj   d : reVal;

    function s(s1, s2, s3, s4, s5) {

        s4 = s4 || 60, s5 = s5 || 2;

        var reVal = s3;

        if (s1 != undefined && s1 != ” || !isNaN(s1)) reVal = s1 * 1;

        if (s2 != undefined && s2 != ” && !isNaN(s2)) reVal = s2 * 1;

        return (reVal == s1 && s1.length != s5 || reVal > s4)   -10000 : reVal;

    }

};

</script>

</head>

<body>

<table class=”grid” id=”uiform”>

<tr><td>登录名:</td><td><input  required=”true” id=”txtUsername” type=”text” class=”txt03″ /></td><td>真实姓名:</td><td><input id=”txtTruename” validType=”CHS” required=”true” type=”text” class=”txt03″ /></td></tr>

<tr><td>登录密码:</td><td><input validType=”safepass”  required=”true” id=”txtPassword” name=”password” type=”password” class=”txt03″ /></td><td>Email:</td><td><input id=”txtEmail” name=”email”  validType=”email” type=”text” class=”txt03″ /></td></tr>

<tr><td>身份证号:</td><td><input validType=”idcard” id=”txtIdcard” name=”idcard” type=”text” class=”txt03″ /></td><td>QQ:</td><td><input validType=”QQ” id=”txtQq” name=”qq” type=”text” class=”txt03″ /></td></tr>

<tr><td>手机:</td><td><input validType=”mobile” id=”txtMobile” name=”mobile” type=”text” class=”txt03″ /></td><td>电话:</td><td><input id=”txtTel” name=”tel” type=”text” class=”txt03″ /></td></tr>

<tr><td>家庭住址:</td><td colspan=”3″><input validType=”equalTo[txtMobile]” style=”width:80%” id=”txtHomeaddr” name=”homeaddr” type=”text” class=”txt03″ /></td></tr>

<tr><td>备注:</td><td colspan=”3″> <input type=”text” style=”width:80%” class=”txt03″ id=”txtRemark”></textarea></td></tr>

<tr><td>&nbsp;</td><td colspan=”3″><input id=”Checkbox1″ type=”checkbox” /><label>超级管理员</label>&nbsp;&nbsp;<input id=”Checkbox2″ type=”checkbox” /><label>禁用</label></td></tr>

</table

</body>

</html>

jQuery支持的方法

字符串,数组和对象相关的工具方法

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>字符串,数组和对象相关的工具方法</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
  </head>
  
  <body>
		<script type="text/javascript">
			//访问浏览器属性
			for ( var key in $.browser) {
				document.writeln("当前浏览器的" + key + "属性为:" + $.browser[key] + "<br />");
			}
			//去除字符串前后的空白
			document.writeln("$.trim('	ddd'));的结果是" + $.trim("	ddd") + "<br />");
			//遍历数组
			$.each( [ "java", "ajax", "java ee" ], function(index, val) {
				document.writeln("['java' , 'ajax' ,'java ee']的第" + index + "个元素为:"
						+ val + "<br />");
			});
			//以指定函数过滤数组
			var grepResult = $.grep( [ "java", "ajax", "java ee" ],
					function(val, index) {
						//当数组元素的字符个数大于5时被保留
					return val.length > 5;
				});
			document.writeln("['java' , 'ajax' ,'java ee']里数组元素的字符个数大于5的还有:"
					+ grepResult + "<br />");
			//以旧数组创建新数组
			var mapResult = $.map( [ "java", "ajax", "java ee" ], function(val, index) {
				//当数组元素和索引值连缀在一起作为新的数组元素
					return val + index
				});
			document.writeln("以['java' , 'ajax' ,'java ee']创建的新数组为:" + mapResult);
			//创建div元素
			var div = $("<div>aa<div>");
			//以相同的两个div创建数组
			var divArr = [ div, div ];
			document.writeln("divArr.length的值为:" + divArr.length + "<br />");
			//执行$.unique去除重复元素
			document.writeln("$.unique(divArr).length的结果为:" + $.unique(divArr).length
					+ "<br />");
			var str = "aa";
			//以两个相同的字符串创建数组
			var strArr = [ str, str ];
			document.writeln("strArr.length的值为:" + strArr.length + "<br />");
			//执行$.unique不能去除重复元素
			document.writeln("$.unique(strArr).length的结果为:" + $.unique(strArr).length
					+ "<br />");
		</script>
	</body>
</html>

 数据存储的相关方法

<body>
		<script type="text/javascript">
			var target = $("<div>java</div>");
			//向jQuery对象里添加book数据
			target.data("book" , "Java");
			//访问jQuery对象里的book数据,将输出"Java"
			alert(target.data("book"));
			//删除jQuery对象里的book数据
			target.removeData("book");
			//再次访问jQuery对象里的book数据,将输出"undefined"
			alert(target.data("book"));
		</script>
</body>

 操作属性的相关方法

<body>
		<img />
		<img />
		<div>
			<img />
			<img />
			<img />
		</div>
		<script type="text/javascript">
			//获取body下的img元素,并为这些img元素设置src属性值
			$("body>img").attr("src", "logo.jpg").attr("alt", "Java");
			//获取div下的img元素,并为这些img元素设置src属性值
			$("div>img").attr("src", function(index) {
				return index + 1 + ".gif";
			});
		</script>
	</body>

 操作CSS属性的相关方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>操作CSS属性的相关方法</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
		<style type="text/css">
		.test {
			background-color: #ccccff;
			border: 2px dotted red;
			font-weight: bold;
		}
		</style>
	</head>

	<body>
		<div id="test1">
			整体添加CSS样式的元素
		</div>
		<br />
		<div id="test2">
			采用css(properties)方法添加CSS样式的元素
		</div>
		<br />
		<div id="test3" style="position: absolute;">
			可以自由移动的元素
		</div>
		<script type="text/javascript">
			//为id为test1的元素设置class="text"
			$("#test1").addClass("test");
			//为id为test2的元素设置内联CSS样式 , css(properties), properties是一个形如{key:value}的对象
			$("#test2").css( {
				border : "1px solid black",
				color : "#888888"
			});
			//获取id为test3的元素
			var target = $("#test3")
			//设置背景色
					.css("background-color", "#cccccc").css("padding", 10)
					//设置宽度
					.width(200)
					//设置高度
					.height(80)
					//设置位置
					.css("left", 100).css("top", 164);
			//获取target的位置
			var posi = target.position();
			alert("target的X座标为:" + posi.left + "\n" + "target的Y座标为:" + posi.top);
		</script>
	</body>
</html>

 操作HTML元素内容的相关属性

<body>
		<div></div>
		<div></div>
		<input id="book" name="book" type="text" />
		<br />
		<input id="desc" name="desc" type="text" />
		<br />
		<select id="gender">
			<option value="male">
				男人
			</option>
			<option value="female">
				女人
			</option>
		</select>
		<br />
		<select id="publish" multiple="multiple">
			<option value="phei">
				电子工业出版社
			</option>
			<option value="tsinghua">
				清华大学出版社
			</option>
		</select>
		<br />
		<script type="text/javascript">
			//设置body下的div元素的内容
			$("body>div").html("Ajax");
			//设置所有input、select和textarea的值
			$("body>input").val("XML");
			//为所有的<select.../>元素设置value值
			$("select").val( [ "female", "tsinghua"]);
			//仅获取jQuery元素的text部分,下面将输出java:Java
			alert($("<div>java:<span>Java</span></div>").text());
		</script>
	</body>

 操作DOM节点的相关方法

<body>
		<div id="test1"></div>
		<div id="test2" style="border: 1px solid black;">
			id为test2的元素
		</div>
		<script type="text/javascript">
			//直接将一段HTML字符串添加到id为test1的元素的内部的尾端
			$("#test1").append("<b>XML</b>");
			//创建一个<span.../>元素
			var span = document.createElement("span");
			span.innerHTML = "Java"
			//将一个DOM元素添加到id为test1的元素的内部的顶端
			$("#test1").prepend(span);
			//将id为test1的元素添加到id为test2的元素内部的尾端
			$("#test1").appendTo("#test2");
		</script>
	</body>

 操作DOM节点的相关方法(在指定的节点添加节点)

<body>
		<div id="test1" style="border: 1px dotted black;">
			id为test1的元素
		</div>
		<br />
		<div id="test2" style="border: 1px solid black;">
			id为test2的元素
		</div>
		<hr />
		<script type="text/javascript">
			//直接将一段HTML字符串插入到id为test1的元素的的前面
			$("#test1").before("<b>Ajax</b>");
			//直接将一段HTML字符串插入到id为test1的元素的的后面
			$("#test1").after("<b>XML</b>");
			//将id为test2的元素插入hr元素之后
			$("#test2").insertAfter("hr");
		</script>
	</body>

 操作DOM节点的相关方法(包裹DOM节点)

<body>
		<span id="test1">id为test1的元素</span>
		<br />
		<span id="test2">id为test2的元素</span>
		<script type="text/javascript">
		//将每个span元素之外再包裹一个带点线边框的div元素
		$("span").wrap("<div style='border:1px dotted black'></div>");
		//将每个span元素内部成分再包裹一个灰色背景的span元素
		$("span").wrapInner("<span style='background-color:#dddddd'></span>");
		</script>
	</body>

 操作DOM节点的相关方法(替换,删除,复制)

<body>
		<div>
			<span id="test1">id为test1的元素</span>Java
		</div>
		<span id="test2">id为test2的元素</span>
		<script type="text/javascript">
			//将div元素内容全部清空
			$("div").empty()
			//重新添加字符串
					.append("重新添加");
			//删除所有id为test2的span元素
			$("span").remove("#test2");
			//取得页面中div元素,并复制该元素
			$("div").clone()
			//添加背景色
					.css("background-color", "#cdcdcd")
					//添加到body元素尾部
					.appendTo("body");
		</script>
	</body>

 

简单的对联广告

<html>

    <head><title>对联广告</title>

        <style>

         body{

           height:2000px;

       

         }      

             .dui{

             width:100px;

             height:400px;

             border:1px solid red;

         }  

         #left{

             float:left;

             overflow:hidden;

             position:relative;

             background:url(‘left_ad.jpg’)

         }

         #right{

             float:right;

             position:relative;

             background:url(‘right_ad.jpg’)

         }

        .fix{

        

           position:fixed;

           top:150px;     

       }

        </style>

    </head>

    <body>

        <script src=’jquery-1.4.2.min.js’></script>

        <script>

                  jQuery(document).ready(function(jquery){

              jquery(window).scroll(function (){

            var to=jquery(‘.fix’).offset().top;

            jquery(‘.dui’).animate({

             top:to+’px’

            },’200′);         

        });

    });

        </script>

      

        <div id=’left’ class=’dui’>

             <div class=’fix’></div>

        </div> 

                <div id=’right’ class=’dui’></div>

    </body>

</html>

[/html]

jquery插件开发及extend

    以下信息是在看了IBM上的一篇文章(使用 jQuery(中级),第 2 部分: 创建自己的插件)http://www.ibm.com/developerworks/cn/web/wa-aj-jquery6/ ca=drs-tp4608之后,自己的一些想法。

    这文章主要是从如何写一个插件上来说,中间主要用到的还是在jQuery.fn上做文章,通过定义一个闭包函数,将jQuery作为参数传递过去,再在这个fn增加自己的函数来实现。中间有几个问题,记录如下:

    1,为什么往fn上加函数就可以让jquery对象调用了呢?

看了下代码,注意到这句(jQuery.fn = jQuery.prototype),这句其实很明白了,jQuery.fn实际上就是jQuery.prototype,通过原型来实现一个函数的添加。而在fn上追加的函数上使用this,这个this实际上就是jQuery对象。因为fn就是prototype,调用函数者就是jQuery实现上就是jQuery的一个实例化对象。

 

    看了下文章中关于插件开发的,具体代码倒是其次,主要是其中有几个要点很重要。复制如下:

    1,让内部方法私有化,这其实就是说在自己写的插件里面,因为这个函数可能就自己的插件调用,这其实也是为了避免代码污染。在jquery中有很多例子的。

    2,让默认值可覆盖,这就是说在程序中可能会有一些默认值。所以需要在传递参数中,传递一些可以覆盖默认参数的东西,比如参数中经常传递options这个参数,其实就是拿来覆盖默认参数的。

 

    还有几个插件开发规则,复制如下:

    1,文件命名为 “jquery.<your plug-in name>.js”,这个没什么说的。

    2,所有新方法都附加到 jQuery.fn 对象,所有新功能都附加到 jQuery 对象,这个其实就是往对象上加函数。插件写法就是jQuery.fn.plugin=function(options)的这种样子。

    3,“this” 用于引用 jQuery 对象。这个如果按照第条规则,this肯定引用到jQuery的。

    4,插件中定义的所有方法/函数的末尾都必须带有一个 “;”(分号),否则将不利于代码的最小化。这个不清楚了。

    5,除有特别注明外,所有方法都必须返回 jQuery 对象,其实就是返回this。这个主要是为了链式编程吧,jQuery中到处都是这种。

    6,总是在插件代码中使用 “jQuery” 而不是 “$”。这个不是强制的,比如中我写的闭包就可以这样写:(function($))(jQuery)的这种格式,然后在里面使用$,这里的$其实就是jQuery,这个是参数传递上的东西。

 

   最后就是里面经常用到的extend函数了。简单看了下,整个函数很简单,就是一个复制过程,但在jQuery中经常用到,比如ajax就是通过extend带到jquery中的。

    这里面有个问题,我们使用ajax都是通过$.ajax这种形式访问的,这就表明ajax其实不算是jquery对象的一个方法,最多算一个静态方法。这就实际上说明,extend是往一个对象上追加信息,而$.ajax是往$这个类对象上加,而不是jqury实例对象站加,所以就不能用类似$().ajax的形式来进行ajax访问了,后者返回的是一个undefined信息。在方法内部,实际上就是一个this引用的问题了。

    还是将jquery自己的代码贴出来,在上面加注释信息。

 

jQuery.extend = jQuery.fn.extend = function() {
	//target就是复制目的是哪个对象,这里首先就是第一个参数。
	//i表示source的起始坐标。0被target占用,所以源是目的的下一个
	//length,当前参数长度了;deep,是否深度copy,深度copy就是将里面的对象再次序列化,进行迭代调用
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	//处理第一个函数是boolean的情况,就是说第一个函数可以控制是否深度copy,那这样的话接下来的参数就是往后移位了.
	//jquery中很多地方都是这种处理情况,往往参数列表中有个参数缺失,那么不需要用null来占位,而是直接将后面的参数移到前面来,这样就有一个处理参数移位的问题.
	//在这个里面,第一个参数被占位,那么target就为1位了,源再+1往后走了.
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	//处理这个目的不是object对象,且又不是函数的,这样的话,实际target可能就是其他东西,比如字符串或者基本类型等,这时就将target进行改变.实际上就是忽略target的原来信息.可以理解成一个用source来代替target.
	if ( typeof target !== "object" && !jQuery.isFunction(target) )
		target = {};

	//如果length==i,其实就是没有source的情况,那么将将target变成source,原先的target就直接用调用者this代替了.这样的话,其实就是直接往调用者上加东西.
	//这个用$.ajax来理解,最适合了.源代码中jQuery.extend({ajax:function()});的形式,其实就是直接往$上加函数,因为调用者就是jQuery
	if ( length == i ) {
		target = this;
		--i;
	}
	//进行循环,将source(可能有很多个source,按顺序进行copy),也就是说可以这样写$.extend(target,source1,source2);
	//这样后面的信息可以覆盖前面的信息,而source1可以是函数内置的一个默认信息,source2可以对信息进行更改.
	for ( ; i < length; i++ )
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null )
			// Extend the base object
			for ( var name in options ) {
				//这里就对两边进行取信息了,src表示从target中取的信息(这个可能是null,当然也可能不是,不是的话,那么后面的copy就可能要覆盖这个值了)
				//copy就是从source中取的信息了.
				var src = target[ name ], copy = options[ name ];

				// Prevent never-ending loop
				//这里主要是为了防止在深度copy的情况下,出现无限迭代的情况.比如这种情况:extend(true,target,{"a":target}),这样的话,就会出现无限copy了
				if ( target === copy )
					continue;

				// //这里就是处理深度copy了,如果需要,就进行深度copy,将copy后的值加到target中
				if ( deep && copy && typeof copy === "object" && !copy.nodeType )
					target[ name ] = jQuery.extend( deep, 
						// Never move original objects, clone them
						src || ( copy.length != null   [ ] : { } )
					, copy );

				// 不加undefined值
				else if ( copy !== undefined )
					target[ name ] = copy;

			}

	// 返回target
	return target;
};

     翻译都是按照自己的理解来翻译的,可能不对。

    

     在看了这个东西,感觉在其他程序中(我做java,java中很多这种)也有很多类似的设定,需要进行类似迭代处理,比较直观的就是java中java对象转json的处理了,都一样要对一个对象json化成一个string,中间仍要处理各种类型的信息,还要避免无限迭代等。

 

     以上都是整个jquery中大信息中的小小的一部分。了解一些,总比过后忘了好。

使用jQuery开发iOS风格的页面导航菜单

使用jQuery开发iOS风格的页面导航菜单

在线演示  本地下载

iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航。

HTML代码

我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下:

<nav>
  <h1>导航菜单</h1>
  <ul>
    <li>
      <h2>专题教程</h2>
      <ul>
        <li>
          <h3>HTML专题教程</h3>
		  <ul>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇:HTML5介绍</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇:HTML5元素</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇:HTML5 Video元素</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video-doc">GBin1专题之HTML5教程 - 第四篇:HTML5 Video Doc</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-audio">GBin1专题之HTML5教程 - 第五篇:HTML5 Audio元素</a></li>
			</ul>
        <li>
          <h3>GBin1热点秀</h3>
          <ul>
                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot1/">GBin1专题之Web热点秀#1</a>
                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot2/">GBin1专题之Web热点秀#2</a>
                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot3/">GBin1专题之Web热点秀#3</a>
          </ul>

      </ul>
      。。。 。。。

Javascript

使用jQuery来查询遍历li,并且生成菜单项目,如下:

…………….

 

来源:使用jQuery开发iOS风格的页面导航菜单

jqueryradio,checkbox,select操作

获取一组radio被选中项的值
var item = $(‘input[@name=items][@checked]’).val();
获取select被选中项的文本
var item = $(“select[@name=items] option[@selected]”).text();
select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[@name=items]’).get(1).checked = true;

获取值:

文本框,文本区域:$(“#txt”).attr(“value”);
多选框checkbox:$(“#checkbox_id”).attr(“value”);
单选组radio:   $(“input[@type=radio][@checked]”).val();
下拉框select: $(‘#sel’).val();

控制表单元素:
文本框,文本区域:$(“#txt”).attr(“value”,”);//清空内容
                 $(“#txt”).attr(“value”,’11’);//填充内容

多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾
                 $(“#chk2”).attr(“checked”,true);//打勾
                 if($(“#chk1”).attr(‘checked’)==undefined) //判断是否已经打勾

单选组radio:    $(“input[@type=radio]”).attr(“checked”,’2′);//设置value=2的项目为当前选中项
下拉框select:   $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项
                $(“<option value=’1′>1111</option><option value=’2′>2222</option>”).appendTo(“#sel”)//添加下拉框的option
                $(“#sel”).empty();//清空下拉框