标签：
一，基本知识
（1）概述：JQuery是一个轻量级的JS库，它使用户能更方便的处理HTML、events，实现动画效果，并且方便的为网站提供AJAX交互
（2）特点
1.JQuery是被封装的JS表达式
2.它是链式表达式，可以连续点出一连串的属性
3.自动协调浏览器的兼容性
4.它是非侵入性的，写在HTML中的head标签内，操作HTML里面的内容
（3）基本语法结构
1，新建一个scripts的文件夹，将文件jquery-1.7.1.min.js复制到该文件夹中
2.将该文件拖进HTML中的head标签内
3.在其后写如下代码
<script language="javascript">
//ready()是个事件，当HTML在浏览器中加载完成后触发
$(document).ready(function () {
});
</script>
二，选择器
（一）基本选择器
1.最基本的选择器
class选择器：$(".class名")
ID选择器：$("#ID名")
标签选择器：$("标签名")
2.扩展选择器
并列关系（用逗号隔开）——$("选择器1,选择器2.......")
后代关系（用空格隔开）——$("选择器1 选择器2")
子级关系（用>隔开）——$("选择器1>选择器2")
（二）过滤选择器
1.基本过滤（使用：进行过滤）——按照元素在HTML中的排列次序进行排序
:first——过滤出第一个
:last——过滤出最后一个
:eq(n)——过滤出第n个（n是元素的序列号，从0开始）
:odd :even——过滤出奇数个，偶数个
:not(选择器)——过滤出不是该选择器的元素
:gt(n)——过滤出大于第n个的元素
:lt(n)——过滤出小于第n个的元素
$(".dd:first").css("background-color","green"); $(".dd:last").css("background-color", "green"); $(".dd:not(#d1)").css("background-color", "green");
2.属性过滤（使用[]过滤）
a，是否包含该属性——选择器[属性名]
b，属性名是否等于某个值——选择器[属性名=值]
c，属性名不等于某个值——选择器[属性名!=值]
d，属性以某个值开头——选择器[属性名^=值]
e，属性以某个值结尾——选择器[属性名$=值]
f，属性包含某个值——选择器[属性名*=值]
$(".dd[title]").css("background-color", "green"); $(".dd[title=hello]").css("background-color", "green"); $(".dd[title!=hello]").css("background-color", "green"); $(".dd[title^=h]").css("background-color", "green"); $(".dd[title$=o]").css("background-color", "green"); $(".dd[title*=o]").css("background-color", "green");
3.内容过滤
a.通过子元素情况进行过滤——:has(选择器)
$(".dd:has(span[class=ss])").css("background-color", "green");
b.通过文本情况进行过滤——:contains(文字)
$(".dd:contains(这)").css("background-color", "green");
三，DOM操作
（一）操作属性
1.获得属性——.attr("属性名")
var s = $("#<%=Button1.ClientID%>").attr("type");
2.添加或修改属性——.attr("属性名","属性值")
$("#Button1").attr("disabled","disabled");
3.移除属性——removeAttr("属性名")
$("#Button1").removeAttr("disabled");
（二）操作样式
1.直接操作内联样式属性
a，获得样式——.css("样式属性名")
$("#Button1").css("font-style");
b，操作样式——.css("样式属性名"，"样式属性值")
$("#Button1").css("font-style","italic");
2.操作class选择器
a，添加class——addClass("class名")
$("#Button1").addClass("bb");
b，移除class——removeClass("class名")
c，切换class——toggleClass("class名")
三，操作内容
1.操作表单元素
a，赋值——val("值")
$("#TextBox1").val("这是用代码赋进来的值");
b，取值——val（）
var s = $("#TextBox1").val();
2.操作非表单元素
a，赋值——html("值")：如果值里面含有标签，显示的时候会直接显示效果 text("值")：如果值里面含有标签，显示的时候会原样输出
b，取值——html():取的是html里面所有的内容，包括标签 text()：取的是纯文本
var s = $("#dd").html(); var s = $("#dd").text();
四，操作元素
1.相关元素的获取
a，获得兄弟元素
（1）获得前面的兄弟元素——prev() prevAll()
（2）获得后面的兄弟元素——next() nextAll()
（3）获得所有兄弟元素——siblings(选择器)
b，获得父级元素——parent() parents()
$("#TextBox1").parents().css("margin","10px").css("border","1px solid red");
c，获得子级元素
（1）直接获取子级中所有子元素——children()
$("#tb tr:eq(1)").children().css("background-color","red");//获取第二行所有td并设置属性
(2)后代中找指定的元素——find()
$("#tb").find("td").css("background-color", "red");
2.元素本身的操作
标签：
原文地址：http://www.cnblogs.com/William-1234/p/4573651.html
