jQuery即JavaScript，它是一个.js文件（官网下载）。使用时须将jQuery库的声明写在HTML文档的head标签里。

章节内容：

1、选择DOM节点 2、延迟的JavaScript的执行 3、把CSS应用到元素上 4、选择一系列非标准的HTML元素 5、计数DOM节点和显示其文本 

6、快速创建DOM节点

1、选择DOM节点(常用)

（1）$(‘p’)——访问HTML页面文档中所有的段落元素；

（2）$(‘#A’)——访问HTML页面文档中id=A的元素；（id号唯一）

（3）$(‘.b’)——访问HTML页面文档中所有class = b的元素；

2、延迟的JavaScript的执行

HTML文档head部分中引用了JavaScript文件。一旦浏览器发现脚本行就会立即执行该JavaScript文件，但此时HTML页面文档还没有完全加载完（body部分未加载），此时需要用到延迟JavaScript代码的执行直到HTML页面加载完。（其实也可以将JavaScript放在body的尾部这样就不用延迟执行）

用来通知JavaScript代码DOM准备完毕的方法是$(document).ready()。在DOM记载完毕后，此方法执行函数调用（函数作为它的参数）。

$(document).ready(function(){

})

函数体在DOM加载完后被调用，函数体被作为参数表示不希望该函数被第二次执行，即只执行一次。相当于$(document).ready()给文档注册了一个ready(就绪)事件。在JavaScript就是window.onload=function()一样的意思。

3、把CSS应用到元素上

addClass()方法用于应用一个CSS类到网页的选中部分。它包含CSS类的名称作为方法的参数(注意参数打引号，作为字符传，而不是变量)。

一个CSS类：

.highlight{

font-style:italic;

background-color:#0f0;

}

应用CSS类的Jquery代码：

$(‘div’).addClass(‘highlight’);

$(‘body’).addClass(‘highlight’);

4、选择一系列非标准的HTML元素

（1）$(‘span:contains(Life)’)——选择包含单词Life的Span元素；

（2）$(‘div:odd’)——选择偶数div元素，从0开始计数。

（3）$(‘div:even’)——选择奇数div元素，从0开始计数。

（4）$(‘p:eq(1)’)——选择第二个段落元素，从0开始计数。

5、计数DOM节点和显示其文本

在DOM中，网页被表示为一个根节点（parent）和一些分支节点（children）的树结构形式，其中每一个HTML元素表示一个节点。

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

<script type="text/javascript">

$(document).ready(function(){

var $nodes = $('#parent').children();

alert("Number of nodes is" + $nodes.length);

var txt = "";

$('#parent').children().each(function(){

txt += $(this).text();

});

alert(txt);

});

</script>

</head>

<body>

<div id="parent">

<div id="child1">child1</div>

<div id="child2">child2</div>

<div id="child3">child3</div>

</div>

以上代码访问HTML页面的id = parent的DIV元素的子节点，并将它的子节点存储在变量$nodes中，用alert显示子节点数组长度。然后用each()方法逐个访问其子节点（遍历数组$nodes），使用text()方法返回每个子节点的文本，并连接成一个字符串，最后用alert显示出来。

几个方法讲解：

①children()是遍历树的方法，它搜索指点元素的直接子节点，并返回一个新的jQuery对象。此方法仅在DOM树中向下遍历一层。

②each()方法用于循环访问包装集合中的每个元素。它包含一个迭代函数，在迭代函数中编写代码，应用于集合的每个单独元素。

③text()方法是jQuery对象的一个方法，用于访问指定元素的文本内容。

④parent()方法是遍历树的方法，用于搜索每个指定元素的直接亲元素（父元素），并返回一个新的jQuery对象。此方法仅在DOM树中向上遍历一层。

⑤html()方法从指定元素中的第一个元素获取HTML内容，以字符串的形式返回HTML内容，与text()方法不同，text()方法只返回文本。如HTML页面有一个段落元素：<p>我是段落元素<span>我是段落元素里的span元素</span></p>；

此时jQuery代码：$(‘p’).html()；调用html方法，返回的是“我是段落元素<span>我是段落元素里的span元素</span>”

⑥text(text) ，html(html)；即带参数的text()方法和html()方法可以用于改变DOM节点的内容。其中html(html)的参数html可以包含html标记；

6、快速创建DOM节点

这里列举三个创建DOM节点的方法：prepend()、prependTo()和clone()方法。（还有其他的一些方法，如:append()、appendTo()、before()、insertBefore()等）

HTML页面代码：

<body>

<p>我是段落元素<span>我是段落元素里的span元素</span></p>

<h2>我是一个h2元素</h2>

</body>

页面显示效果：

（1）predend()方法在指点元素前插入指定的内容，并返回一个jQuery对象。内容可以是文本、HMTL元素或jQuery对象。在段落元素之前插入一个h2元素，其文本为“我是插入元素”。加入jQuery代码：

$(‘p’).prepend(‘<h2>我是插入元素</h2>’);

页面显示效果：

（2）prependTo()方法在指定目标之前插入指定元素（和prepend方法类似，就是写法不同）。

实现上面功能的prependTo方法示例：$(‘<h2>我是插入元素</h2>’).prependTo(‘p’); 指定目标在后，插入元素在前；（用英语语法来理解）。：）

（3）clone()方法：为了快速添加DOM节点（该节点是已有元素的副本）时使用clone()方法。复制一个h2元素，在段落元素之前插入该段元素；

$(‘h2’).clone().prependTo(‘p’);

注意：如果使用prepend方法插入DOM元素，则插入内容和目标元素会被合并，这就是说如果把样式应用于段落元素，则该样式也会被应用于之前插入的h2元素。现在拿上面的HTML页面元素做验证；

编写一个CSS类：

.highlight{

background-color:#0f0;

font-style:italic;

}

HTML页面代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

<meta charset="utf-8">

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

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

<script type="text/javascript">

$(document).ready(function(){

$('p').prepend('<h2>我是插入元素</h2>');                    //在段落元素前插入h2元素

$('p').addClass('highlight');                                 //为段落元素添加样式

});

</script>

</head>

<body>

<p>我是段落元素<span>我是段落元素里的span元素</span></p>

<h2>我是一个h2元素</h2>

</body>

</html>

页面显示效果：

可见，样式也被应用于插入的h2元素。

第一章 jQuery基础方法回顾的更多相关文章

  1. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  2. 第一章jQuery基础

    一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype之后又一个优秀的java ...

  3. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  4. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  5. 第一章 –– Java基础语法

    第一章 –– Java基础语法 span::selection, .CodeMirror-line > span > span::selection { background: #d7d4 ...

  6. 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础

    第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1    初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...

  7. [Python笔记][第一章Python基础]

    2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...

  8. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  9. UNIX环境高级编程--第一章 UNIX基础知识

    第一章 UNIX基础知识 1.2 UNIX体系结构   从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...

随机推荐

  1. BufferedReader 中的 readLine()

    BufferedReader中的readLine()方法,API解释如下: Reads a line of text. A line is considered to be terminated by ...

  2. 25. vm安装redhat步骤

    详见:http://jingyan.baidu.com/article/49ad8bce532c525834d8fa19.html

  3. ADOConnectoin事务和存储过程中的Begin tran commit

    一直以来我都是在存储过程中使用事务 create proc usp_proc begin begin  tran ..... commit end 那么我现在问一个问题,如果在BCB的代码中写这样的代 ...

  4. Socket为什么要翻译成套接字

    作者:陈振玥链接:https://www.zhihu.com/question/21383903/answer/64103663来源:知乎著作权归作者所有,转载请联系作者获得授权. 作为一条刻(wu) ...

  5. Ajax的基本使用

    AJAX AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = ...

  6. 一个简单的零配置命令行HTTP服务器

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  7. 无向图的DFS遍历（方法之一）

    如果看不懂辅助解释在后面第点 1.录入方式: 输入 u - v  表示一边的2个端点 2.存储结构 struct edge { int from; int to; int next; } e[MAXN ...

  8. windows server 无人值守安装

    使用 answer file:AutoUnattend.xml 来无人值守安装,到了选系统这步 还是要手动选择一个系统,这是为什么?怎么设置可以默认进入GUI的系统进行安装啊?

  9. easyui combobox点击输入框弹出下拉框

    由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...

  10. IOS系列swift语言之课时五

    过了几天没来理博客了,这次我们要讲的有:类,属性,初始化init(),初始化器,构造器等 直接刷代码了....... //: Playground - noun: a place where peop ...