Day21 jQuery 基本教学(一)

JQuery是由JavaScript所开发的开源函式库，主要有以下功能大受好评而列入主流。

1. 被简化的 DOM 控制：比起原生JavaScript更能轻松对DOM监管
2. 过度的转场效果：能容易去控制CSS及配合两者之间的过渡，也有自己的animate功能
3. AJAX使用：能直接额外背後连线网页并将资料取回，再透过DOM写入，达到免重整画面就能取得。
4. 官方文件详细
5. 简洁不笨重，压缩後大约 32kB
6. 只要你有 JavaScript 的基础，不用再多去学习一大堆新语法
7. 没有跨浏览器的问题，jQuery 已经处理好了
8. 支援 CSS3 选择器
9. 社群活跃，你可以有很多人家写好免费的 plugin 用
10. 跟其它 library 一起使用也不冲突

在使用 jQuery 之前，需要先了解基本的 JavaScript、CSS 与 HTML喔!

安装

可以使用CDN或直接安装到网站内，透过取得jquery.min.js。

可自行评估是使用 CDN 或下载於本机端
jQuery’s CDN 位置
jQuery 下载处

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
</script>

或直接下载下来放到你相同位置。就算没有网路也可以运作

<script src="js/jquery-3.4.1.min.js"></script>

或者透过 Google CDN 载入 jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

语法说明

使用jQuery的$()为基础并会变成 jQuery 的元件，透过jQuery元件进行相关程序指令。若要接续其他动作则以物件指向来进行行为规划，例如：

$('li.list').addClass('color');

JQ 可接续其他对象或动作并能连续指定多种，举个例子：

$('li.list').next().css('background-color','red').addClass('color');

• 此为先找到 DOM 中的 li 标签同时有 class name 为 list，接着下一个标签为对象
• 对此对象进行增加 CSS 样式（背景色：red)
• 对此对象进行增加 class name 为 color

此为找到 DOM 中的 li 标签同时有 class name 为 list 的对象，对此对象进行增加 class name 为 color
也可使用jQuery() 来代表 $() 之写法，如果无法使用该符号情况下。

jQuery 开头都是 $() 函数进行元件套用，事实上同等於 jQuery() 写法，如果当你使用一些 JavaScript 外挂也刚好有 $() 会冲突时，你可以改写完整语法 jQuery()。