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. [python][flask][flask-SQLAlchemy]关于flask-SQLAlchemy的初级使用教程

    鉴于网上关于flask-SQLAlchemy的实例使用教程参差不齐,于此写下工作学习过程中的使用过程,以便分享交流. 对于python关于flask有一定了解的高端玩家来说,请转至flask官方开发文 ...

  2. win8 开启wifi

    1,以管理员身份运行命令提示符,输入命令 netsh wlan set hostednetwork mode=allow ssid=networkname key=password后回车 其中ssid ...

  3. C语言-06复杂数据类型-03指针

    指针变量的定义 变量类型 *变量名; #include <stdio.h> int main() { // 指针就一个作用:能够根据一个地址值,访问对应的存储空间 // 指针变量p前面的i ...

  4. IT从业人员必看的十几个论坛

    IT方面的论坛太多了,有综合,有专业,有行业,在各个论坛里混了几年,体会颇深,以前是论坛哪里人多,往哪里去,新浪论坛,网易是经常去的,人多啊,好几十万,去了以后才发现没有意思,没有共同的语言,于是逛专 ...

  5. C++ 11 笔记 （一） ： lambda

    时至今日都是我咎由自取,错就是错,与任何人无关.掉进C++98的各种坑里无法自拔的抖M感,让我选择了华丽丽的无视C++11,导致今日面对开源的代码到各种看不懂的地步,一入C++深似海,我今天愿意承担一 ...

  6. POJ 1716 Integer Intervals 差分约束

    题目:http://poj.org/problem?id=1716 #include <stdio.h> #include <string.h> #include <ve ...

  7. MINA源码分析

    IoService通过构造函数的形式成为了IoSession一部分,IoSession是通过IoAcceptor以及connector创建出来,这二者其实就是IoService,所以对于IoSessi ...

  8. avalon 中require.config源码分析

    /********************************************************************* * 配置系统 在系统运行的开始就需要读取系统中requir ...

  9. C# 的 WCF文章 消息契约（Message Contract）在流（Stream ）传输大文件中的应用

    我也遇到同样问题,所以抄下做MARK http://www.cnblogs.com/lmjq/archive/2011/07/19/2110319.html 刚做完一个binding为netTcpBi ...

  10. Linux的线程同步对象：互斥量Mutex，读写锁，条件变量

        进程是Linux资源分配的对象,Linux会为进程分配虚拟内存(4G)和文件句柄等 资源,是一个静态的概念.线程是CPU调度的对象,是一个动态的概念.一个进程之中至少包含有一个或者多个线程.这 ...