CMoney软件工程师战斗营_jQuery_Week 14

分领域後
除了每周二的课程
每周四也会有老师指定的演示
本周我是负责jQuery
以下是我的不专业整理

什麽是jQuery
jQuery特性有哪些
如何安装jQuery
jQuery语法
使用范例

什麽是jQuery?

jQuery是一套跨浏览器的JavaScript函式库(library)，简化HTML与JavaScript之间的操作。

jQuery是开源软件，使用MIT授权条款授权。

jQuery的语法设计使得许多操作变得容易。

模组化的方式使jQuery函式库能够建立功能强大的动态网页以及网路应用程序。

生日：2006年1月

最新版本：3.5 （4正在开发中）

最新版本释出日期：2020年4月10日

劲敌：Bootstrap

jQuery特性有哪些

jQuery是使用最多的JS库之一，它有很多优点，比如轻量、易用、完善的Ajax、良好的浏览器相容，以及它有健壮的选择器等。这些优点使得jQuery成为帮助前端开发人员的有力工具。

HTML元素选取与操作→稍後揭晓（coming soon）
DOM→jQuery提供了选择器，用於根据不同的条件
事件→jQuery库包含等效於DOM事件的函数
CSS操作→提供一些常使用的属性操作的简化方法
JavaScript 特效和动画→可以将特殊效果应用於DOM元素
AJAX→jQuery包括易於使用的AJAX函数，以从服务器加载数据而无需重新加载整个页面。
多浏览器支援→jQuery库自动处理跨浏览器问题

如何安装jQuery

1.1下载jQuery

有两个版本的jQuery 可供下载：

Production version - 用於实际的网站中，已被精简和压缩。
Development version - 用於测试和开发（未压缩，是可读的代码）

网址：https://jquery.com/download/

1.2通过CDN（内容分发网络）引用

有两种方式：

连到网路,连到本地端

网址：https://developers.google.com/speed/libraries

2.把jQuery添加到网页中

<body>
<script src="jquery.js"></script>
</body>

3.jQuery语法

来源网址：https://api.jquery.com/

文档就绪函数→为了防止文档在完全加载（就绪）之前运行jQuery 代码。

$(document).ready(function(){
		所有 jQuery 函数位於document ready 函数中
});

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小
选取物件：$("CSS选取器") or $("标签")，$等同於jQuery

6个基本语法

取得内容、属性

console.log($("p").html());        // 取得内容
console.log($("p").attr("class")); // 取得 class 属性的值

更新 style 属性

$("p").css("color", "red");         // 改变文字颜色
$("p").css("font-style", "italic"); // 变斜体

更新一般属性

$("p").attr("id", "myid");
$("p").attr("style", "font-weight: bold;font-size: 30px;");

取代里面内容

$("p").html("<span>这是 span 标签的内容。</span>");
$("p").text("<span>这是 span 标签的内容。</span>");

移除元素
```
$("p").remove();
```

新增元素至某处

$("p").append("<span>这是 span 标签的内容。</span>"); // 里面的最後面
$("p").prepend("<span>这是 span 标签的内容。</span>"); // 里面的最前面
$("p").after("<span>这是 span 标签的内容。</span>"); // 同层後面
$("p").before("<span>这是 span 标签的内容。</span>"); // 同层前面

jQuery选取器

元素选择器

Query 使用CSS 选择器来选取HTML 元素。

$("p") 选取<p> 元素。
$("p.intro") 选取所有class="intro" 的<p> 元素。
$("p#demo") 选取所有id="demo" 的<p> 元素。

属性选取器

jQuery 使用XPath表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有href 属性的元素。
$("[href='#']") 选取所有带有href 值等於"#" 的元素
$("h1[id^='my_']")选取所有h1标签，且 id 的属性值开头等於 my_ 的元素。
$("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素
$("p[class*='ara']")选取所有p标签，且 class 的属性值有包含 ara 字串的元素。

CSS 选取器
```
$("p").css("background-color","red");
```
实例

筛选器

$("p").first().css("color", "red");
$("p").last().css("color", "red");
$("p").eq(0).css("color", "red"); // 第 1 个
$("p").eq(-1).css("color", "red"); // 倒数第 1 个
$("p").slice(1, 3).css("color", "red");// 从索引值 1 到 3，但不包含 3

事件：$(selector).action()

$("button").click(function() {$(this).hide() 为隐藏当前元素 } )

https://api.jquery.com/category/events/mouse-events/
CSS操作

 https://api.jquery.com/category/css/
jQuery效果
- 显示/隐藏
  
  hide()
  
  show()
  
  toggle()
- 淡入/淡出
  
  fadeIn()
  
  fadeOut()
  
  fadeToggle()
  
  fadeTo(speed,opacity,callback))
- 滑入/滑出
  
  slideDown()
  
  slideUp()
  
  slideToggle()
- 动画
  
  $(selector).animate({params}, speed, Easing, callback);
- 停止动画
  
  $(selector).stop(stopAll,goToEnd);