jQuery 的运行机制(How jQuery Works)
原文地址:http://learn.jquery.com/about-jquery/how-jquery-works/
linkjQuery: 基础知识
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Demo</title>
- </head>
- <body>
- <a href="http://jquery.com/">jQuery</a>
- <script src="jquery.js"></script>
- <script>
- // Your code goes here.
- </script>
- </body>
- </html>
<script>元素的src属性必须指向jQuery的副本。从jQuery的下载页面下载jQuery的副本然后将jquery.js文件和你的HTML文件存储在同一目录下。
文档就绪后启动代码
- window.onload = function() {
- alert( "welcome" );
- }
然而,直到所有图像(包括横幅广告)都加载完毕,代码才会运行。为了文件一准备好就开始操作代码,jQuery有一个声明被称为ready事件(Ready Event):
- $( document ).ready(function() {
- // Your code here.
- });
例如在ready事件(Ready Event)中,你可以添加一个单击处理程序的链接:
- $( document ).ready(function() {
- $( "a" ).click(function( event ) {
- alert( "Thanks for visiting!" );
- });
- });
保存你的HTML文件,然后在浏览器中重新加载测试页面。点击链接应该先出现一个警示弹出窗口,然后继续按照默认行为导航到 http://jquery.com。
- $( document ).ready(function() {
- $( "a" ).click(function( event ) {
- alert( "As you can see, the link no longer took you to jquery.com" );
- event.preventDefault();
- });
- });
完整例子
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Demo</title>
- </head>
- <body>
- <a href="http://jquery.com/">jQuery</a>
- <script src="jquery.js"></script>
- <script>
- $( document ).ready(function() {
- $( "a" ).click(function( event ) {
- alert( "The link will no longer take you to jquery.com" );
- event.preventDefault();
- });
- });
- </script>
- </body>
- </html>
添加和删除一个HTML类
- <style>
- a.test {
- font-weight: bold;
- }
- </style>
下一步,在脚本中添加 .addClass()声明:
- <span style="font-size:10px;">$( "a" ).addClass( "test" );</span>
现在所有的<a>都是粗体的。
- <span style="font-size:10px;">$( "a" ).removeClass( "test" );</span>
特殊效果
- <span style="font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"></span><pre code_snippet_id="220643" snippet_file_name="blog_20140306_10_1835179" name="code" class="javascript" style="color: rgb(51, 51, 51); line-height: 22.5px;">$( "a" ).click(function( event ) {
- event.preventDefault();
- $( this ).hide( "slow" );
- });</pre>
- <pre></pre>
- <pre></pre>
- <pre></pre>
当点击的时候这个链接缓慢的消失。
回调函数
无参数回调
- $.get( "myhtmlpage.html", myCallBack );
当 $.get() 调用myhtmlpage.html,它会执行myCallBack()函数。
有参数回调
执行带参数的回调函数可能会很棘手。
- $.get( "myhtmlpage.html", myCallBack( param1, param2 ) );
这段函数不会执行。
- $.get( "myhtmlpage.html", function() {
- myCallBack( param1, param2 );
- });
当$.get()方法完成获取网页myhtmlpage.html,它会执行匿名函数,这个匿名函数会执行myCallBack(参数1,参数2)。
jQuery 的运行机制(How jQuery Works)的更多相关文章
- jQuery 插件运行机制和 $冲突解决
1.jQuery.fn.extend(object) 基本插件假设我们要创建一个插件,使一组元素中的文本变为绿色.我们要做的就是添加一个名为greenify的函数, $.fn 将像其他任何jquery ...
- jQuery的内部运行机制和原理
jQuery的优点: jQuery是一个非常优秀的JavaScript库,与Prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从Web开发实用的角度出发,抛除了其它Lib中 ...
- jquery.validate 验证机制
jquery.validate 验证机制 金刚 juqery juqery.validate 在开发系统时,使用了jquery.validate.js 这个验证插件,来校验数据合法性 重点 验证是以i ...
- 深入理解jQuery的Event机制
jQuery的Event模块非常强大.其功能远远比原生事件监听器强大许多,对同一个元素的监听只用一个eventListener,内部则是一个强大的观察者,根据匹配事件类型触发相应回调.jQuery不仅 ...
- 使用反射机制实现jQuery调用ashx类中的指定方法
使用反射机制实现jQuery调用ashx类中的指定方法 近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...
- jquery 使用整理机制
短路表达式 与 多重短路表达式 短路表达式这个应该人所皆知了.在 jQuery 中,大量的使用了短路表达式与多重短路表达式. 短路表达式:作为"&&"和" ...
- jQuery的事件机制和其他知识
jQuery 设置宽度和高度 宽度操作: $(selector).height(); //不带参数表示获取高度 $(selector).height(200); //带参数表示设置高度 宽度操作: ...
- jquery的插件机制
jQuery的内核; (function( window, undefined ) { //这就是jQuery的原型 var jQuery = function( selector, context ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
随机推荐
- Mac下MySQL的卸载
先停止所有mysql有关进程. 打开控制台一次复制下列所有内容: sudo rm /usr/local/mysql sudo rm -rf /usr/local/mysql* sudo rm -rf ...
- node的“宏任务(macro-task)”和“微任务(micro-task)”机制
macrotask 和 microtask 表示异步任务的两种分类.在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首先在 macrotask 的队列(这个队列也被叫做 task que ...
- soj1090.Highways
1090. Highways Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description The island nation of ...
- 连接mysql提示Establishing SSL connection without server's identity verification is not recommended错误
Establishing SSL connection without server's identity verification is not recommended. According to ...
- iOS6下实现滑动返回
[转载请注明出处] 之前在看iOS7滑动返回时,发现了一个iOS6 SDK下的第三方实现,今天偶然间发现了作者在其博客上对该实现的一些心得,读来深觉之前的思考太过肤浅,许多实际的问题没有考虑到.帖子链 ...
- 20155303 2016-2017-2 《Java程序设计》第十周学习总结
20155303 2016-2017-2 <Java程序设计>第十周学习总结 目录 学习内容总结 网络编程 数据库 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考 ...
- oracle数据类型表
set SERVEROUTPUT ON declare v_char ); v_varchar2 ); begin v_char:='java'; v_varchar2:='java'; DBMS_O ...
- mysql中使用日期加减时无法识别年-月格式数据的问题,%Y-%m"这种格式数据
最新做报表统计的时候处理按月统计部分时发现,虽然使用 DATE_FORMAT( time, '%Y-%m' ) 函数可以将日期格式转成年-月,但是如果是参数是年-月格式,即"2018-10& ...
- mysqli链接数据库示例代码
$mysqli = new mysqli("localhost", "数据库用户名", "数据库密码", "数据库名称" ...
- linux文件管理 -> vim编辑总结
vi和vim命令是linux中强大的文本编辑器, 由于Linux系统一切皆文件,而配置一个服务就是在修改其配置文件的参数.vim编辑器是运维工程师必须掌握的一个工具, 没有它很多工作都无法完成.vim ...