<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------
一、Jquery简介
1、Jquery是什么？
Jquery是功能非常强大的JavaScript类库，对JavaScript进行了封装，屏蔽了JavaScript在各个浏览器之间的差异。Jquery不仅功能强大，而且优点很多，使用Jquery简化了大量的JS代码。但是，Jquery不是代替JavaScript的，因为Jquery的实现仍然是JS代码。
Jquery的特点：开源的，免费的，简洁的，采用链式的编程方式。
2、Jquery的位置
Jquery的代码也是写在<script>标签中，如果要注册事件，就不用在网页相对应的控件上注册。
3、Jquery常用函数
1）ready() //页面dom加载后执行：可以多次注册，都会被执行。(document对象)
2）Load()//页面所有元素加载完之后执行(window对象)
3）Show()//显示元素。
4）Hide()//隐藏元素
5）Map()//Jquery内置函数，可以操作数组，返回一个新数组。
示例：
<script type="text/javascript">
var num = [100,200,300]; //定义一个数组
var result = $.map(num, function (i) { return i / 5; }); //把数组中的每一个值除以5并返回
alert(result); //弹出结果
</script>
4、Each()//Jquery内置函数，可以操作数组，无返回值。如果函数无参数可以用this
<script type="text/javascript">
var info = {"green":"绿色","red":"红色","blue":"蓝色"}; //定义一个dictionary类型的数组
$.each(info,function(k,v){alert(k+"是"+v);}); //调用Jquery提供的each()方法对数组进行处理
</script>
示例：
Map()与Each()虽然都是对数组进行操作，但是针对的数组类型不同，map()是对普通的数组进行操作，并返回一个新的数组。而Each()可以针对普通数组，也可以对dictionary类型的数组进行操作。
5、html()//Jquery对象的函数既可以获得标签内部的HTML代码，还可以赋值
6、Text()//Jquery对象的函数，可以获得标签的内部文本，也可以取值和赋值
7、.css()//设定元素的css样式，如果传入两个参数，为（“属性”，“值”）；形式的参数
//如果给css()传入一个参数，（“属性”）则为获取该属性的值。
8、Jquery选择器//获取控件的方法
1）ID选择器：
$(“#ID名”);//不能忘记写#
2）标签选择器：
$(‘标签’)来获取具有指定名的标签对象
3）样式选择器：
$(“.样式名”); //不能忘记写.
4）混合选择器：
$(“标签1，#Id，.样式名”);//混合了标签、ID与样式的选择器。
5）层次选择器：
$(”标签 子标签”) //包含”标签“的内所有”子标签”的元素
$(“标签 > 子标签”) //只包含”标签“内的直接”子标签“
9、Next()//获取标签的下一个相邻的同一级标签。()中可以添加条件，专门获取的指定标签
10、nextAll()//获取下一个标签下的所有同一级的元素。()中可以添加条件，专门获取的指定标签
11、Siblings()//获取标签的所有同一级的元素。
12、相对元素
13、Jquery筛选器
1）:first//指定标签内的第一个元素
示例：
$(“input:first”) //第一个input标签
2）:Last//指定标签内的最后一个元素
示例：
$(“input:last”)//最后一个input标签
3）:not(选择器)//选取所有不满足”选择器“的元素
示例：
<script type="text/javascript">
$(function () {
$("div:not(#div1)").click(function () { //选择Id不是div1的div标签
$("p", $(this)).css("background", "yellow");//被点击的层的标签的内部p标
}); //签的背景改成黄色。
});
</script>
4）:even//选择器是奇数的元素
$(“p:even”); //获取p标签的奇数元素
<script type="text/javascript">
$(function () {
$("p:last").click(function () { //选择奇数的p标签，
$(this).css("background", "yellow");当点击是背景变成黄色
});
});
</script>
5）:odd//选择器是偶数的元素
示例：
$(“p:odd”);//偶数的p标签
6）:eq(序号)//选择器等于”序号“的元素
示例：
$(“p:eq(3)) //获取序号为3的标签
7）:gt(序号)//选择器小于“序号”的元素
示例：
$(“p:gt(3)”)//获取序号大于3的标签
8）:lt(序号)//选择器大于“序号”的元素
$(“p:lt(3)”)//获取序号小于3的标签
9）:header//所有标题元素（h1...h6）
示例：
$(function () {
$("h2,h3,h4:header").click(function () { //给所有的h2,h3,h4的标题添加
alert("xxx"); //事件
})
});
10）:animated//正在执行动画的元素。
14、[id]属性过滤器
示例：
$(function () {
$("div[id]").click(function () { //有id属性的层
alert($(this).text());
});
});
$(function () {
$("div[id=div1]").click(function () { //有id属性并且id=”div1”的层
alert($(this).text());
});
});
15、[title]属性选择器
示例：
$("div[title=test2]"). //选择有title属性是test2的层
16、[value]属性选择器
$(function () {
$("input[value=text1]").click(function () { //value属性为text1的input标签。
alert($(this).val());
});
});
17、(“#表单ID:enabled”)//表单属性选择器获取表单内所有可用元素
示例：
$("#f1:enabled")
18、(“#表单ID:enabled”)//表单属性选择器获取表单内所有不可用元素
$("#f1:disabled")
19、(“select:selected”)//获取列表的选择项。
20、(“input:checked”)//获取复选框与单选框的选中值。
21、(“:input”)//所有表单元素包括（textarea select input button 等等）
它与（“input”）不同，这个表示的只是所有的input标签，
而(“:input”)表示的是表单要提交服务器的所有元素。
示例：
$(function () {
$("input[value=btn1]").click(function () {//当点击指定的按钮时；
$(":input").css("color", "red"); //所有表单文本的颜色变成红色
});
});
22、(“:text”)//获取所有的单行文本框
所有的表单标签，都可以写成这个格式，就获得了所有的这个格式的元素。
23、Attr()//设置或者读取元素的属性
示例：
$(function () {
$("#btn").click(function () { //当点击id为btn的按钮是
$(":input").attr("cols", "100"); //把所有input标签的textarea控件
}); //cols设置成100
});
24、动态添加元素
1)append()//在元素中末尾追加元素
2)Prepend()//在元素中开始处追加元素
3)Before()//在元素之前追加元素
4)After()//在元素之后追加元素
示例：
<script type="text/javascript">
$(function () {
var link;
var v = 0;
$("div").css("cursor", "pointer").click(function () {
var v2 = $(this).attr("id");
if (v2 == "") {
alert(v2 == "");
link = $("<a href='...'>链接</a>");
$(this).attr("id", v);
v++;
$(this).before(link); //在选中的层之前加入超链接
}
});
});
</script>
25、Remove()//移除元素（从父节点移除，但是还存在）返回移除的元素
26、Empty()//清空元素（删除元素，不存在）
27、replaceWith()//替换元素
28、Wrap()//将指定的元素用指定的标签包裹
示例：
$(function () {
$("#btn").click(function () { //当点击Id是btn的按钮时
$("h1:header").wrap("<font color='blue'><b></b></font>");
}); //所有的h1标签都显示蓝色字体，并且加粗。
});
29、样式操作
1）attr()//设置元素的属性，只有一个参数时是取值，有两个参数时，是设置值
示例：
$("#p2").attr("class", "sty") //把id为p2的控件的样式设定名为sty的样式
$("#p2").attr("class")//获取Id为p2的控件的样式名称。
2）addClass()//追加样式（只有一个参数，就是样式名称）
示例：
$(function () {
$("#btn1").click(function () { //当鼠标点击Id为btn1的控件时
$("#p1").addClass("sty2");//为id为p1的控件追加名称为sty2的样式
});
});
3）removeClass()//移除样式（只有一个参数，为参数名称）
示例：
$("#p1").removeClass("sty");//给id为p1的控件，移除样式名为sty的样式。
4）hasClass()//是否用了指定样式
示例:
$("#p2").hasClass("sty");//测试id为p2的控件是否采用名称是sty的样式返回一个bool类型的值。
5）toggleClass()//样式切换器
如果存在样式就移除，如果不存在样式就添加
示例：
$("#p2").toggleClass("sty");//如果id为p2的控件，使用了名为sty的样式，就移除这个样式，如果没有使用这个样式，就添加。
30、Body特效：filter:gray//用颜色过滤
.sty
{
filter:Gray;
}
31、Bind(“事件”,”函数”)绑定事件//为某个元素绑定事件unbind()//移除绑定事件
32、Hover(“事件1”,”事件2”)//为某个元素添加事件
事件1是当鼠标进入时发生的事件
事件2是当鼠标离开时发生的事件
33、E对象
1）阻止事件冒泡：在函数中传入e参数，调用e.stopPropagation()
示例：
$(function () {
$("#t3").click(function (e) { alert("t3"); e.stopPropagation(); });
});
2）阻止默认事件：在函数中传入e参数，调用e.stopDefault()
示例：
$(function () {
$("#link").click(function (e) { alert("test"); e.preventDefault(); });
});
3）e.PageX e.PageY//获取鼠标的横纵坐标。
34、Target与this
Target:是冒泡的起始元素
This:是引发事件的元素
35、One()//一次性的事件
示例：
$(function () {
$("#btn").one("click", function () { alert("test"); });//这个事件只执行一次
});
二、Cookie
Cookie是保存在浏览器端的数据。可以记录一些用户在浏览页面时的一些信息。
被记录下的信息，可能被浏览器定时清除，也可能被用户手动清除。因此，就算记录了用户浏览的一些信息，也可能会丢失。
Jquery中也对cookie做了一些封装。
$.cookie(“”,””);//以键值对的方式记录信息
$.cookie(“”);//以记录时的键名称作为取值的参数
示例：
$(function () {
$("#btn").click(function () {
//$(document).css("background-color", "red");
$(document.body).css("backgroundColor", "red");
$.cookie("背景色", $(document.body).css("backgroundColor"));//以键值对
}); //方式存储访问过的背景颜色
});
$(function () {
if ($.cookie("背景色")) {
$(document.body).css("backgroundColor", $.cookie("背景色"));//以键名的
} 方式读取cookie中的值
else {
$(document.body).css("backgroundColor","yellow");
}
});
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、
<a href=" http://edu.csdn.net "target="blank">.Net培训</a>、期待与您交流！ ----------------------