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. OC 之 const

    1. 修饰变量 一般设置传参数的时候 若设置为const, 则在调用过程中不允许修改参数值;(readonly) // *前const: 不能通过指针, 改变p指向的值 const int *p = ...

  2. Cocoapod错误 - Xcode6.4

    当我从Xcode 6.3切换到Xcode6.4的时候,因为我是mac上安装了两个不同的版本,现在把Xcode 6.3卸掉了. 现在再次运行pod install命令的时候,提示如下错误:   Upda ...

  3. Metasploit渗透测试魔鬼训练营

    首本中文原创Metasploit渗透测试著作,国内信息安全领域布道者和资深Metasploit渗透测试专家领衔撰写,极具权威性.以实践为导向,既详细讲解了Metasploit渗透测试的技术.流程.方法 ...

  4. Central Europe Regional Contest 2012 Problem c: Chemist’s vows

    字符串处理的题目: 学习了一下string类的一些用法: 这个代码花的时间很长,其实可以更加优化: 代码: #include<iostream> #include<string> ...

  5. webkit javascript

    http://www.infoq.com/cn/news/2013/02/douglas-interview http://blog.csdn.net/horkychen/article/detail ...

  6. SDUT 2352 Run Length Encoding

    点我看题目 题意 :将给定的字符串编码,编码的规则根据两条,1.如果字符串里有连续相等的字符,就变为两个字符,一个是这些连续相同的字符的个数,另一个是这个字符,但是如果数量超过了9个,那就输出9再输出 ...

  7. Python自然语言处理学习笔记(69)

    http://www.cnblogs.com/yuxc/archive/2012/02/09/2344474.html Chapter8    Analyzing Sentence Structure ...

  8. IIS中的Application.CommonAppDataPath

    C:\ProgramData\Microsoft Corporation\Internet Information Services\7.5.7600.16385

  9. for嵌套for ★

    namespace for嵌套for五角星{    class Program    {        static void Main(string[] args)        {         ...

  10. C# Web版报表

    1.添加ReportViewer 2.添加ObjectDataSource 3.须添加一个ScriptManager 4.添加并设计一个报表用数据集 5.设计rdlc报表,数据源选择第4步的数据集 6 ...