jQuery学习笔记(一)

来源：互联网发布：python教学视频知乎编辑：程序博客网时间：2024/06/05 07:33

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

一：jQuery库的依赖方式

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

<html><head><!-- <script>在HTML5以前的写法必须给出type="text/javascript"，但在HTML5后就可以省略了--><script type="text/javascript" src="xxx/aaaa/jquery.js"/><!--HTML5写法 <script src="xxx/aaaa/jquery.js"/>--></head><body></body></html>

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

Google的CDN

<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script></head>

Microsoft的CDN

<head><script type="text/javascript" src="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的元素
- jQuery 的 action() ：执行对元素的操作,比如控件的隐藏与显示等

这里需要注意一点的是，jQuery的符号代表,因为在别的地方可能也同样用到，这时如果与jQuery碰到一起，就产生了冲突。因此在设计的时候，jQuery为此创建了一个方法。在文档加载完成前，调用jQuery.noConflict(),我们也可以为此定义一个jQuery的全局变量。

var jq = jQuery.noConflict();

三、jQuery选择器

jQuery选择器主要有三种：

名称示例 jQuery元素选择器比如：$(“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 src="/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里面也同样有，只是它的表述不一样，貌似更加方便，比如，我要通过开关来控制

块的显示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()的调用。

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

$("#btn1").click(function(){ var div = $("div"); div.animate({ right:'200px' },"fast"); div.animate({ height:'+=100px' fontSize:'3em' },"slow");});

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

1 0