jQuery学习笔记1——基础1

按照计划继续前进。

本周可能会很忙,周六需要写各种作业,以及学习jquery,因为周日要去上一整天的泡芙制作课。


jQuery简介(摘自百度百科)

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

简单来说,jQuery就是JS的一个函数库,把一些常用的操作都包含在了一起。它可以做到对HTML元素的选取和操作,对CSS的操作;支持HTML事件函数,以及JS特效动画,还有HTML DOM的遍历和修改;最后是AJAX和Utilties。

jQuery的安装与应用

安装很简单,在http://jquery.com/download/右击Download the uncompressed, development jQuery选择链接另存为即可。它会给你两个选项,一个是未压缩版本,比较适合开发,一个是压缩版本,节省资源,比较适合正式发布。

这里简单提一下这个压缩的问题。仔细观察,会发现很多网站上的js代码是只有一行的。但是它仍然可以正常运行。简单补充一下吧,将js压缩成一行是有它的好处的。虽然可读性几乎为0,但是它在网站后台加载的时候会让服务器少加载很多资源,能加快网络传输,减少服务器的流量负担。同时在安全性上考虑,压成一行的代码几乎不可读,也减少了黑客检索js漏洞并进行攻击的可能性,增加分析难度(不过现在好像有很多手段支持让一行的js代码格式化成可读版本。。)。

写成一行的js和普通的相比,少了许多换行符。例如,假定某个js有10000行,压缩后,以linux的换行符\n计算,可以减少10KB大小的文件体积。别看这点体积好像不显眼,访问的人一旦多了,还是非常可观的。倘若有100000个人访问(请求这个文件),可以减少服务器1GB的流量。如果是Windows格式的换行符,由于Windows格式的换行包含两个字符,节省的流量还要翻倍。

添加jQuery库也很简单,使用script标签把刚才下载的文件链接进去就好。

如果不想使用本地的jQuery库,还能使用微软或者谷歌提供的js。

1
2
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

这是微软提供的jQuery,第一条代码加载未压缩的版本,第二条代码加载压缩后的版本。使用这样的代码是有好处的:许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。(摘自w3school)

jQuery语法基础

语法上,jQuery大体分为两部分,一部分称为query,查询,或者说叫做获取HTML元素,另一部分称为action,又名动作,操作。

一般的形式:$(selector).action()。$符号定义使用jQuery,selector可以查询,查找HTML元素,action()是对查询的元素进行的操作。

示例:

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有段落

$(“.test”).hide() - 隐藏所有 class=”test” 的所有元素

$(“#test”).hide() - 隐藏所有 id=”test” 的元素

需要注意一个文档就绪函数,这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。比如试图隐藏一个不存在的元素,或者获得未完全加载的图像的大小。

1
2
3
4
5
$(document).ready(function(){

--- jQuery functions go here ----

});

简单的示例

http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_this

1
2
3
4
5
<html>

undefined

</html>

它运用hide操作将当前元素隐藏。


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:jQuery学习笔记1——基础1

文章作者:Shawn Zhou

发布时间:2019年04月12日 - 20:04

最后更新:2019年04月14日 - 16:04

原始链接:http://shawnzhou.xyz/2019/04/12/19-04-12-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%