jQuery是一个java script库设计理念:write less,do more
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
语言特点
快速获取文档元素
jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。
提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。
创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。
提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。
增强的事件处理
jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。
更改网页内容
jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。
一 jQuery 对象和 DOM 对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入 jQuery 库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//$(function(){}) 相当于 window.onload, 代码卸载 {} 之间
$(function(){
//1. 选取 button: $("button")
//2. 为 button 添加 onclick 响应函数: $("button").click(function(){})
//代码编写在 function 的 {} 中.
$("button").click(function(){
//3. 弹出 helloworld
alert("helloworld");
alert($(this).text());
//jQuery 和 DOM 对象
//1. 由 jQuery 对象转为 DOM 对象
//1). 获取一个 jQuery 对象
var $btn = $("button");
//2). jQuery 对象是一个数组.
//alert($btn.length);
//3). 可以通过数组的下标转为 DOM 对象
//alert($btn[1].firstChild.nodeValue);
//2. 由 DOM 对象转为 jQuery 对象
//1). 选取一个 DOM 对象
var btn = document.getElementById("btn");
//2). 把 DOM 对象转为一个 jQuery 对象: 使用 $() 进行包装
alert("--" + $(btn).text())
});
})
</script>
</head>
<body>
<button id="btn">ClickMe</button>
<br><br>
<button>ClickMe2</button>
</body>
</html>
二 基本选择器
<!-- 导入 jQuery 库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")
//2. 为选择的 jQuery 对象添加 onclick 响应函数:
// $("#btn1").click(function(){}), 响应函数的代码
//写在 function(){} 的中括号中.
$("#btn1").click(function(){
$("#one").css("background", "#ffbbaa");
});
$("#btn2").click(function(){
$(".mini").css("background", "#ffbbaa");
});
$("#btn3").click(function(){
$("div").css("background", "#ffbbaa");
});
$("#btn4").click(function(){
$("*").css("background", "#ffbbaa");
});
$("#btn5").click(function(){
$("span,#two").css("background", "#ffbbaa");
});
})
</script>
</head>
<body>
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>
三 层次选择器
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background", "#ffbbaa");
});
$("#btn2").click(function(){
$("body > div").css("background", "#ffbbaa");
});
$("#btn3").click(function(){
$("#one + div").css("background", "#ffbbaa");
});
$("#btn4").click(function(){
$("#two ~ div").css("background", "#ffbbaa");
});
$("#btn5").click(function(){
$("#two").siblings("div").css("background", "#ffbbaa");
});
$("#btn6").click(function(){
//以下选择器选择的是近邻 #one 的 span 元素, 若该span
//和 #one 不相邻, 选择器无效.
//$("#one + span").css("background", "#ffbbaa");
$("#one").nextAll("span:first").css("background", "#ffbbaa");
});
$("#btn7").click(function(){
$("#two").prevAll("div").css("background", "#ffbbaa");
});
})
</script>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
<input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
<input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
<span id="span">--span元素--</span>
四 基本过滤选择器