用户投稿分领域后
除了每週二的课程
每週四也会有老师指定的演示
本週我是负责jQuery
以下是我的不专业整理
什么是jQueryjQuery特性有哪些如何安装jQueryjQuery语法使用範例
什么是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);
微信扫一扫打赏
支付宝扫一扫打赏
