首页手记 jQuery学习笔记系列(一)

jQuery学习笔记系列(一)

标签：

Html/CSS Html5 JQuery

jQuery 不是什么新的编程语言，只是一个封装了AJAX等的库，依赖它，我们可以更简单方便的实现JavaScript编程。jQuery简化了元素的查询方式以及事件处理方法。甚至有说法说jQuery是为事件处理特别设计的。

一：jQuery库的依赖方式

jQuery库有两种类型，一种是经过压缩的(Production version)，看不到源码，一种是没有压缩的(Development version )，可以方便Debug调试。这两种都可从 jQuery.com 下载。
下载好后，将jquery.js放到指定目录下，然后在<head></head>头里面添加 <script> 标签对其进行指定依赖。

<html>
<head>
<!-- <script>在HTML5以前的写法必须给出type="text/javascript"，但在HTML5后就可以省略了-->
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx/aaaa/jquery.js"/>
<!--HTML5写法
 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx/aaaa/jquery.js"/>
-->

</head>
<body>
</body>
</html>

如果你不写下载jquery.js或者不写将它放在自己工程中，那么我们也可以像maven库一样，依赖远程库：
其中做的很好的数Google与Microsoft了，我们可能通过其官方提供的CDN(内容分发网络)进行加载jquery库。

Google的CDN

<head>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Microsoft的CDN

<head>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

提示：使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

二、jQuery语法

jQuery 语法是XPath（XML Path Language即XML路径语言，用来确定XML文档中某部分位置的语言）与CSS选择器语法的组合，是为 HTML 元素的选取编制的，可以对元素执行某些操作。

【注】：因为是查询HTML中的元素，因此我们一定要确定页面已经全部加载完成，否则会查找失败。因此，jQuery设计了一个文档就绪函数:

$(document).ready(function(){
   //todo jQuery的所有元素查询操作，事件等都写在这里
  });

基础语法格式是：$(selector).action()

$符号定义：代表jQuery对象，也可以直接用jQuery,如：jQuery(selector).action()
选择符（selector）：“查询”和“查找” HTML 元素，比如，id为btn1的<button>元素
jQuery 的 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的时候，文字背景颜色改变

<!DOCTYPE html>
<html>
<head>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/jquery/jquery-1.11.1.min.js"></script>
<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();
   });

});
</script>

<!--写一个样式-->
<style type="text/css">
div.slide1{
 width:200px;
 height:100px;
 background:#e5eecc;
 margin:10px;
 border:solid 1px #c3c3c3;
 padding:3px;
 text-align:center;
}
</style>
</head>

<body>
<p class="test">这是一个段落。</p>
<p id="p2">.。。。。</p>
<p id="p3">key状态</p>

<button id="btn1">单击测试 jQuery</button></br>
<button id="btn2">双击测试</button></br>
<button id="btn3">focus测试</button></br>
<button id="btn4">鼠标悬停事件测试</button></br>
<button id="btn5">toggle测试</button></br>

<button id="btn6">抽屉动效测试</button>
<div class="slide1">
 <p>你敢点上面的button吗，有种你就别点</p>
</div>

</br><input id="input1" type="text|integer" />
<p>当在输入聚焦时，改变输入框的背景色</p>
</body>
</html>

五、jQuery动画

在Android里面，动画有属性动画(Animation)、帧动画(FrameAnimator)、补间动画(TweenAnimator)等。那么在jQuery里面也同样有，只是它的表述不一样，貌似更加方便，比如，我要通过开关来控制<div>块的显示show()与隐藏hide()时，可以直接调用jQuery里面toggle()方法。且它的hide()与show()方法可以传入预定义参数（比如：slow,fast等）与时间（1000,单位为ms),回调函数等。

在jQuery里面，动画用animate()方法。通过此方法，我们可以自定义动画。

语法

$(selector).animator({params},speed,callback);

其中，

selector为选择器，上面已经讲过。
params: 定义动画的CSS属性，比如，位移，缩放，旋转等，不能省略
speed: 速度或时长，取：slow/fast/或ms，可省
callback: 动画结束后的回调函数。可省

示例

$("#btn1").click(function(){
 $("div").animate({
 left:'250px',
 height:'100px',
 width:'100px'
 });
 });

注意：在CSS属性里面，属性的值也可以用相对值，让控件来做相对运动。用法：在值前使用 "+="(表示在原有基础上增加)或"-="(在原有基础上减少)
eg:

$("#btn1").click(function(){
 $("div").animate({
 left:'250px',
 height:'+=100px',
 width:'-=100px'
 });
 });

在我们实际的项目开发中，可能有时要求实现组合动画，比如，先平移再边旋转边缩放等。那么这时这么多动画怎么实现呢？
在jQuery中，animate()实现了队列的功能，因此可以轻松实现多个animate()的调用。

比如：把块<div>快速向右平移200个像素后，再缓慢的把高度缩小为原来的100个像素，且增加块内字体的字号：

$("#btn1").click(function(){
 var div = $("div");
 div.animate({
 right:'200px'
 },"fast");

 div.animate({
 height:'+=100px'
 fontSize:'3em'
 },"slow");
});

【备注】：今天还只学习到jQuery启动动画，下面再接着学jQuery停止动画等。

点击查看更多内容