jQuery在我印象中，就是很多类似$()，然后昨天开始接触了，觉得很和谐，获取元素比JavaScript简单很多，有意思。

一、开始学习jQuery，下载jQuery库的文件

http://jquery.com/download/

jQuery库有两个版本：

我只是使用这个jQuery库，所以我就只下载了生产版本，足以。

二、开始我的第一个Demo

1、html文件

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8"/>

    <title>第一个jQuery-demo</title>

    <link rel="stylesheet" type="text/css" href="style/alice.css">

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

    <script type="text/javascript" src="js/alice.js"></script>

  </head>

  <body>

    <div id="container">

      <h1>第一个jQuery-demo</h1>

      <div class="author">来自风沙渡</div>

      <div class="chapter" id="chapter-1">

        <h2>1、jQuery学习思路</h2>

        <p>选择元素，操作元素</p>

        <p>It was like this.</p>

        <div class="poem">

          <h3 class="poem-title">学习思路</h3>

          <div class="poem-stanza">

            <div>什么是原型</div>

            <div>什么是闭包</div>

            <div>什么是原型链，作用域链</div>

            <div>js只有函数作用域，没有块作用域该怎么理解</div>

          </div>

        </div>

        <div class="poem">

          <h3 class="poem-title">学习思路</h3>

          <div class="poem-stanza">

            <div>什么是原型</div>

            <div>什么是闭包</div>

            <div>什么是原型链，作用域链</div>

            <div>js只有函数作用域，没有块作用域该怎么理解</div>

          </div>

        </div>

      </div>

    </div>

  </body>

</html>

2、alice.css文件

body{

  font:62.5% Arial,Verdana,sans-serif;}

h1{

  font-size:2.5em;

  margin-bottom:;}

h2{

  font-size:1.1em;

  margin-bottom:.5em;}

h3{

  font-size:1.1em;

  margin-bottom:;}

.poem{

  margin:;}

.emphasized{

  font-style:italic;

  border:1px solid #888;

  color:red;

  padding:.5em;}

3、alice.js文件

$(document).ready(function(){

  $('.poem-stanza').addClass('emphasized');

});

/* **********把处理程序写到一个函数中**********/

/*function emphasizePoemStanzas(){

  $('.poem-stanza').addClass('emphasized');             //然后在body里面调用onload="emphasizePoemStanzas()"

}*/

这里写的是给一个小文本添加一个边框样式。

$()

这个$()函数实际上是jQuery对象的一个制造工厂。可以写成jQuery()，$是一种快捷写法。

$(document).ready()
jQuery允许我们使用这个结构预定DOM加载完成后（不必等待图像加载完成）触发的函数调用。

步骤：首先获取类名为“.poem-stanza”的元素

 $('.poem-stanza')

然后，添加一个类名为emphasized

addClass('emphasized')

看到的效果图如下：

体会：获取元素变得好简便，使用JavaScript时，每次都是document.getElementbyId("")等等，要写一大串才可以收手。并且JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6！！！好振奋人心。

使用jQuery的八字真言：“选取元素，对其操作”

三、学与思

1、闭包

在主体函数内定义了一个匿名函数时，就创建了一个闭包。

2、jQuery对象提供的隐式迭代和连缀能力。

举个例子：

隐式迭代：例如要删除三个类名时，一般使用for循环删除，但是jQuery对象提供的隐式迭代，只需要一个语句，就足以把这三个类名remove。

连缀能力：通过一行代码取得多个元素集合并对这些元素集合执行多次操作。

如：$('td:contains("Henry")').parent().find('td:eq(1)').addClass('heightlight')     //先找到包含“Henry”内容的元素，然后再找到它的父亲，找到概预算怒包含的子元素中的第2个单元格，添加类。

3、添加样式的方法

（1）使用CSS选择符

（2）使用Xpath属性选择符

（3）使用自定义的jQuery选择符

记下来，整理、反思、学习的内容

初识jQuery，八字真言“选择元素，对其操作”的更多相关文章

  1. 浏览器console中加入jquery，测试选择元素

    一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...

  2. JQuery官方学习资料（译）：选择元素

    选择元素     JQuery最基本的概念是“选择一些元素并让它们做些什么”.JQuery支持大部分的CSS3的选择器,以及一些非标准的选择器. 通过ID选择元素 $( "#myId&quo ...

  3. 第三章：JavaScript选择元素

    我们使用jQuery时,很常用的套路是“两步”第一步:选取元素第二步:对选中的元素执行需要的操作这一章我们重点研究第一步,如何使用jQuery选取元素以及对选取的结果进行“各种筛选”以满足我们的需求. ...

  4. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  5. 【 D3.js 入门系列 — 2 】 绑定数据和选择元素

    1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...

  6. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  7. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  8. Jquery 系列（2） 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  9. JQuery基础教程：选择元素（中）

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

随机推荐

  1. ACM竞赛常用STL（二）之STL--algorithm

    <algorithm>无疑是STL 中最大的一个头文件,它是由一大堆模板函数组成的.下面列举出<algorithm>中的模板函数: adjacent_find / binary ...

  2. Word中表格内容被遮挡

    RT,输入内容后下面的主任签字会被遮挡,解决办法:选中整个表格右键,表格属性,行高值设置为最小值,然后设置允许跨页断行:有人说右键按内容调整表格也行,没试过............

  3. Torch vs Theano

    Torch vs Theano Recently we took a look at Torch 7 and found its data ingestion facilities less than ...

  4. MIME

    http://www1.huachu.com.cn/read/readbookinfo.asp?sectionid=1000000558 http://www.jb51.net/hack/10623. ...

  5. JavaScript 作用域和变量提升

    本文是这篇文章的简单翻译. 如果按照下面的代码按照JavaScript程序的执行方式执行,alert函数会显示什么? var foo = 1; function bar() { if (!foo) { ...

  6. AD认证

    这两天接触到一个新的知识点,AD验证.什么是AD验证?Active Directory——活动目录,活动目录只是LDAP的一个实现,提供LDAP认证.Radius认证和NTML认证,都是标准认证方式 ...

  7. IPV6 实现

    看代码实现前,请先保证了解ipv6的概念,可以先看ipv6介绍一文.code extract . 在文件 net/ipv6/af_inet6.c 中包含了ipv6协议初始化的主函数. static i ...

  8. Learning WCF Chapter2 Messaging Protocols

    In Chapter 1,you were introduced to fundamental WCF concepts,      在章节1中,学习了wcf中的基础概念including how t ...

  9. 产品设计中先熟练使用铅笔 不要依赖Axure

    在互联网产品领域,Axure已成为产品经理.产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解 ...

  10. 读完了简明Python教程(a bite of Python)

    因为学过C/C++,简明教程里很多共通的地方一看就明白. 明天做书最后的练习. <--! 代码占位 -->