Jquery学习总结

jQuery核心技巧

最新推荐文章于 2025-02-25 16:42:25 发布

原创最新推荐文章于 2025-02-25 16:42:25 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

1 专栏收录该内容

54 篇文章

订阅专栏

1，静态方法的声明和调用和非静态方法的声明和调用

1）静态方法的声明和调用：$相当于一个类
$.test = function(a,b) {
//声明
return a+b;

};

alert($.test(4,4));//调用
2）非静态方法的声明和调用：$("#name")相当于对象实例
$.fn.test = function() {

return $(this).val();

};

$(function(){

alert($("#name").test());

});
2，静态方法的声明和调用和非静态方法的声明和调用（函数的另一种声明）
1）$.extend({

test:function(a,b) {

return a+b;

}
});

alert($.test(4,4));

2）$.fn.extend({

test:function() {

return $(this).val();

}

});

$(function(){

alert($("#name").test());

});
3，data() 方法向被选元素附加数据，或者从被选元素获取数据。
案例1：$("#btn1").click(function(){

$("div").data("greeting", "Hello World");
}
});

$("#btn2").click(function(){

alert($("div").data("greeting"));
}
});
案例2：使用对象向元素附加数据
<script type="text/javascript">
$(document).ready(function(){
testObj=new Object();
testObj.greetingMorn="Good Morning!";
testObj.greetingEve="Good Evening!";
$("#btn1").click(function(){
$("div").data(testObj);
});
$("#btn2").click(function(){
alert($("div").data("greetingEve"));
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
案例3：
//加载整个页面后执行
$(function(){
$(".show").css("color","red");
$(".show").hide();
//给username输入框添加onblur事件
$("input[name=username]").blur(function(){
//获取username所在的td
var val = this.value;
//校验用户名长度
if (val.length > 20 || val.length < 4) {
$(this).data("s",0); //给元素绑定数据默认是1
$(this).next().show();
}else{
$(this).data("s",1);
$(this).next().hide();
}
});
//给password输入框添加onblur事件
$("input[name=password]").blur(function(){
//获取password所在的td
var val = this.value;
//校验密码长度
if (val.length > 20 || val.length < 6) {
$(this).data("s",0); //给元素绑定数据默认是1
$(this).next().show();
}else{
$(this).data("s",1);
$(this).next().hide();
}
});

//给repassword输入框添加onblur事件
$("input[name=repassword]").blur(function(){
var val1 = $("input[name=password]").val();
//获取repassword所在的td
var val2 = this.value;
//校验密码和确认密码是否相等
if(val1 != val2){
$(this).data("s",0); //给元素绑定数据默认是1
$(this).next().show();
}else{
$(this).data("s",1);
$(this).next().hide();
}
});

//给mail输入框添加onblur事件
$("input[name=mail]").blur(function(){
//获取password所在的td
var val = this.value;
//校验邮箱格式
if (!val.match(/^\w+@\w+\.\w+$/)) {
$(this).data("s",0); //给元素绑定数据默认是1
$(this).next().show();
}else{
$(this).data("s",1);
$(this).next().hide();
}
});

//给phone输入框添加onblur事件
$("input[name=phone]").blur(function(){
//获取password所在的td
var val = this.value;
//校验手机格式
if (!val.match(/^139\d{8}$/)) {
$(this).data("s",0); //给元素绑定数据默认是1
$(this).next().show();
}else{
$(this).data("s",1);
$(this).next().hide();
}
});

$("form").submit(function(){

// $(".auth").blur();
var tot = 0;
$(".auth").each(function(){
tot+=$(this).data("s"); //获取元素绑定的数据
alert($(this).data("s"));
});
alert(tot);
//如果5个输入框的值都是合法的就进行提交
if(tot!=5){
return false;
}

});
});
4，正则表达式
正则表达式中的特殊字符
字符含意
\ 做为转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/ \b/，转意为匹配一个单词的边界。
-或- 对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配"a*"。
^ 匹配一个输入或一行的开头，/^a/匹配"an A"，而不匹配"An a"
$ 匹配一个输入或一行的结尾，/a$/匹配"An a"，而不匹配"an A"
* 匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa
? 匹配前面元字符0次或1次，/ba*/将匹配b,ba
(x) 匹配x保存x在名为$1...$9的变量中
x|y 匹配x或y
{n} 精确匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)
[^xyz] 不匹配这个集合中的任何一个字符
[\b] 匹配一个退格符
\b 匹配一个单词的边界
\B 匹配一个单词的非边界
\cX 这儿，X是一个控制符，/\cM/匹配Ctrl-M
\d 匹配一个字数字符，/\d/ = /[0-9]/
\D 匹配一个非字数字符，/\D/ = /[^0-9]/
\n 匹配一个换行符
\r 匹配一个回车符
\s 匹配一个空白字符，包括\n,\r,\f,\t,\v等
\S 匹配一个非空白字符，等于/[^\n\f\r\t\v]/
\t 匹配一个制表符
\v 匹配一个重直制表符
\w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9]
\W 匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。
案例：
str.match(/^\d{2,4}$/); //匹配2到4间的数字.
str.match(/^\w{3}\d?$/) //匹配三个单字字符和一个任意的数字.
str.match(/^\s+java\s+$/) //匹配字符串"java" ,并且该串前后可以有一个或多个空格.
str.match(/^[^"]* $/) //匹配零个或多个非引号字符.
//校验邮箱格式
if (!val.match(/^\w+@\w+\.\w+$/)) {
$(this).data("s",0); //给元素绑定数据默认是1
$(this).next().show();
}else{
$(this).data("s",1);
$(this).next().hide();
}
5，bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。通俗点说是给指定元素标签绑定事件的。
语法：$(selector).bind(event,data,function)
案例1：
<script type="text/javascript">
$(document).ready(function(){
$("button").bind("click",function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
案例2：同时绑定多个事件
<script type="text/javascript">
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>

6，当指定的元素（及子元素）已加载时，会发生 load() 事件。
语法：$(selector).load(function) function为当前选定元素加载完成时运行的函数
案例1：
<script type="text/javascript">
$(document).ready(function(){
$("img").load(function(){
$("div").text("图像已加载");
});
});
</script>
<body>
<img src="/i/shanghai_lupu_bridge.jpg" />
<div>图像正在加载中 ...</div>
<p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p>
</body>
案例2：
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
//装入静态完成页面
$("#realcontent").load("TabLoad.html");
} else if (index == 1) {
//装入动态部分页面
$("#realcontent").load("TabLoad.jsp h2");
} else if (index == 2) {
//装入远程数据（这里也是一个动态页面输出的数据）
$("#realcontent").load("TabData.jsp")
}
});
});

7，ajaxStart()和ajaxStop() 两个全局事件
//ajaxStart()与ajaxStop()这两个全局事件必须绑定在document元素上。
//在Ajax异步发送请求时，遇到网速比较慢的时候，就会出现请求比时间较长的问题，用户等的不耐烦就会关闭页面。而如果在请求期间能给用户一些提示。比如：正在努力加载中... 那么用户可能会等久一点，体验就业好一些了。
//jquery提供了两个全局事件，ajaxStart()和ajaxStop() 这两个全局事件，只要用户触发了Ajax,请求开始（仅仅是准备开始请求，还未完成请求）那么就会触发ajaxStart()这个事件。当用户请求结束的时候就会触发ajaxStop()事件。
案例1：
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<label for="UserId">请输入用户的ID编号:</label>
<input type="text" id="UserId" name="UserId" style="width:20px" />
<input type="button" id="btnClick" value="提交" />
<div id="loadMes" style="display:none">我正在努力加载中哦.....</div>
<div id="loadData"></div>
</body>
</html>
<script type="text/javascript">
$(function () {
$("#btnClick").click(function () {
var id=$("#UserId").val();
$.get("loadHandler.ashx", { id: id }, function (data, status, jsXHR) {
$("#loadData").text(data);
});
});
//ajaxStart()与ajaxStop()这两个全局事件必须绑定在document元素上。

//在Ajax异步发送请求时，遇到网速比较慢的时候，就会出现请求比时间较长的问题，用户等的不耐烦就会关闭页面。而如果在请求期间能给用一些提示。比如：正在努力加载中... 那么用户可能会等久一点，体验就业好一些了。

//jquery提供了两个全局事件，ajaxStart()和ajaxStop() 这两个全局事件，只要用户触发了 Ajax,请求开始（仅仅是准备开始请求，还未完成请求）那么就会触发ajaxStart()这个事件。当用户请求结束的时候就会触发ajaxStop()事件

$(document).ajaxStart(function () { $("#loadMes").show(); }).ajaxStop (function () { $("#loadMes").hide(); alert("加载完毕") });
//当然我们也可以分开来写
$(document).ajaxStart(function () { $("#loadMes").show() });
$(document).ajaxStop(function () { $("#loadMes").hide(); alert("请求完毕") })
})
</script>

案例2：
var timoutid;//全局变量
$(function(){
$("#tabsecond li").each(function(index){
$(this).click(function(){
//将选中的li放掉
$("#tabsecond li.tabin").removeClass("tabin");
//将鼠标点中的那个li选中
$(this).addClass("tabin");
//给第一个li下的div内加载TabLoad.html静态页面
if (index == 0) {
$("#realcontent").load("TabLoad.html");
}else if(index == 1){
//给第二个li下的div内加载TabLoad.html动态页面
$("#realcontent").load("TabLoad.jsp");
}else if(index == 2){
//给第三个li下的div内加载TabLoad.html动态页面
$("#realcontent").load("TabData.jsp")
}
});
});
/*给图片添加两个全局事件ajaxStart和ajaxEnd*/
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart",function(){
//将id为contentsecond的div中的内容清空
$("#realcontent").html("");
//让图片进行显示
$(this).show();}).bind("ajaxStop",function(){
//ajax请求完成后图片间隔1000毫秒后滑动消失了
$(this).slideUp("1000");
});
});

