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)基本过滤选择器
View Code
//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)可见性过滤选择器
View Code
//选取所有可见/不可见的元素 $("a:visible/a:hidden") $("div:visible").css("backgroundColor","red"); $("input:hidden").css("backgroundColor","blue");
d)属性过滤选择器
View Code
//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)子元素过滤选择器
View Code
//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)表单对象过滤选择器
View Code
//1 选取所有可用/不可用元素 $("a:enable/disable") //2 选取所有被选中的元素 $("a:checked") //3 选取所有被选中的选项的元素 $("a:selected")
4)表单选择器