JQuery

一，基本知识

（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.元素本身的操作