8.动画效果：http://jquery.cuishifeng.cn/children.html
1）slideDown([speed],[easing],[fn])，slideDown([speed],[fn])，slideDown([speed])：这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。slideUp与slideDown滑动方向相反。
参数说明：
speed：速度("slow","normal", or "fast")。
easing:切换效果，默认是"swing"，可用参数"linear"。
fn:回调函数
2）slideToggle([speed],[easing],[fn])，slideToggle([speed],[fn])，slideToggle([speed])：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
案例：用600毫秒缓慢的将段落滑上或滑下：$("p").slideToggle("slow");
用200毫秒快速将段落滑上或滑下，之后弹出一个对话框：
$("p").slideToggle("fast",function(){

alert("Animation Done.");

});
9.筛选:
children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
next([expr]):取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
案例：
$(function(){
// $(document).ready(function(){
//找到class为main的li中的a节点，并给其绑定点击事件
$(".main > a").click(function(){
//获取a元素的下一个节点ul,并让其向下滑动
var ulNode = $(this).next();
ulNode.slideToggle(); //向下滑动
changeIco($(this)); //将a节点的图片换掉(向右的图片换成向下的图片)
});

//找到class为hmain的li节点，并给其绑定鼠标移入移出事件
$(".hmain").hover(function(){
//鼠标移入的时候给ul节点添加向下滑动动画
$(this).children("ul").slideDown();
changeIco($(this).children("a"));
},function(){
//鼠标移出的时候给ul节点添加向上滑动动画
$(this).children("ul").slideUp();
changeIco($(this).children("a"));
});
});

/**
* 修改主菜单的指示图标(不同方向的小三角图片)
* mainNode.css("background-image"):获取图片的url
* js的方法indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
*/
function changeIco(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image","url('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
10.jquery get/post/ajax请求：

1.$.ajax()返回其创建的 XMLHttpRequest 对象。$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。

如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。
�
实例：

保存数据到服务器，成功时显示信息。

$.ajax({
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if (data != "") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);

}
}
});

2.通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。实例：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

3. 通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。实例：
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
}
})

4.通过 HTTP GET 请求载入 JSON 数据。实例：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});

11.Jquery Easy UI demo地址：http://www.jeasyui.net/demo/551.html
Jquery Mini UI demo地址：http://www.miniui.com/demo/#src=datagrid/celledit.html