jQuery 不是什么新的编程语言，只是一个封装了AJAX等的库，依赖它，我们可以更简单方便的实现JavaScript编程。jQuery简化了元素的查询方式以及事件处理方法。甚至有说法说jQuery是为事件处理特别设计的。
一：jQuery库的依赖方式jQuery库有两种类型，一种是经过压缩的(Production version)，看不到源码，一种是没有压缩的(Development version )，可以方便Debug调试。这两种都可从 jQuery.com下载。
下载好后，将jquery.js放到指定目录下，然后在<head></head>头里面添加 <script>标签对其进行指定依赖。
="text/javascript" src="xxx/aaaa/jquery.js"/> <!--HTML5写法 <script src="xxx/aaaa/jquery.js"/> --> > </html>如果你不写下载jquery.js或者不写将它放在自己工程中，那么我们也可以像maven库一样，依赖远程库：
其中做的很好的数Google与Microsoft了，我们可能通过其官方提供的CDN(内容分发网络)进行加载jquery库。
Google的CDN ="text/javascript" src=" /jquery/1.4.0/jquery.min.js"></script> </head> Microsoft的CDN ="text/javascript" src=" /jquery-1.4.min.js"></script> </head>
提示：使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
jQuery 语法是XPath（XML Path Language即XML路径语言，用来确定XML文档中某部分位置的语言）与CSS选择器语法的组合，是为 HTML 元素的选取编制的，可以对元素执行某些操作。
【注】：因为是查询HTML中的元素，因此我们一定要确定页面已经全部加载完成，否则会查找失败。因此，jQuery设计了一个 文档就绪函数:
$(document).ready(function(){ //todo jQuery的所有元素查询操作，事件等都写在这里 });基础语法格式是：$(selector).action()
这里需要注意一点的是，jQuery的符号代表$,因为在别的地方可能也同样用到$，这时如果与jQuery碰到一起，就产生了冲突。因此在设计的时候，jQuery为此创建了一个方法。在文档加载完成前，调用jQuery.noConflict(),我们也可以为此定义一个jQuery的全局变量。
var jq = jQuery.noConflict(); 三、jQuery选择器jQuery选择器主要有三种： 名称 示例
jQuery元素选择器 比如：\$("p"),选择<p>元素;\$(this),选择HTML元素;\$(".testClass"),选择class为testClass的元素;\$("#id1"),选择id为id1的元素
jQuery属性选择器 这个是使用XPath表达式来选择带有给定属性的元素。如：\$("[href]"),选择所有带有href属性的元素；\$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
jQuery CSS选择器 用于改变HTML元素的CSS属性，如：\$("p").css("background-color","red");
四、jQuery事件
因为我是做Android开发的，因此对这个事件的理解可能比刚开始学的同学要容易很多。
事件一般是指外围输入的状态，比如点击事件，触摸事件等等。
在jQuery里面，它封装了很多丰富的事件，如下表：
事件名 描述click() 鼠标点击事件
dblclick() 双击事件
focus() 触发或将函数绑定到指定元素的focus事件，比如输入框中光标聚集
keydown() 键盘按键按下
keyup() 键盘按键松开
... 还有很多，大家可以去W3School上查看
综合示例：比如：有一段文字和一个Button,现要求点击Button的时候，文字背景颜色改变
> > <script> var jq = $.noConflict(); jq(document).ready(function(){ //单击 jq("#btn1").click(function(){ jq(".test").text("jQuery 仍在运行！"); //jq("#p2").hide(3000);//3秒后完全隐藏，有个过渡动画 jq("#p2").hide(3000,function(){ alert("我已经完全隐藏了哦"); }); }); //keydown：按下按键，但无内容，比如回格键 jq("#input1").keydown(function(){ jq("#input1").css("background-color","gray"); }); //keypress:有键入内容时 jq("#input1").keypress(function(){ jq("#input1").css("background-color","red"); }); //keyup:输入完成，松开按键 jq("#input1").keyup(function(){ jq("#input1").css("background-color","white"); }); //双击 jq("#btn2").dblclick(function(){ jq("#p2").show(1000).text("双击测试"); }); //focus事件 jq("#btn3").focus(function(){ jq("#p2").css("background-color","red"); }); //鼠标悬停事件 jq("#btn4").mouseover(function(){ jq("#p2").css("background-color","yellow"); }); //toggle jq("#btn5").click(function(){ jq(".test").fadeToggle(); }); //slide动效 jq("#btn6").click(function(){ jq(".slide1").slideToggle(); }); }); ="text/css"> div.slide1{ width:200px; height:100px; background:#e5eecc; margin:10px; border:solid 1px #c3c3c3; padding:3px; text-align:center; } > =========> =>当在输入聚焦时，改变输入框的背景色> 五、jQuery动画
相关文章
精彩导读
热门资讯
关注我们
