jQuery简介以及jQuery选择器

一 简介

1 定义:jQuery库是JavaScript的封装库

2 优点:
1) : 代码开源
2) : 选择器强大
3) : 完善的Ajax
4) : 浏览器兼容性高
5) : 文档完善(帮助文档多并且完善)
6) : 链式操作
7) : 轻量级(库的大小较小)
8) : 行为层与结构层分离
9) : 事件兼容性强大
10) : dom操作封装出色
11) : 隐式迭代(不需显示的写循环)
12) : 不污染顶级变量(采用闭包)
13) : 插件丰富

3 使用
<script type="text/javascript" src="jQuery.1.4.4.js"></script>
起首方式:$(document).ready(function(){})
$(function(){})
4 与javaScript函数区别:
1): 执行时机:jQuery 当dom文档准备就绪即开始执行
javaScript 当所有元素准备就绪之后开始执行
2) 编写个数: jQuery 可是编写无数个
javaScript 有且只有一个
3) 简写方式: jQuery 有($)
javaScript 没有简写方式

5 jQuery对象与javaScript对象的相互转换
1)jQuery===>>javaScript
var dom=document.getElementById("XX"); $(dom);
2)javaScript===>>jQuery
$("#XX")[0] / $("#XX").get[0]

6 jQuery库与其他库冲突时
解决方案:使用jQuery.noCoflict();交出$的控制权 之后的方法 函数使用jQuery直接调用和书写 不能简写

二  jQuery选择器

1 Css选择器

1)将网页结构与样式分离,可以对网页中某个元素添加样式而不改变网页结构

2)常用的CSS选择器以及使用方法

a)标签:E{CSS规则}
         b)ID:#ID{CSS规则}
         c)类:E.类名{CSS规则}
         d)群组:E1,E2,E3{CSS规则}
         e)后代:E F{CSS规则}
         f)通配(全选):*{CSS规则}

2 jQuery选择器

1)继承CSS风格,可以便捷快速的找出特定dom元素添加相应行为
     2)优点: 写法简单 选择器强大 处理机制完善
     3)分类:
           1)基本选择器

//ID选择器
$("#one").css("backgroundColor","red");
//class选择器
$(".one").css("backgroundColor","red");
//element元素选择器
$("span").css("backgroundColor","red");
//所有元素 *
$("*").css("backgroundColor","red");
//多选择 以,分隔
$("div,span").css("backgroundColor","red");

2)层次选择器

//1 选择a元素里所有的b元素的后代元素 包含b元素下的所有元素 $("a b")
$("body div").css("backgroundColor","red");
//2 选择a元素里所有的b元素 包含与b元素同级的元素 $("a>b")
$("body>div").css("backgroundColor","red");
//3 选择紧接在a元素后的b元素 $("a+b")==$("a").next("b")
$("div+span").css("backgroundColor","red");
$("div").next("span").css("backgroundColor","red");
//4 选择a元素之后的所有b元素 $("a~b")==$("a").nextAll("b")
 $(".one~span").css("backgroundColor","red");
 $(".one").nextAll("span").css("backgroundColor","red");

3)过滤选择器

a)基本过滤选择器

//1 选取第一个元素(单个元素) $("a:first/a:last")
$("div:first").css("backgroundColor","blue");
$("div:last").css("backgroundColor","blue");
//2 去除所有与给定元素匹配的元素 $("a:not(b)")
$("div:not(.one)").css("backgroundColor","blue");
//3 选取索引为偶数或基数的所有元素$("a:even/a:odd") /*
 $("div:even").css("backgroundColor","blue");
$("div:odd").css("backgroundColor","red");
//4 选取索引等于/大于/小于当前指定索引的元素 $("a:eq(index)/a:gt(index)/a:lt(index)")
$("div:eq(2)").css("backgroundColor","blue");
/$("div:gt(3)").css("backgroundColor","red");
$("div:lt(1)").css("backgroundColor","black");
//5 选取所有的标题元素 $("a:header")
//6 选取当前执行动画的元素 $("a:animated")
$("span:animated").css("backgroundColor","red");

b)内容过滤选择器

//1 选取含有文本内容为text的元素 $("a:contains(text)")
$("div:contains('mini')").css("backgroundColor","red");
//2 选取不包含子元素或者文本的空元素 $("a:empty")
$("div:empty").css("backgroundColor","red");
//3 选取含有选择器所匹配的元素的元素 $("a:has(b)")
$("div:has(.mini)").css("backgroundColor","red");
//4 选取含有子元素或文本元素 $("a:parent")
$("div:parent").css("backgroundColor","red");

c)可见性过滤选择器

//选取所有可见/不可见的元素 $("a:visible/a:hidden")
$("div:visible").css("backgroundColor","red");
$("input:hidden").css("backgroundColor","blue");

d)属性过滤选择器

//1 选取拥有此属性的元素$("a[attribute]")
$("div[title]").css("backgroundColor","red");
//2 选取属性值等于/不等于value的元素 $("a[attribute=value/!=value]")
$("div[title='test']/!='test'").css("backgroundColor","red");
//3 选取属性值以value开始/结束/含有的元素 $("a[attribute^=value/$=value/*=value]")
$("div[title^='test']").css("backgroundColor","red");开始
$("div[title$='test']").css("backgroundColor","blue");结束
$("div[title*='test']").css("backgroundColor","red");含有
//4 选取拥有此属性并且某属性的值以value开始/结束/含有的元素
 $("a[属性1][属性2^=value/$=value/*=value][属性n]")
$("div[id][title*='test']").css("backgroundColor","red");

e)子元素过滤选择器

//1 选取每个父元素下的第index个子元素或者奇偶元素(index从1开始) $("a:nth-child(index/odd/even/equation)")
$(".one:nth-child(2)").css("backgroundColor","red");
$(".one:nth-child(even)").css("backgroundColor","red");//偶数
$(".one:nth-child(odd)").css("backgroundColor","red");//奇数
$(".one:nth-child(equation)").css("backgroundColor","red");
//2 选取每个父元素的第一个/最后一个子元素 $("a:first/last-child")
$("div.one:first-child").css("backgroundColor","red");
$("div.one:last-child").css("backgroundColor","red");
//3 若父元素中仅仅含有一个元素则该元素会匹配 否则不匹配 $("a:only-child")
$("div.one:only-child").css("backgroundColor","red");

f)表单对象过滤选择器

//1 选取所有可用/不可用元素 $("a:enable/disable")
//2 选取所有被选中的元素 $("a:checked")
//3 选取所有被选中的选项的元素 $("a:selected")

4)表单选择器