JQuery概述
- JQuery：JavaScript Query(Js查询)
它是一个轻量的, 免费开源的JS函数库, 能够极大的简化JS代码
- JQuery优势
(1)可以极大的简化JS代码
(2)可以像css一样获取页面元素
(3)可以操作CSS属性来控制页面的效果
(4)可以兼容常用的浏览器
在JS中少数内容在不同的浏览器中不兼容。比如：innerText、removeNode()、replaceNode()等在火狐中无法使用.
//在CSS中：
div{ background-color:red }
//在jQuery中：
$("div").css("background-color","red");
//在CSS中：
#d1{ background-color:red }
//在jQuery中：
$("#d1").css("background-color","red");
- 版本支持
1.x – 支持常用浏览器, 以及IE6+以上的版本
2.x – 支持常用浏览器, 以及IE9+以上的版本
3.x – 支持常用浏览器, 以及IE9+以上的版本
jQuery的缺点：jQuery的高版本不兼容低版本。这是因为jQuery在升级时除了会做一些内部优化之外，还会增加或删除一些方法。如果升级到高版本，可能会造成之前的部分代码无法执行!
- jQuery引入
jQuery函数库本身是一个js文件,所以引入jQuery和引入一个普通的JS文件一样
<!-- 引入JQuery库文件,注意文件路径-->
<script type="text/javascript" src="jquery-x.x.x.js"></script>
1.JQuery语法
-
$符号
**等价JQuery**，调用()等价于调用jQuery(), 该函数会返回一个jQuery对象, 该对象包含了若干个html元素, 可以调用jQuery中提供的方法或属性来操作这些元素.
-
文档就绪事件
$(function(){...}) 等价于window.onload事件
$(function(){
//在文档加载完后立即触发执行
});
-
JQuery对象与JS对象的相互转换
为什么需要相互转换
jQuery是js的简单框架, 在使用时通过$()可以返回一个jQuery对象, 可以通过jQuery提供的属性或方法来操作其中的内容, 但是, 不可以通过jQuery对象来调用js的属性或者js的方法. 反之, 也不可以通过JS对象来调用jQuery的属性或者jQuery方法， 否则调用会报错!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery引入</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
//文档就绪事件
$(function(){
//JQuery获取div元素内容
alert($('#hello').html());
//========== JS对象转换成JQuery对象 =========//
var div = document.getElementById("hello");
alert($(div).html());
//========== JQuery对象转换成JS对象 =========//
var info = $('#hello');
alert(info.html());
});
</script>
</head>
<body>
<div id="hello">Hello JQuery!</div>
</body>
</html>
2.JQuery选择器
-
基本选择器
1.元素名选择器：根据元素的名称选中指定名称的元素
格式：$('元素名称')
//1、改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1"
/* 选中b1按钮,为b1按钮绑定点击事件 */
$('#b1').click(function(){
//css("属性名","属性值")
$("div").css("background","#FF69B4");
});
2.类选择器：根据元素的class属性,匹配所有class值相同的元素
格式：$('.class值')
//3、改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"
/* 选中b3按钮,为b3按钮绑定点击事件 */
$('#b3').click(function(){
$('.mini').css("background","#FF0033");
});
3.ID选择器：根据元素的id属性值, 匹配具有特定id的元素
格式：$("#id值")
//2、改变 id 为 one 的元素的背景色为 #9ACD32" id="b2"
/* 选中b2按钮,为b2按钮绑定点击事件 */
$('#b2').click(function(){
$('#one').css("background","#9ACD32");
});
4.多元素选择器 :匹配多个选择器选中的元素
格式：$("选择器1,选择器2,…选择器n")
//4、改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b4"
/* 选中b4按钮,为b3按钮绑定点击事件 */
$("#b4").click(function(){
$("span,#two,#one,.mini").css("background-color", "#006400");
});
-
层级选择器
1.后代选择器
格式:$("祖先元素 后代元素")
//1、改变 div 内所有 span 的背景色为 #FF0000" id="b1"
/* 选中b1按钮,为b1按钮绑定点击事件 */
$("#b1").click(function(){
$("div span").css("background-color", "#FF0000");
});
2.子元素选择器
格式：$("祖先元素>子元素")
//2、改变 body 内子 div 的背景色为 #D8C93B" id="b2"
/* 选中b2按钮,为b2按钮绑定点击事件 */
$("#b2").click(function(){
$("body>div").css("background-color","#D8C93B");
});
3.相邻兄弟选择器
格式:$("大哥+小弟")
//3、改变 id 为 two 的下一个 div 的背景色为 #0000FF" id="b3"
/* 选中b3按钮,为b3按钮绑定点击事件 */
$("#b3").click(function(){
$("#two+div").css("background-color","#0000FF");
});
4.$(“#two~div”)：匹配id为two元素后面所有的兄弟div元素
//4、改变 id 为 two 的元素后面的所有 div 兄弟元素的背景色为 #76AA0F" id="b4"
/* 选中b4按钮,为b4按钮绑定点击事件 */
$("#b4").click(function(){
$("#two~div").css("background-color","#76AA0F");
});
5.一些方法
| 方法 | 相关描述 |
|---|---|
| siblings() | 返回所匹配元素的所有兄弟元素 |
| next/prev | 返回所匹配元素后面/前面紧邻的兄弟元素 |
| nextAll/prevAll | 返回所匹配元素后面/前面所有兄弟元素 |
//5、改变 id 为 two 的元素所有 div 兄弟元素的背景色为 #FF6347" id="b5"
$("#b5").click(function(){
$("#two").siblings("div").css("background-color", "#FF6347");
});
-
基本过滤选择器
(后面单独讲解过滤)
格式：==元素:过滤形式==
| 过滤 | 相关描述 |
|---|---|
| $("div:first") | 匹配所有div中的第一个div元素 |
| $("div:last") | 匹配所有div中的最后一个div元素 |
| $("div:not(.one)") | 匹配所有div中class值不为one的div元素 |
| $("div:eq(3)") | 匹配所有div中的索引值为3的div元素 |
| $("div:lt(3)") | 匹配所有div中的索引值小于3的div元素 |
| $("div:gt(3)") | 匹配所有div中的索引值大于3的div元素 |
| $("div:even") | 匹配所有div中的索引值为偶数的div元素 |
| $("div:odd") | 匹配所有div中的索引值为奇数的div元素 |
baseFilter.gif
/* ---------基本过滤选择器练习--------- */
$(function() {
//1、改变第一个 div 元素的背景色为 #FF6347" id="b1"
$("#b1").click(function(){
$("div:first").css("background-color","#FF6347");
//$("div:eq(0)").css("background-color","#FF6347");
});
//2、改变最后一个 div 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div:last").css("background-color", "#9ACD32");
});
//3、改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$("div:not(.one)").css("background-color", "#FF0033");
});
//改变索引值等于 3 的 div 元素的背景色为 #006400" id="b4"
$("#b4").click(function(){
$("div:eq(3)").css("background-color", "#006400");
});
})
-
内容选择器
| 选择器 | 相关描述 |
|---|---|
| :contains | 匹配包含给定文本的元素 |
| :empty | 匹配所有不包含子元素或文本的空元素 |
| :has | 匹配含有选择器所匹配的元素的元素 |
| :parent | 匹配含有子元素或文本的元素 |
| :parents | 获取当前所匹配所有祖先元素 |
-
可见选择器
| 选择器 | 相关描述 |
|---|---|
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 |
| :visible | 匹配所有的可见元素 |
content_visible_selector.gif
$(function() {
/* ---------内容选择器--------- */
//1、改变含有文本 'one' 的 div 元素的背景色为 #FF6347" id="b1"
$('#b1').click(function() {
$("div:contains('one')").css({
background: '#FF6347'
});
});
//2、改变div空元素(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
$("#b2").click(function() {
$("div:empty").css({
background: '#9ACD32'
});
});
//=================================
/* ---------可见选择器练习--------- */
//1、让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b3"
$("#b3").click(function() {
var $div = $("div:hidden");
$div.show();
$div.css({
background: '#FF69B4'
});
});
//2、改变所有可见 div 元素背景色为 #F08080" id="b4"
$("#b4").click(function(){
$("div:visible").css("background-color", "#F08080");
});
})
-
表单选择器
| 选择器 | 相关描述 |
|---|---|
| :input | 匹配所有 input, textarea, select 和 button 元素 |
| :text | 匹配所有的单行文本框 |
| :password | 匹配所有密码框 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
| :submit | 匹配所有提交按钮 |
| :reset | 匹配所有重置按钮 |
| :image | 匹配所有图像域 |
| :checked | 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) |
| :disabled | 匹配所有不可用元素 |
| :selected | 匹配所有选中的option元素 |
form_selector.gif
$(function() {
/* ---------表单选择器练习--------- */
//1、打印所有的 :input 元素 id="b1"
/* :input元素可以选中所有的表单项元素(input、select、textarea) */
$("#b1").click(function(){
$(":input").each(function(){
console.log( this );
});
});
//2、打印所有的 :password 元素" id="b2"
/* :password 匹配所有的密码输入框 */
$("#b2").click(function(){
$(":password").each(function(){
console.log(this);
});
});
//3、打印所有的 :radio 元素" id="b3"
/* :radio 匹配所有的单选框 */
$("#b3").click(function(){
$(":radio").each(function(){
console.log(this);
});
});
//4、打印所有的 :checked 元素" id="b4"
/* :checked 匹配所有被选中的单选框、复选框、option选项
* :selected 匹配所有被选中option选项
*/
$("#b4").click(function(){
$(":checked").each(function(){
console.log( this );
});
/*$("input:checked").each(function(){
console.log( this );
});*/
/*$("input[type='radio']:checked").each(function(){
console.log( this );
});*/
/*$("input[type='checkbox']:checked").each(function(){
console.log( this );
});*/
});
})
