jQuery 基本知识详解
jQuery是什么?
jQuery是javascript编写一个可重用的JavaScript库。
不使用jQuery设置UI文本的JavaScript代码如下:
document.getElementById("txt1").value = "hello";
用jQuery类库后的的JavaScript代码如下:
$("#txt1").val("Hello");
可见,在使用jQuery类库后的JavaScript代码明显简洁了很多,也更符合IT行业特点:短、平、快。
jquery与JavaScript的关系,jQuery会取代JavaScript吗?
JavaScript:是一门Web最流行的脚本语言。
jQuery: 是一个优秀的Javascript框架。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
故,jQuery是并不是要取代的JavaScript;使用JQuery使Web开发变得简单。
如何使用jQuery库?
从jquery.com下载的jquery.js文件(最新的JQuery版本V1.11.1或V2.1.1)。 jQuery的文件规则,如“jquery-1.4.1.j s”,其中1.4.1是JS文件的版本的版本号。
在开发Web程序前,需要包含的JavaScript,如图下面的代码:
<script src="file:///C:/jquery-1.11.1.min.js" type="text/javascript"></script>
CDN(内容分发网络)是什么?
在开发Web页面,考虑最多的问题之一是页面在客户端电脑的响应:时间越短,用户体验越好。
而制约用户体验的关键因素之一是浏览器下载Web文件大小,包括*.html、图片、*.js、*.css等文件。
为了最大化复用和节约带宽,故CDN应运而生:其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。
如何使用jQuery CDN?
推荐使用官方的CDN节点,使用代码如下:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
还有Google提供的jQuery CDN:
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
同时微软也提供了jQuery CDN的节点:
<script type="text/javascript"src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>
如何在CDN网络不可访问情况下,能自动访问网站的jQuery文件?
一般情况下,CDN网络节点是可靠的。
但是偶尔也有失灵的时候,故为了提供双保险,可进行判断网络加载CDN失败,则自动加载网站上的JQuery
, 示例代码如下:
<script type="text/javascript" src="http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') {document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E")); } </script>
同版本的jQuery.js文件和jQuery.min.js有何不同?
相同:
这两个文件提供相同的jQuery的功能,即在函数调用上没有区别。
不同:
jQuery.js文件,适合让程序员阅读,如下图所示:
jQuery.min.js文件,通过压缩和删除所有的空格,以节省带宽和空间,使得文件更小,用于网络传输,不适合程序员阅读。
何时使用jQuery.js,何时使用jQuery.min.js?
开发调试场景下:用jQuery.js文件,因为你想调试,能够看到javascript代码。
生产部署环境下:用jQuery.min.js文件,可减少网络宽度,加快网页加载速度。
jQuery.vsdoc.js文件是什么?
*.vsdoc.js文件是用来在微软的开发环境Visual Studio下使用的,方便得获得jQuery的智能感知,当你输入jQuery函授后,会自动提示函数的类型、函数使用说明、函数参数等等。
如果在VS下用jQuery开发Web程序,则vsdoc.js文件会大大的提高开发效率。
jQuery的基本语法如何解释?
jQuery的语法结构可以分为四部分:
- 默认情况下,所有Jquery的命令开始以一个“$”符号。
- 其次是HTML元素的选择。例如下面是我们通过ID“txt1”选择一个HTML文本框。
- 接着由点(.)分隔。这个操作者将分离的元素和该元素的动作(函数)。
- 最后什么样的函数(动作)。
例如在下面的jQuery代码,我们正在设置的文本值为“Hello world, jQuery”。
在jQuery中,“$”符号代表什么?
在jQuery中,“$”符号是一个jQuery的别名,默认的jQuery类库以$开头。
为何要使用jQuery.noConflict()
有很多类似jQuery一样的类库,如MooTools, Backbone, Sammy, Cappuccino, Knockout 。这些类库中,有的也使用了$符号,如果同时使用,则会导致命名冲突。
为了解决这个冲突,需要用到jQuery.noConflict(),这样就不依赖$这个默认符号了。
例如:
$.noConflict(); jQuery("p").text("I am jquery and I am working…");
或者使用别名代替:
var jq = $.noConflict(); jq("p").text("I am invoked using jquery shortcut…");
请举例说明jQuery的选择器
选择所有HTML的p元素,并隐藏
$("p").hide();
选择ID为Text1的HTML元素,并赋值
$("#Text1").val("Hello");
选择Class为Text1dHTML元素,并赋值
$(".Text1").val("Hello");
在jQuery中,如何使用document.ready?
一次完整的HTML DOM加载完成,会触发HTML的“document.ready”事件,而要通过JQuery访问HTML元素,则需要页面的HTML元素加载完成。
例如:
<script>$("#text1").val("Sometext"); // 报错。因为text1此刻未加载完成,无法访问 </script> </head> <body> <input type="text" id="text1" /> </body>
而在Ready事件中的可访问HTML元素,例子如下:
<script>$(document).ready(function(){$("#text1").val("Sometext");}); </script>
同一个页面中,能否加载多个个document.ready事件?
可以。
如何用jQuery对HTML元素事件进行附加?
下面通过2个例子来说明
例子1,选择所有的button元素,在其click事件中,对所有p元素进行toggle。
$("button").click(function(){ $("p").toggle(); });
例子2,选择ID为p1的元素,在mouseenter事件中,进行alert。
$("#p1").mouseenter(function(){alert("You entered p1!"); });
如何使用jQuery添加样式(style)?
使用例子如下:
$("li").filter(".middle").addClass("selected");
css样式内容如下:
<style>.selected { color:red; } </style>
jQuery 基本知识详解相关推荐
- R语言基础知识详解及概括
R语言基础知识详解及概括 目录 R语言基础知识详解及概括 R数据可视化示例 R语言进行数据创建
- R语言可视化绘图基础知识详解
R语言可视化绘图基础知识详解 图形参数:字体.坐标.颜色.标签等: 图像符号和线条: 文本属性: 图像尺寸及边界: 坐标轴.图例自定义等: 图像的组合: #install.packages(c(&qu ...
- jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的 ...
- python 快速排序_小白入门知识详解:Python实现快速排序的方法(含实例代码)...
前言: 今天为大家带来的内容是:小白入门知识详解:Python实现快速排序的方法(含实例代码)希望通过本文的内容能够对各位有所帮助,喜欢的话记得点赞转发收藏不迷路哦!!! 提示: 这篇文章主要介绍了P ...
- 计算机网络相关知识 参考博客 子网掩码怎么理解 网关及网关的作用 路由器基础知识详解
子网掩码怎么理解 https://blog.csdn.net/farmwang/article/details/64132723 网关及网关的作用 https://blog.csdn.net/zhao ...
- [zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
- linux设置共享权限设置命令,Linux系列知识详解(三)--------- Linux链接命令和权限管理命令...
Linux系列知识详解(三)--------- Linux链接命令和权限管理命令 一:链接命令ln 简介:什么是链接命令?链接命令分为软链接和硬链接.其中软链接产生的新文件是以路径的形式表示原文件,类 ...
- 计算机基础知识预备知识,计算机预备知识详解.ppt
计算机预备知识详解 Visual C++程序设计 Ch3 简单的输入/输出 > 3.1 cin 输入十六进制或八进制数据 例: int i , j , k , l ; cin>>he ...
- Oracle入门(一)之入门级知识详解
转载自 Oracle入门级知识详解 一. Oracle基本介绍 1. 什么时候用Oracle数据库? SQL SERVER 号称百万级数据(一个表的数据),但是其实做多20万条数据 超过20万条数据就 ...
最新文章
- SAP MM 物料库存转固定资产,报错:You cannot post to asset in company code 1900 fiscal year 2021
- iOS10 UI教程视图的边界与视图的框架
- 添加cacti监控_小水谈监控---Cacti安装(监控)
- Linux traceroute路由跟踪
- 职称计算机应用能力考试模拟题,2016年职称计算机考试模拟题
- java cos函数_【Java案例】余弦函数
- .NET-记一次架构优化实战与方案-梳理篇
- C语言返回文件大小的功能(fseek和ftell的使用)
- Linux监控工具介绍系列——smem
- Flask开发微电影网站(十)
- java代码执行 打包jar_Java程序打包成jar文件包并执行的方法
- 使用supervisor / systemctl nginx uwsgi 运行odoo
- 实锤了!Chrome存在严重漏洞!
- android 开启或者隐藏软键盘
- 面向对象的程序设计方法
- ISO50001认证咨询,企业申请ISO50001认证前要先进行哪些初始能源评审
- 详解如何提取Unity素材,源码
- VolTE注册流程0001 融合HLR HSS
- 人工智能杂记 人工智能简史
- word打开html是空白,网页复制到Word之后或者出现空白或者格式变乱该怎么办
热门文章
- iis ftp 隔离账户
- 《Ray Tracing in One Weekend》——Chapter 1: Output an image
- 自定义OutputFormat案例实操
- 大数据分析应用在哪些方面
- Node.js跨域请求解决方案
- 通信线路工程验收规范 gb51171-2016_一级建造师市政涉及到的相关规范汇总
- java 多项式拟合最多的项数_MATLAB绘制带置信区间的拟合曲线
- php 入库乱码,解决php 中文字符入库或显示乱码的简单示例
- socket.io html5 聊天,socket.io实现在线聊天页面
- python中run函数作用_python3多线程中如何改写run()函数?