Jquery

?一、认识Jquery和学习使用选择器
1.DOM对象和JQuery对象
1).通过getElementsByTagName或getElementById获取的节点对象,就是DOM对象
var variable = DOM对象
2).通过JQuery选择器获取的对象就是JQuery对象
var $variable = JQuery对象
2.对象之间的互相转换
1).JQuery->DOM
(1).使用[index]方式
var $cr = $("#cr");
var cr = $cr[0];

(2).使用get(index)方法
var $cr = $("#cr");
var cr = $cr.get(0);

2).DOM->JQuery
(1).使用$(DOM对象)方式,$()相当于JQuery的对象工厂
var cr = document.getElementById("cr");
var $cr = $(cr);

二.JQuery的选择器
1.CSS选择器
1).标签选择器
2).ID选择器
3).类选择器
4).群组选择器
5).后代选择器
6).通配选择器
2.JQuery选择器
1).基本选择器(一般用于快速选择节点)
(1).id选择器
$("#cr").css("background","#FFAABB");

(2).class选择器
$(".cr").css("background","#000000");

(3).元素选择器
$("cr").css("background","#000000");

(4).通配选择器
$("*").css("background","#000000");

(5).组合选择器
$("cr, #cr").css("background","#000000");

2).层次选择器(针对DOM节点中的层次选择---一般指后代/子元素/同辈元素/相邻元素)
(1).后代选择器(后代包含子还包含孙子)
$("div span").css("background","#000000");

(2).子元素选择器(只选中儿子,不选择孙子)
$("body > div").css("background","#f0f");

(3).相邻选择器(选择相邻的所有span元素)
$("div + span").css("background","#f0f");

(4).同辈选择器(选择同辈的所有span元素)
$("div ~ span").css("background","#f0f");

3).过滤选择器(针对已经选中的节点"对象集合"进行过滤)
(1).基本过滤选择器
[1].选取所有div中第一个div
$("div:first")
[2].选取所有div中的最后一个div
$("div:last")
[3].选取所有div中class不是div1的div
$("div:not(.div1)")
[4].选取索引是偶数的所有div元素
$("div:even")
[5].选取索引是奇数的所有div元素
$("div:odd")
[6].选取索引等于index的div元素
$("div:eq(index)")
[7].选取索引大于index的div元素
$("div:gt(index)")
[8].选取索引小于index的div元素
$("div:lt(index)")
[9].选取所有标题元素
$(":header")
[10].选取当前正在执行动画的元素
$(":animated")
[11].选取当前获取焦点的元素
$(":focus")

(2).内容过滤选择器(通过文本内容进行选择)
[1].选取文本含有text的div元素
$("div:contains(text)")
[2].选取不含子元素或者文本元素的空div元素
$("div:empty")
[3].选取含有p标签的div元素
$("div:has(p)")
[4].选取含有子元素或文本元素的div元素
$("div:parent")

(3).可见性过滤选择器(通过元素的可见性状态进行选择)
[1].选取文档

流中不可见的元素
$(":hidden")
选取input中的隐藏域
$("input:hidden")
[2].选取所有可见元素
$("div:visible")

(4).属性过滤选择器
[1].选取拥有title的div元素
$("div[title]")
[2].选取title属性值为test的div元素
$("div[title=test]")
[3].选取title属性值不等于test的div元素
$("div[title!=test]")
[4].选取title属性值以te开头的div元素
$("div[title^=te]")
[5].选取title属性值以st结尾的div元素
$("div[title$=st]")
[6].选取title属性值含有es的div元素
$("div[title*=es]")
[7].选取title属性值是en或者前缀(指en后面有-即:en-)是en的div元素
$("div[title|=en]")
[8].选取title属性值中用空格分隔开并含有uk的div元素
$("div[title~=uk]")
[9].选取属性复合满足条件的元素
$("div[attribute][attribute2][attribute3]")

(5).子元素过滤选择器(注意冒号前面必须加空格)
[1].选取所有div元素中指定条件index的子元素(index:n/even/odd/3n/3n+1)
$("div :nth-child(index)")
[2].选取所有div元素中的第一个子元素
$("div :first-child")
[3].选取所有div元素中的最后一个子元素
$("div :last-child")
[4].选取所有div元素中唯一的子元素
$("div :only-child")

(6).表单对象属性选择器
[1].选取所有可用的ipnut元素
$("input :enabled")
[2].选取所有不可用的input元素
$("input :disabled")
[3].选取所有被选中的input元素
$("input :checked")
[4].选取所有被选中select中的option的元素
$("select option :selected")

4).表单选择器
(1).选中所有的input/textarea/select/button元素
$(":input")
(2).选中所有的单行文本框
$(":text")
(3).选中所有的密码框
$(":password")
(4).选中所有的单选框
$(":radio")
(5).选中所有的复选框
$(":checkbox")
(6).选中所有的提交按钮
$(":submit")
(7).选中所有的图像按钮
$(":image")
(8).选中所有的重置按钮
$(":reset")
(9).选中所有的按钮
$(":button")
(10).选中所有的上传(file)域
$(":file")
(11).选中所有的不可见元素
$(":hidden")