手记

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" 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的<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 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里面也同样有,只是它的表述不一样,貌似更加方便,比如,我要通过开关来控制<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停止动画等。

43人推荐
随时随地看视频
慕课网APP

热门评论

我想问问 这个文档就绪函数 在编写的时候有没有什么快捷方式吗?每次都要把这几个敲出来嘛?

非常感谢你的分享,谢谢!

查看全部评论