jQuery知识点 （上）
1、jQuery简介
网页前端技术可按功能划分为：html 提供内容，css提供美化，js提供控制。js基于dom编程就像C# 基于.NetFramwork框架及其类库编程。
而jQuery的作用则类似于SqlHelper这类更高级的封装。jQuery是一个优秀的Javascript框架，是轻量级的js库。
jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互，同时还提供了许多成熟的插件。
学习网址：http://www.php100.com/manual/jquery/
http://www.w3school.com.cn/jquery/
2、jQuery和DOM对象
2.1jQuery对象的实现原理
jQuery中封装了window.$ = window.jQuery = $;
在引入了jquery之后，<script>节点内即可使用window.$或window.jQuery或$或jQuery，表示jQuery对象。
模拟jQuery对象的内部实现：
(function (window) {
//定义匿名函数$
var $ = function (id) {
return document.getElementById(id);
}
window.$ = $;//把$赋给window对象下的$
})(window); //传一个参数window 调用函数
window.onload = function () {
window.$("d1").innerHTML = "abc";
//实现将window.document.getElementById("d1").innerHTML = "abc";简化为：$("d1").innerHTML = "abc";
}
2.2 jQuery对象和DOM对象
jQuery对象是DOM对象的包装集。
jQuery对像和DOM对象分别使用各自的属性和方法。
如果需要使用另一种对像的属性和方法，可以转化成相应类型的对象。
DOM对象转化成jQuery对象：$(DOM对象)
jQuery对象转化成DOM对象：jQuery对象.get(index)或者jQuery对象[index]
2.2.1 DOM对象转化成jQuery对象
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
//DOM对象及其属性和方法
var div = document.getElementById("d1");
div.innerText = "我是dom元素";
//把DOM对象转化成jQuery对象
var $div = $(div);
$div.text("abc");
}
</script>
2.2.2 jQuery对象转化成DOM对象
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//jQuery对象及jQuery提供的方法
var $div = $("#d1");
$div.text("123123");
//jQuery对象转化成dom对象
var div = $div.get(0); // 或 var div = $div[0];
div.innerText = "bcd";
})
</script>
3、$(function(){})与window.onload
$(funtion(){})是$(document).ready(function(){})的简写。
$是jQuery的简写，$或jQuery是jQuery里面的顶级对象。
3.1 执行时机
$(document).ready(function(){})在dom元素创建完毕就会触发，比window.onload要早执行。
window.onload要页面完全加载完毕才触发。比如图片，标签元素创建完毕并且完成图片的下载和加载到页面。
3.2 执行次数
$(funtion(){})可多次注册，每处注册的都会执行。window.onload只注册和执行一次。
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type ="text/javascript">
window.onload = function () {
alert("window.onload，执行!");
}
$(document).ready(function () {
alert("ready first!");
})
$(document).ready(function () {
alert("ready again!");
})
</script>
4、$.map(arr，fn)和$.each(arr，fn)
4.1$.map返回新的数组
$.map 对数组每个元素进行处理后，得到并返回新的数组。$.map有两个参数，arr（数组）和fn（函数）。其中fn在调用$.map方法时根据需要进行定义。
$.map方法内部对数组遍历，对遍历的每个元素，调用一次fn函数，生成新的元素。
整个方法将所有得到的新元素，组成一个数组返回。
var arr = [1, 3, 5, 7, 9];
arr = $.map(arr, function (item) {return item * 2;});
//模拟$.map方法的定义
function myMap(arr, fn) {
var ret = [];
varvalue;
var length=arr.length;
for (var i = 0; i < length; i++) {
value = fn(arr[i]);
if (value != null) {
ret[ret.length] = value;
}
}
return ret;
}
//模拟$.map方法的调用
var arr = [1, 3, 5, 7, 9];
arr = myMap(arr, function (item) {return item * 2;});
4.2 $.each(arr，fn)遍历数组和字典
$.each遍历数组或字典，遍历到每个元素，以该元素为参数，执行一次函数的功能。（不会返回）。
4.2.1 $.each(arr，fn)遍历数组
$.each有两个参数，arr（数组）和fn（函数）。其中fn在调用$.each方法时根据需要进行定义。
var arr = [1, 2, 3];
$.each(arr, function () {
alert(this);
});
4.2.2 $.each(dic，fn)遍历字典
$.each有两个参数，dic（字典）和fn（函数）。其中fn在调用$.each方法时根据需要进行定义。fn可接收的参数可以是key、value或空，置空默认为包含键值对的整个对象。
var dic = { "name": "jk", "age": 18, "sex": "man" };
//遍历字典键和值
$.each(dic, function (key,value) {
alert (key+":"+value);
});
//遍历字典键
$.each(dic, function (key) {
alert (key+":"+dic[key]);
});
$.each(dic, function () {
alert(this);
});
5、jQuery选择器
jQuery获取和包装DOM对象，除了使用$(DOM对象)，还可以使用选择器。
5.1 基本和复合选择器
$(function () {
$("#d1").css("background-color", "red"); //id选择器
$(".bg").css("background-color", "green"); //类选择器
$("p").css("background-color", "pink");//标签选择器
$("#d1,.bg,p").css("background-color", "pink"); //复合（即并列）选择器,同时选择多个或多种元素，用逗号分隔
})
5.2层次选择器
$(function(){
$("#d1 p").css("background-color", "red");//包含选择器：子后代，子子后代的所有p标签元素，类似jQuery.find(selector)
$("#d1>p").css("background-color", "red");//子选择器：直接子后代，不包含孙子代以后的，类似jQuery.children(selector)
$("#d1 + div").css("background-color", "green");//之后紧邻的第一个同级div
$("#d1 ~ div").css("background-color", "pink");//之后所有的同级div
$("a ~ div").css("background-color", "pink");//之后所有的同级div
})
5.3 简单选择器
$(function () {
$("input:eq(3)").css("background-color", "red");//第3个
$("input:lt(3)").css("background-color", "blue");//第3个之前的
$("input:gt(3)").css("background-color", "green");//第3个之后的
$("input:eq(1)").css("background-color", "red");
$("input:even").css("background-color", "red"); //选择每个相隔的（偶数）
$("input:first").css("background-color", "blue");//第1个
$("input:last").css("background-color", "green");//最后1个
$("input:not(:first):not(.cc):not(#pp):not(:last)").css("background-color", "blue");
});
:first 选取第一个元素。$("div:first")选取第一个<div>
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>
:even、:odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input>
:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>
$(":header")选取所有的h1……h6元素（*）
$("div:animated")选取正在执行动画的<div>元素。（*）
5.4属性过滤选择器表单选择器表单对象选择器
$("div[id]")选取有id属性
$("div[title=test]")选取title属性为test的元素
$("div[title!=test]")选取title属性不为test的元素
$(":input")匹配所有 input, textarea, select 和 button 元素
$(":text")匹配所有匹配所有的单行文本框
$(":checkbox")匹配所有复选框
$(":checkbox:checked")
$("select option:selected")
$("input:disabled")
$("input:enabled")
5.5简单选择器的综合应用：工资表
$(function () {
//表头
$("#salary tr:first").css("font-size", "28px");
//最后一行
$("#salary tr:last").css("color", "red");
//前三行
$("#salary tr:not(:first):lt(3)").css("font-size", "22px");
//最后两行
var index = $("#salary tr:not(:first):not(:last)").length - 3; //倒数第三行的索引
$("#salary tr:not(:first):not(:last):gt(" + index + ")").css("color", "blue");
var str = "#salary tr:not(:first):not(:last)";
var bg;
$(str + ":even").css("background-color", "yellow");
$(str).mouseover(function () {
bg = $(this).css("background-color");
$(this).css("background-color", "red");
});
$(str).mouseout(function () {
$(this).css("background-color", bg);
});
//工资求和
//先获取要求和的tr集合
//循环遍历每行，获取最后一个td
//将得到的td内容转换为整数，加到sum中，循环结束后将sum付给最后一个td
var rows = $(str);
var sum = 0;
for (var i = 0; i < rows.length; i++) {
var td = $(str + ":eq("+i+")").children().get(2);
sum += parseInt(td.innerHTML, 10);
}
$("#salary td:last").text("" + sum + "");
});
6、jQuery事件处理
6.1 事件的注册
思路：$(who).when(what)
语法：$(DOM对象).事件(fn)或$(“选择器”).事件(fn)
示例：给想要的a标签注册事件文档是从html开始
$("#mv a").click(function(){
$("#pic").arr("src",$(this).attr("href"));
return false;
})
6.2 radio和checkbox控件的选中实现
$(function () {
$("input[value=radio]").click(function () {
$("input[type = radio][name = sex]").val(["nan"]);
});
$("input[value=ckbox]").click(function () {
$("input[type = checkbox]").val(["cf","ddd"]);
});
});
6.3 bind() one() 右键绑定及事件
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//1 bind 重复有效
$("#sbind").click(function () {
$("#btn").bind("click", function () {
alert("单一绑定！");
})
})
//多个事件绑定,用json对象
$("#bind").click(function () {
$("#btn").bind({ "click": function () {
$("input[name = search]").val("多个事件绑定click成功！");
},
"mouseover": function () {
$("input[name = search]").val("多个事件绑定mouseover成功！");
},
"mouseout": function () {
$("input[name = search]").val("");
}
})
})
//2 one 绑定一次
$("#one").click(function () {
$("#btn").one({ "click":function () {
$("input[name = search]").val("绑定click一次！")
},
"mouseover": function () {
$("input[name = search]").val("绑定mouseover一次！");
},
"mouseout": function () {
$("input[name = search]").val("");
}
})
})
//3 hover 相当于mouseover和mouseout两个事件，第三个及以后的事件无效
$("#hover").click(function () {
$("#btn").hover(
function () {
$("input[name = search]").val("绑定hover1！")
},
function () {
$("input[name = search]").val("绑定hover2！");
},
function () {
$("input[name = search]").val("绑定hover3");
},
function () {
$("input[name = search]").val("绑定hover4...");
}
)
})
//4 toggle click的循环，在所有点击事件中循环切换
$("#toggle").click(function () {
$("#btn").toggle(
function () {
$("input[name = search]").val("绑定toggle1！")
},
function () {
$("input[name = search]").val("绑定toggle2！");
},
function () {
$("input[name = search]").val("绑定toggle3");
},
function () {
$("input[name = search]").val("绑定toggle4...");
}
)
})
//5 unbind 解除绑定
$("#unbind").click(function () {
$("#btn").unbind();
})
//解除指定的事件
$("#unbindm").click(function () {
$("#btn").unbind("mouseover");
})
//6绑定右键菜单：
$(this).find("a").contextMenu('MyMenu2',
{
bindings: {
"addGroup": function (o) {
if (confirm("是否申请加入" + $(o).html())) {
$.ajax({
type: "post",
async: true,
dataType: "text",
url: "GroupAdmin/AddGroupRequest.aspx",
data: "FromGUID=" + myContactGuid + "&GroupGUID=" + $(o).attr("guid"),
success: function (data) {
alert("完成！");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败！");
}
});
}
}
})
</script>
6.4 mouseover、mouseout和hover()
mouseover触发事件冒泡(鼠标移到“#d1”后触发事件，移到“#d1”中的“#d11”范围内再次触发事件)
hover()实现tooltips效果：
<script type="text/javascript">
$(function () {
$("a").hover(function (e) {
//动态创建tooltips的div
var $div = $("<div id='d1'>详细内容</div>");
//设置div的位置
$div.css("left",e.pageX + "px").css("top",e.pageY + "px");
$("body").append($div);
}, function () {
//鼠标离开，删除对象
var $div = $("#d1");
if ($div.length > 0) {
$div.remove();
}
})
})
</script>
</head>
<body>
<a href="">淘宝</a><br />
<a href="">cnbeta</a><br />
<a href="">yahoo</a>
</body>
6.5 mouseenter和mouseleave
mouseenter没有触发事件冒泡
<script type="text/javascript">
$(function () {
var num1 = 0;
$("#d1").mouseover(function () {
num1++;
$("#d11").text(num1);
})
var num2 = 0;
$("#d2").mouseenter(function () {
num2++;
$("#d22").text(num2);
})
})
</script>
6.6 mousemove(): 跟着鼠标走的图片
$(document).mousemove(function (e) {
var x = e.pageX;
var y = e.pageY;
$("#pic").css("top",y+"px").css("left",x+"px");
});
6.7 click(): 点击表格改变样式
$("#tb tr").css("cursor", "pointer");
$("tr").each(function () {
$(this).click(function () {
$(this).addClass("tb").siblings().removeClass("tb");
});
});
6.8取消事件冒泡
function stopBubble(e) {
// 如提供了事件对象，则是一个非IE浏览器
if ( e && e.stopPropagation ) {
e.stopPropagation();
} else {
// 否则，使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
其他相关：
在事件响应函数中 return false 取消后续内容的执行，可以取消事件冒泡。
取消默认行为：e.preventDefault()可用来取消a标签的href 行为，submit的默认提交行为
<script type="text/javascript">
$(function () {
$("table,tr,td,p").click(function (e) {
//触发事件的对象
//alert($(e.target).html());
//监听事件的对象
alert($(this).html());
})
// $("p").click(function (e) {
// alert("pppp");
e.stopPropagation();
// //在事件响应函数中 return false 取消后续内容的执行，可以取消事件冒泡
// //return false;
// })
$("#lnk").click(function (e) {
alert("click");
//除了a标签的href 还有submit的默认行为：表单的提交
e.preventDefault();//该方法屏蔽了浏览器的不同
})
$(function () {
$("#btn").click(function (e) {
//获取触发事件的对象
//alert(this.value);
//
//alert(event.srcElement.value);
alert(e.target.value);
})
})
})
</script>
7、jQuery取值和赋值
获取或设置标签元素的内容用text() 和html()
获取或设置表单元素的值用val()
7.1 text()和html()：获取或设置标签内容
html() 能解析标签，保留标签的html功能
text() 能转义标签存储，作为文本处理，显示为赋值的文本
$(function () {
$("#d1").text("jQuery "); //innerText
$("#d1").html("<font color='red'>jQuery</font>"); //innerHTML
})
7.1.1text() 对标签转义存储
$("#text").text("<font color='red'>jQuery</font>真好用");
alert($("#text ").text()); //<font color='red'> jQuery </font>真好用
alert($("#text").html());//<font color='red'> jQuery </font>真好用
7.1.2 html()对标签原样存储
$("#html").html("<font color='red'> jQuery </font>真好用");
alert($("#html").text()); //jQuery真好用（过滤处理不了的标签）
alert($("#html").html());//<FONT color=red> jQuery </FONT>真好用
7.2 val()：获取或设置表单元素的值
$("#txt").val()//获得value
$("#btn").val("Send")//修改value
val()和parseFloat ()实现计算器
$(function () {
$("input[name=add]").click(function () {
var n1 = parseFloat($("input[name=num1]").val());
var n2 = parseFloat($("input[name=num2]").val());
var sum = n1 + n2;
$("input[name=sum]").val(sum);
});
})
8、jQuery处理属性值
8.1 attr()、removeAttr()的基本使用
使用attr()方法读取或者设置元素的属性
对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
8.1.1 获取元素属性，通过键
alert($("#alink").attr("href"));
8.1.2 设置元素属性，通过键值对
$("#alink").attr("href", "http://www.rupeng.com");
8.1.3 移除元素的属性，通过键
$(function () {
$("#btn").click(function () {
$("#alnk").removeAttr("href");//去除属性
})
})
8.2 jQuery操作属性应用
8.2.1 控制图片显示
点击超链接时，切换图片显示。（将图片src属性值修改为该超链接href的值）
$(function () {
$("#mv a").click(function(){
$("#pic").attr("src",$(this).attr("href"));
return false;
})
})
8.2.2实现checkbox全选反选
注：调用方法写方法名括号及参数singleCheck(); 当把方法作为参数传递时，只写方法名
<script type="text/javascript">
$(function () {
//全选和全不选
$("input[name=checkAll]").click(function () {
$("input[type=checkbox][name=hobby]").attr("checked", $(this).attr("checked"));
})
//反选及处理全选控件
$("input[name=fanx]").click(function () {
$("input[name=hobby]").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
})
singleCheck();
})
//修改子控件及处理全选控件
$("input[name=hobby]").click(singleCheck);
})
function singleCheck() {
var isAll = true;// 假定全选
$("input[name=hobby]").each(function () {
//如果有子控件未选中修改isAll
if (!$(this).attr("checked")) {
isAll = false;
return false;
}
});
$("#chkAll").attr("checked",isAll);//重置全选的checkbox
}
</script>