JavaScript ----JQuery learning nodes part1 20180926

MichaelGzy

于 2018-09-26 19:14:54 发布

阅读量144

点赞数

分类专栏：前端 JS 文章标签： jQuery 简介 jQuery效果

前端 JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery 是一个 JavaScript 库。

需要具备的基础知识
在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML
CSS
JavaScript （这三块基础）

他具体的特性：
jQuery 库 - 特性
jQuery 库包含以下特性：

1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.AJAX
8.Utilities

那么如何使用呢？
三种方式：
1.下载到本地，直接引用

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



//当然，要注意  有两种格式的jQuery，压缩版和开发版
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

2.替代法

a.谷歌Google 引用法

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>



//当然，版本 1.8.0 是可调可变的

b.微软 Microsoft引用法
Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

//同样，版本可变可调

结论：从CDN 去引用，有优势

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

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

$(document).ready(function(){

/*-- jQuery functions go here --*/

});

注：其中，$（document）.ready(){} 函数，是jQuery 中定义好的
目的，是防止文件在未被加载完成前，执行动作响应，造成混乱。

jQuery 选择器

选择器允许我们对 DOM 元素组或单个 DOM 节点进行操作。

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

$(“p”) 选取

元素。

$(“p.intro”) 选取所有 class=“intro” 的

元素。

$(“p#demo”) 选取所有 id=“demo” 的

元素。

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

$("[href]") 选取所有带有 href 属性的元素。

$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。

$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。

$(" [h r e f$ =’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。

jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例
$(“p”).css(“background-color”,“red”);

jQuery事件

结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

**Event 函数绑定函数至	绑定函数至**
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）

那么接下来就是jQuery 效果展示

jQuery 效果

显示与隐藏	hide() show()
淡入淡出、开关及透明度	fadein() fadeOut() fadeToggle() //淡入淡出开关 fadeTo() // 0-1 赋值透明度
滑动方法	fslideDown() slideUp() slideToggle()
动画	animate() : 语法$(selector).animate({params},speed,callback);
停止	stop()
callback()函数	jQuery 效果语句中的callback(): 重点：100%完成后才调用callback

注1
参数可选： callback 参数可设置为函数对象
注2
可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
注3
可以多个jQuery语句在同一行内执行。

未完待续
下节学习 jQuery HTML 和遍历及杂项加油加油你最强！····哈哈

MichaelGzy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript ----JQuery learning nodes part1 20180926

jQuery 是一个 JavaScript 库。需要具备的基础知识在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：HTMLCSSJavaScript （这三块基础）他具体的特性：jQuery 库 - 特性jQuery 库包含以下特性：1.HTML 元素选取2.HTML 元素操作3.CSS 操作4.HTML 事件函数5.JavaScript 特效和动画6....
复制链接

扫一扫