简介
jQuery是js的一个轻量级框架，兼容了各大浏览器，提供了dom、events、ajax的简易操作，jQuery的插件非常丰富
jQuery与js一些区别
- js对象与jquery对象的转换
约定：jquery对象的对象名为：(js对象)
jquery对象转成js对象：jquery对象[0]或jquery对象.get(0) - 页面加载完成事件window.onload和
(document).ready(function({}))方法是等待页面标签元素加载完毕之后执行代码，不需要图片的完全加载只需要图片标签<image>加载完毕
c. window.onload方法没有简写形式，(function(){})
- 事件的区别
js事件绑定：js对象.事件=function(){}
jquery事件绑定：jquery对象.事件(function(){})
选择器
-
基本选择器
通过id、class、标签名来选择dom对象
a. 元素选择器
语法：("span")，选择所有span标签的元素
b. id选择器
语法：("#one")，选择id为one的元素
c. 类选择器
语法：(".cssClass")，选择class="cssClass"属性的元素
d. 通配符选择器
语法：("id选择，元素选择，类选择")
如：$("span,#one,.cssClass")，选择标签为span，id为one，类属性为cssClass的所有元素 -
属性选择器
a. 元素包含属性值
语法：("div[name]")，选择div标签中包含name的元素
b. 选择特定的属性值
语法：("div[name='gen']")，选择div标签中name属性为gen的元素
c. 选择以某属性值开头的
语法：("div[name^='gen']")，选择div标签中name属性以gen开头的元素
d. 选择以某属性值结尾的
语法：=value]")
如：='gen']")，选择div标签中name属性以gen结尾的元素
e. 选择某属性值包含某些字符
语法：("div[name*='gen']")，选择div标签中name属性包含gen字符的元素
注意：如需多个条件使用，可以并排表示
如：$("div[id][name='gen'][class='myclass']") -
层级选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
a. ancestor descendant
用法:(”form > input”) ; 返回值 集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
c. prev + next
用法:(”form ~ input”) ; 返回值 集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取,siblings()函数也可以写选择器
<script type="text/javascript">
// <input type="button" value="改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function () {
$("body div").css("background","red");
})
// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("body > div").css("background","red");
})
// <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色" id="b3"/>
$("#b3").click(function () {
$("#one + div").css("background","red");
})
// <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4"/>
$("#b4").click(function () {
$("#two ~ div").css("background","red");
})
// <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色" id="b5"/>
$("#b5").click(function () {
$("#two").siblings("div").css("background","red");
})
</script>
-
过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
（1）基础过滤选择器
1、:first�用法:(”tr:last”) 返回值 集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.
3、:not(selector)�用法:(”tr:even”) 返回值 集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
5、: odd�用法:(”tr:eq(0)”) 返回值 集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
7、:gt(index)�用法:(”tr:lt(2)”) 返回值 集合元素
说明: 匹配所有小于给定索引值的元素.
9、:header(固定写法)�用法: $(”:header”).css(”background”, “#EEE”) 返回值 集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
10、:animated(固定写法) 返回值 集合元素
说明: 匹配所有正在执行动画效果的元素
<script type="text/javascript">
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function () {
$("div:first").css("background","red");
})
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("div:last").css("background","red");
})
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function () {
$("div:not(.one)").css("background","red");
})
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function () {
$("div:even").css("background","red");
})
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function () {
$("div:odd").css("background","red");
})
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function () {
$("div:gt(3)").css("background","red");
})
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function () {
$("div:eq(3)").css("background","red");
})
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function () {
$("div:lt(3)").css("background","red");
})
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function () {
$(":header").css("background","red");
})
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色" id="b10"/>
$("#b10").click(function () {
$(":animated").css("background","red");
})
//显示动画效果
function mover() {
//回掉函数mover
$("#mover").slideToggle("slow",mover);
}
mover();
</script>
(2) 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
1、:contains(text)�用法: (”td:empty”) 返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法: (”td:parent”) 返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
<script type="text/javascript">
// <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function () {
$("div:contains('di')").css("background","red");
})
// <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>
$("#b2").click(function () {
$("div:empty").css("background","red");
})
// <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function () {
$("div:has(.mini)").css("background","red");
})
// <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 红色" id="b4"/>
$("#b4").click(function () {
$("div:parent").css("background","red");
})
// <input type="button" value=" 改变不含有文本 di的 div 元素的背景色" id="b5"/>
$("#b5").click(function () {
$("div:not(:contains('di'))").css("background","red");
})
</script>
（3）可见过滤器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden�用法: (”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
<script type="text/javascript">
// <input type="button" value="保存" class="mini" name="ok" class="mini" />
// <input type="button" value=" 改变所有可见的div元素的背景色为 红色" id="b1"/>
$("#b1").click(function () {
$("div:visible").css("background","red");
})
// <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 红色" id="b2"/>
$("#b2").click(function () {
var hiddener= $("div:hidden");
hiddener.show();
hiddener.css("background","red");
})
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
//为啥匹配不到？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
$("#b4").click(function () {
var $inputs=$("input:hidden");
$inputs.each(function (index, docEle) {
alert(index);
alert(docEle.val());
});
});
// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b5"/>
$("#b5").click(function () {
var $inputs=$("input[type=hidden]");
var input1=$("#input1");
alert(input1.val());
$inputs.each(function (index, docEle) {
alert(index);
alert(docEle.val());
});
})
</script>
网友评论