1.窗口加载事件。
$(document).ready(function () {
alert("加载完毕!");
});
$(function () { alert("ready!!"); });
2.遍历数组,做函数处理,得到新的数组
var arr = [1, 2, 3];
var arr2 = $.map(arr, function (item) { return item * 2; });
alert(arr2);
3.便利字典(数组)无返回,显示key+value
var dir = { "tom": 20, "jerry": 50, "jim": 30 };
$.each(dir, function (key, value) { alert(key+" is "+value); });
4.便利数组,显示value
var dir = { "tom": 20, "jerry": 50, "jim": 30 };
$.each(dir, function () { alert(this); });
5.便利数组,显示key
var dir = { "tom": 20, "jerry": 50, "jim": 30 };
$.each(dir, function (item) { alert(item); });
6.使用id选择器的时候,如何判断元素是否存在
$(function () {
var elements = $("#div1");
//判断元素是否存在
if (elements.length <= 0) {
alert("error");
return;
}
elements.mouseover(
function () {
alert("welcome");
}
);
});
7.节点遍历方法
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$("div").click(function () { alert($(this).nextAll("div").text()); });
$("div").click(function () {
$.each($(this).nextAll("div"),function(){
$(this).css("background","green")
});
});
//上面的效果简化的代码方式
$("div").click(function () {
$(this).nextAll("div").css("background", "red");
});
//点击高亮显示
$("div").click(function () {
$(this).css("background", "#ccc");
$(this).siblings("div").css("background", "#FFF");
});
$("div").click(function () {
$(this).css("background", "#ccc").siblings("div").css("background", "#FFF");
});
});
</script>
</head>
<body>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</body>
8.计时同意
var leftSeconds = 10;
var intervalId;
$(function () {
$("#btn").attr("disabled", true);
intervalId = setInterval("Count()",1000);
});
function Count() {
if (leftSeconds <= 0) {
$("#btn").val("同意");
$("#btn").attr("disabled", false);
clearInterval(intervalId);
return;
}
leftSeconds--;
$("#btn").val("请仔细阅读"+leftSeconds+"秒");
}
<textarea rows="5">
aaaaaa
</textarea>
<input type="button" id="btn" value="AGREE" />
9.无刷新发帖
<script type="text/javascript">
$(function () {
$("#btnPost").click(function () {
var title = $("#txtTitle").val();
var body = $("#txtBody").val();
var tr = $("<tr><td>" + title + "</td><td>" + body + "</td></tr><br />");
$("#tb").append(tr);
$("#txtTitle").val("");
$("#txtBody").val("");
});
});
</script>
<body>
<p>这是我的第一个帖子!!</p>
<table id="tb">
<tr><td>匿名</td><td>沙发</td></tr>
</table><br />
<input type="text" id="txtTitle" /><br />
<textarea id="txtBody"></textarea><br />
<input type="button" value="发表评论" id="btnPost" /><br />
</body>
10.点击移动项
$(function () {
$("#ul1 li").css("cursor", "pointer").mouseover(function () {
$(this).css("background", "red").siblings().css("background", "white");
}).click(function () {
$(this).css("background","white").appendTo("#ul2");
});
});
<ul id="ul1" style="float:left;width:30%;">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<br />
<br />
<ul id="ul2">
</ul>
11.打造自己的鼠标指针
$(function () {
$("#ul1").css("cursor", "url('cursor/AppStarting.ani')");
});
<ul id="ul1" style="float:left;width:30%;">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
12.搜索框获取焦点失去焦点变换效果和文字
.focus{color:#000;}
$(function () {
$("#search").val("请输入要搜索的内容").addClass("blur").focus(function () {
if ($("#search").val() == "请输入要搜索的内容") {
$("#search").val("").removeClass("blur");
}
}).blur(function () {
if ($("#search").val() == "") {
$("#search").val("请输入要搜索的内容").addClass("blur");
}
});
});
<input type="text" id="search" />
13.单选框的操作
$(function () {
$("#btnShow").click(function () {
alert($("input[name=gender]:checked").val());
});
$("#btnSelect").click(function () {
//$("input[name=gender]").val(["女"]);
$(":radio[name=gender]").val(["女"]);
});
});
<input type="radio" name="gender" value="男" />男<br />
<input type="radio" name="gender" value="女" />女<br />
<input type="radio" name="gender" value="保密" />保密<br />
<input type="button" id="btnShow" value="显示" />
<input type="button" id="btnSelect" value="选择" />
14.复选框的操作
$(function () {
$("#select").click(function () {
$(":checkbox").val(["篮球", "乒乓球"]);
$(":checkbox[value=羽毛球]").attr("checked",true);
});
});
<input type="checkbox" value="篮球" />篮球<br />
<input type="checkbox" value="足球" />足球<br />
<input type="checkbox" value="乒乓球" />乒乓球<br />
<input type="checkbox" value="羽毛球" />羽毛球<br />
<input type="button" id="select" value="选择" /><br />
15.全选全部选反选
$(function () {
$("#btn1").click(function () {
$("#li :checkbox").attr("checked", true); //#li :checkbox之间空格不能省
});
});
$(function () {
$("#btn2").click(function () {
$("#li :checkbox").attr("checked", false);
});
});
$(function () {
$("#btn3").click(function () {
$("#li :checkbox").each(function () {
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
<div id="li">
<input type="checkbox" value="篮球" />篮球<br />
<input type="checkbox" value="足球" />足球<br />
<input type="checkbox" value="乒乓球" />乒乓球<br />
<input type="checkbox" value="羽毛球" />羽毛球<br />
<input type="button" id="select" value="选择" /><br />
<input type="button" id="btn1" value="全选" />
<input type="button" id="btn2" value="不选" />
<input type="button" id="btn3" value="反选" />
</div>
16.阻止事件冒泡
$(function () {
$("#td").click(function () { alert("td"); });
$("#tr").click(function (e) { alert("tr"); e.stopPropagation(); });
$("#tt").click(function (e) { alert("t"); });
});
<table id="tt"><tr id="tr"><td id="td">aaaaaaaaaaaa</td></tr></table>
17.阻止默认行为,可以用来阻止不合法表单的提交
$(function () {
$("a").click(function (e) { alert("aaaa"); e.preventDefault(); });
});
<a href="aaa.aspx">点点</a>
18.function(e)的属性和方法
e.pageX e.pageY 获取鼠标的x和y坐标
e.target 表示事件源 而this表示当前的对象 target始终表示源
e.altKey e.shiftKey e.ctrlKey 获得alt,shift,和ctrl是否被按下
e.which 获取鼠标事件 1.2.3 分别为左中右
e.keyCode 获得键盘码
e.charCode 获取ASC码
19.绑定事件
bind("函数名",function(){。。。})
unbind("函数名",function(){。。。})
one("函数名",function(){。。。}) 一次性事件
20.跟着鼠标走的图片
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {//document表示整个文档的范围,body只是元素的显示范围
$("#fly").css("left", e.pageX).css("top", e.pageY);
});
});
</script>
<div id="fly" style="position:absolute"><img src="img/1.jpg" /></div>
21.鼠标放上显示提示效果
$(function () {
$("#btn").hover(function (e) {
//alert("aaa");
$("#div").css("left", e.pageX).css("top", e.pageY);
$("#div").text("上来了");
}, function () {
$("#div").text("");
});
});
<input type="text" id="btn" />
<div id="div" style="position:absolute;"></div>
22.鼠标放上图片放大,显示详细信息,鼠标离开自动消失
var data = {
"img/1.jpg":["img/1.jpg","一号","185cm"],
"img/2.jpg":["img/2.jpg","二号","185cm"],
"img/3.jpg":["img/3.jpg","三号","185cm"],
"img/4.jpg":["img/4.jpg","四号","185cm"],
"img/5.jpg":["img/5.jpg","五号","185cm"],
"img/6.jpg":["img/6.jpg","六号","185cm"],
"img/7.jpg":["img/7.jpg","七号","185cm"]
};
$(function () {
$.each(data, function (key, val) {
var smalling = $("<img src='" + key + "' />");
smalling.attr("bigmappath", val[0]);
smalling.attr("personname", val[1]);
smalling.attr("personheight", val[2]);
smalling.css("width", "100px");
smalling.css("height", "200px");
smalling.mouseover(function (e) {
$("#detailImg").attr("src", $(this).attr("bigmappath"));
$("#detailHeight").text($(this).attr("personheight"));
$("#detailName").text($(this).attr("personname"));
$("#details").css("top", e.pageY).css("left", e.pageX).css("display", "");
});
smalling.mouseleave(function () {
$("#details").css("display", "none");
});
$("body").append(smalling);
});
$("#details").mouseover(function () {
$(this).css("display", "");
}).mouseleave(function () {
$(this).css("display", "none");
});
});
<div style="display:none;position:absolute;border:1px solid #aaa;" id="details">
<img id="detailImg" src="" />
<p id="detailHeight"></p>
<p id="detailName"></p>
</div>
23.模拟qq点击菜单的效果
$(function () {
$("#qq li:even").addClass("header");
$("#qq li:odd").addClass("body");
$("#qq li:even").click(function () {
$(this).next("li.body").show("fast").siblings("li.body").hide("400");
});
$("#qq li:first").click();
});
<style type="text/css">
ul{ list-style-type:none;width:100px;}
.header{ background-color:#ccc; cursor:pointer;}
.body{ border:1px solid #922;}
</style>
<ul id="qq">
<li>我的好友</li>
<li>张三<br />李四<br />王五</li>
<li>我的同学</li>
<li>拉登<br />小泉</li>
<li>陌生人</li>
<li>张宇<br />周杰伦<br />羽泉<br />陈奕迅</li>
</ul>
24.动态创建人和节点
var link = $("<a href='http://www.baidu.com'>aaaa</a>");
$("body").append(link);
25.cookie实现下次登录自动输入用户名
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
if ($.cookie("UserName")) {
$("#username").val($.cookie("UserName"));
}
$("#btnLogin").click(function () {
$.cookie("UserName",$("#username").val());
});
</script>
</head>
<body>
<input type="text" id="username" />
<input type="button" value="登陆" id="btnLogin" />
</body>
26.cookie其他参数
$.cookie('名字','值',{参数:值});
expires 表示要保留cookie几天
path 控制虚拟目录路径哪里可以共享cookie
domain 控制可共享cookie的域名
secure 安全性选项
27.cookie记录上次访问时间
$(function () {
$("#time").text($.cookie("date"));
$.cookie("date", new Date().toDateString());
});
<div id="time">
</div>
28.cookie实现记住网站背景风格
$(function () {
$("body").css("background-color", $.cookie("bgcolor"));
$("#tb td").click(function () {
$("body").css("background-color", $(this).css("background-color"));
$.cookie("bgcolor", $(this).css("background-color"));
});
});
<table id="tb">
<tr>
<td style="background-color:Yellow">黄色</td>
<td style="background-color:green">绿色</td>
<td style="background-color:blue">蓝色</td>
</tr>
</table>
29.JQuery实现个性对话框和tab控件
<head>
<title></title>
<link href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#mydialog").dialog();
$("#tab").tabs();
});
</script>
</head>
<body>
<div id="mydialog">hello world</div>
<div id="tab">
<ul>
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
</ul>
<div id="tab1">用户名:<input type="text" /></div>
<div id="tab2">密码:<input type="text" /></div>
</div>
</body>