[关闭]
@linux1s1s 2017-01-24T18:02:42.000000Z 字数 4152 阅读 1627

Base Time-jQuery

Base H5 2017-01


什么是jQuery

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

jQuery包含哪些功能

如何使用

Downloading jQuery 源码地址:https://code.jquery.com/jquery-3.1.1.js

  1. <head>
  2. <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  3. </head>

也可以通过Baidu的CDN静态资源引用jQuery
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

使用这些CDN有啥好处?

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

jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()

此处输入图片的描述

文档就绪事件

  1. $(document).ready(function(){
  2. // 开始写 jQuery 代码...
  3. });

或者,两者等价

  1. $(function(){
  2. // 开始写 jQuery 代码...
  3. });

选择器

此处输入图片的描述

jQuery 事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:

$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:

  1. $("p").click(function(){
  2. // 动作触发后执行的代码!!
  3. })

像单击事件一样,以下是相似的事件小结

事件 jQuery 关键词
双击 dblclick()
鼠标移动到元素 mouseenter()
鼠标离开元素 mouseleave()
鼠标移动到元素,按下鼠标 mousedown()
松开鼠标 mouseup()
模拟光标悬停事件 hover()
元素获得焦点时 focus()
元素失去焦点 blur()

jQuery 效果

事件 jQuery 关键词
隐藏和显示 hide() 和 show()
淡入淡出 fadeIn()/fadeOut()/fadeToggle()/fadeTo()
滑动 slideDown()/slideUp()/slideToggle()
动画 animate()
停止动画 stop()
元素获得焦点时 focus()
元素失去焦点 blur()

- 动画栗子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. $(document).ready(function(){
  9. $("button").click(function(){
  10. var div=$("div");
  11. div.animate({height:'300px',opacity:'0.4'},"slow");
  12. div.animate({width:'300px',opacity:'0.8'},"slow");
  13. div.animate({height:'100px',opacity:'0.4'},"slow");
  14. div.animate({width:'100px',opacity:'0.8'},"slow");
  15. });
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <button>开始动画</button>
  21. <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
  22. 如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  23. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  24. </div>
  25. </body>
  26. </html>

jQuery - 设置内容和属性

我们将使用前一章中的三个相同的方法来设置内容:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  6. </script>
  7. <script>
  8. $(document).ready(function(){
  9. $("#btn1").click(function(){
  10. $("#test1").text("Hello world!");
  11. });
  12. $("#btn2").click(function(){
  13. $("#test2").html("<b>Hello world!</b>");
  14. });
  15. $("#btn3").click(function(){
  16. $("#test3").val("RUNOOB");
  17. });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <p id="test1">这是一个段落。</p>
  23. <p id="test2">这是另外一个段落。</p>
  24. <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
  25. <button id="btn1">设置文本</button>
  26. <button id="btn2">设置 HTML</button>
  27. <button id="btn3">设置值</button>
  28. </body>
  29. </html>

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

栗子:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  7. </script>
  8. <script>
  9. $(document).ready(function(){
  10. $("button").click(function(){
  11. $("#div1").load("/try/ajax/demo_test.txt");
  12. });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
  18. <button>获取外部内容</button>
  19. </body>
  20. </html>

Ajax get请求栗子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  7. </script>
  8. <script>
  9. $(document).ready(function(){
  10. $("button").click(function(){
  11. $.get("/try/ajax/demo_test.php",function(data,status){
  12. alert("数据: " + data + "\n状态: " + status);
  13. });
  14. });
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <button>发送一个 HTTP GET 请求并获取返回结果</button>
  20. </body>
  21. </html>

Ajax post请求栗子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  7. </script>
  8. <script>
  9. $(document).ready(function(){
  10. $("button").click(function(){
  11. $.post("/try/ajax/demo_test_post.php",{
  12. name:"菜鸟教程",
  13. url:"http://www.runoob.com"
  14. },
  15. function(data,status){
  16. alert("数据: \n" + data + "\n状态: " + status);
  17. });
  18. });
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <button>发送一个 HTTP POST 请求页面并获取返回内容</button>
  24. </body>
  25. </html>

参考:jQuery 教程

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注