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. Lucene4.9学习笔记——Lucene建立索引

    基本上创建索引需要三个步骤: 1.创建索引库IndexWriter对象 2.根据文件创建文档Document 3.向索引库中写入文档内容 这其中主要涉及到了IndexWriter(索引的核心组件,用于 ...

  2. 修改phpmyadmin上传文件大小限制

    当你想将SQL语句,导入phpmyadmin 时,发现自己的sql语句文本大小 大于 phpmyadmin的课上传的文本大小. 默认phpmyadmin上传文件大小为2M,如果想要phpmyadmin ...

  3. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  4. Stanford Parser学习入门(2)-命令行运行

    在Stanford parser目录中已经定义了一部分命令行工具以及图形界面,本文将介绍如何在windows使用这些工具进行语法分析,Linux下也有shell可以使用. 关于如何搭建环境请参考上一篇 ...

  5. DJANGO，获取当前用户名，用户组名，用户组权限

    样例,为下一步自定义用户权限作一下代码准备: def get_context_data(self, **kwargs): if self.request.user.is_authenticated() ...

  6. php 文件下载 以及 file_exists找不到文件的解决方案

    链接:<a href="upload/file/download.php?filename=雨人工作室.doc" target="_blank" > ...

  7. ANDROID_MARS学习笔记_S04_008_用Listview、自定义adapter显示返回的微博数据

    一.简介 运行结果 二.代码1.xml(1)activity_main.xml <?xml version="1.0" encoding="utf-8"? ...

  8. vs2005 ，2008,2010中引入app.manifest（即c#程序在win7下以管理员权限运行方法）

    打开VS2005.VS2008.VS2010工程,查看工程文件夹中的Properties文件夹下是否有app.manifest这个文件:如没有,按如下方式创建:鼠标右击工程在菜单中选择“属性”,点击工 ...

  9. poj1286

    等价类计数问题,我们就先构造置换群 显然置换分为两种类型,旋转和翻折 先考虑旋转,每旋转i格子,这个置换的循环数为gcd(i,n); (1<=i<=n) 为什么是这个范围,下篇报告再说 翻 ...

  10. Linux kernel get_prng_bytes函数数字错误漏洞

    漏洞名称: Linux kernel get_prng_bytes函数数字错误漏洞 CNNVD编号: CNNVD-201310-142 发布时间: 2013-10-11 更新时间: 2013-10-1 ...