Files
wahyd4.github.com/2010/11/30/jquery-basic-tutorial/index.html
T

781 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />
<meta name="keywords" content="下载,免费,javascript,jquery," />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />
<meta name="description" content="jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的J&amp;ouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k">
<meta name="keywords" content="下载,免费,javascript,jquery">
<meta property="og:type" content="article">
<meta property="og:title" content="jQuery基础教程">
<meta property="og:url" content="http://toozhao.com/2010/11/30/jquery-basic-tutorial/index.html">
<meta property="og:site_name" content="大染志">
<meta property="og:description" content="jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的J&amp;ouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://toozhao.com/images/2010/11/s3103223-238x300.jpg">
<meta property="og:updated_time" content="2014-07-22T08:41:47.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="jQuery基础教程">
<meta name="twitter:description" content="jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的J&amp;ouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k">
<meta name="twitter:image" content="http://toozhao.com/images/2010/11/s3103223-238x300.jpg">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Gemini',
version: '5.1.2',
sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: true,
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://toozhao.com/2010/11/30/jquery-basic-tutorial/"/>
<title>jQuery基础教程 | 大染志</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5243064-16', 'auto');
ga('send', 'pageview');
</script>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left page-post-detail ">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">大染志</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">想要玩得很 High 的程序员</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2010/11/30/jquery-basic-tutorial/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Junv">
<meta itemprop="description" content="">
<meta itemprop="image" content="http://7ktsrz.com1.z0.glb.clouddn.com/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="大染志">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">jQuery基础教程</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2010-11-30T00:00:00+08:00">
2010-11-30
</time>
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-calendar-check-o"></i>
</span>
<span class="post-meta-item-text">更新于&#58;</span>
<time title="更新于" itemprop="dateModified" datetime="2014-07-22T16:41:47+08:00">
2014-07-22
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/IT书籍/" itemprop="url" rel="index">
<span itemprop="name">IT书籍</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的J&ouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。————————————————————摘自百度百科</p>
<p><a href="/images/2010/11/s3103223.jpg"><img class="size-medium wp-image-2016 aligncenter" title="s3103223" src="/images/2010/11/s3103223-238x300.jpg" alt="" width="238" height="300"></a></p>
<p>我们在制作网页的时候很多大多都会用到javascript,然而jquery是javascript的一个库,它可以让你用很少的代码实现很酷炫的功能。个人觉得像在网页制作方面有所作为的同学们很需要看看啊。看这个还是需要掌握一些javascript基础的。</p>
<p>这本书可以说是jquery的经典著作吧,作者说的是jquery的第一本著作。获得亚马逊的全五星评价。</p>
<p>本书的主要内容是:</p>
<p>以通俗易懂的方式介绍了jQuery的基本概念,主要包括jQuery的选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转和插件等内容,最后几章以实例操作为主,在前面内容的基础上,提出了常见的客户端实际问题并给出了其解决方案。</p>
<p>笔者在网上找了很久找到了电子版本的书籍供大家下载,分别有中文和英文版本。大家可以在学习中文版本的时候试着学习英文版本,对英语能力也是有一定提高的。</p>
<p>在这里提供下载地址给大家吧 <strong><a href="http://u.115.com/file/f185b09f67" target="_blank">中文版</a> <a href="http://u.115.com/file/f19d954d56" target="_blank">英文版</a></strong></p>
<p>如果有能力的同学,也希望可以支持正版事业,附正版购买链接:<a href="http://www.amazon.cn/jQuery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B-Jonathan-Chaffer/dp/B001ASJS2W" target="_blank">点我</a></p>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/下载/" rel="tag"># 下载</a>
<a href="/tags/免费/" rel="tag"># 免费</a>
<a href="/tags/javascript/" rel="tag"># javascript</a>
<a href="/tags/jquery/" rel="tag"># jquery</a>
</div>
<div class="post-nav">
<div class="post-nav-next post-nav-item">
<a href="/2010/11/30/you-are-beautiful/" rel="next" title="you are beautiful.">
<i class="fa fa-chevron-left"></i> you are beautiful.
</a>
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
<a href="/2010/12/04/javascript/" rel="prev" title="javascript 语言精粹 下载">
javascript 语言精粹 下载 <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</footer>
</div>
</article>
<div class="post-spread">
</div>
</div>
</div>
<div class="comments" id="comments">
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<section class="site-overview sidebar-panel sidebar-panel-active">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image"
src="http://7ktsrz.com1.z0.glb.clouddn.com/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim"
alt="Junv" />
<p class="site-author-name" itemprop="name">Junv</p>
<p class="site-description motion-element" itemprop="description">Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography</p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">306</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/index.html">
<span class="site-state-item-count">69</span>
<span class="site-state-item-name">分类</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/index.html">
<span class="site-state-item-count">245</span>
<span class="site-state-item-name">标签</span>
</a>
</div>
</nav>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/wahyd4" target="_blank" title="GitHub">
<i class="fa fa-fw fa-github"></i>
GitHub
</a>
</span>
<span class="links-of-author-item">
<a href="https://www.linkedin.com/in/junwei-zhao-46944557" target="_blank" title="LinkedIn">
<i class="fa fa-fw fa-linkedin"></i>
LinkedIn
</a>
</span>
<span class="links-of-author-item">
<a href="https://stackoverflow.com/users/1140611/junv" target="_blank" title="StackOverflow">
<i class="fa fa-fw fa-stack-overflow"></i>
StackOverflow
</a>
</span>
<span class="links-of-author-item">
<a href="http://weibo.com/wahyd4" target="_blank" title="Weibo">
<i class="fa fa-fw fa-weibo"></i>
Weibo
</a>
</span>
</div>
</section>
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright" >
&copy;
<span itemprop="copyrightYear">2017</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">Junv</span>
</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>
</body>
</html>