快速学习JavaScript第三章

当前位置:

首页 > temp > JavaScript教程 >

快速学习JavaScript第三章

jQuery

jQuery是JavaScript在世界上使用最广泛的一个库。

jQuery为我们解决了一些很重要的问题。jQuery能帮我们干这些事情：
a. 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
b.简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；
c. 轻松实现动画、修改CSS等各种操作。

1.基本选择器
选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')。

(1).按ID查找
如果某个DOM节点有id属性，利用jQuery查找如下：
// 查找<div id="abc">:
var div = $('#abc');

(2).按tag查找
按tag查找只需要写上tag名称就可以了：
var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

(3).按class查找
按class查找注意在class名称前加一个.：
var a = $('.red'); // 所有节点包含class="red"都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
通常很多节点有多个class，我们可以查找同时包含red和green的节点：
var a = $('.red.green'); // 注意没有空格！
// 符合条件的节点：
// <div class="red green">...</div>
// <div class="blue green red">...</div>

(4).按属性查找
一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找：
var email = $('[name=email]'); // 找出<??? name="email">
var a = $('[items="A B"]'); // 找出<??? items="A B">

(5).组合查找
组合查找就是把上述简单选择器组合起来使用。如果我们查找$('[name=email]')，很可能把表单外的<div name="email">也找出来，但我们只希望查找<input>，就可以这么写：
var emailInput = $('input[name=email]'); // 不会找出<div name="email">

2.层级选择器
如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开。例如：

<div class="testing">
       <ul class="lang">
            <li class="lang-javascript">JavaScript</li>
           <li class="lang-python">Python</li>
           <li class="lang-lua">Lua</li>
        </ul>
</div>
要选出JavaScript，可以用层级选择器：
$('ul.lang li.lang-javascript');
$('div.testing li.lang-javascript');
3.查找和过滤
最常见的查找是在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。例如如下的HTML结构：

<ul class="lang">
       <li class="js dy">JavaScript</li>
       <li class="dy">Python</li>
       <li id="swift">Swift</li>
       <li class="dy">Scheme</li>
       <li name="haskell">Haskell</li>
</ul>
用find()查找：
var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

和函数式编程的map、filter类似，jQuery对象也有类似的方法。filter()方法可以过滤掉不符合选择器条件的节点：
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

操作DOM

(1).修改Text和HTML：
jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构：


<ul id="test-ul">
       <li class="js">JavaScript</li>
       <li name="book">Java & JavaScript</li>
</ul>

分别获取文本和HTML：
$('#test-ul li[name=book]').text();// 'Java & JavaScript'
$('#test-ul li[name=book]').html();//'Java& JavaScript'

(2).修改CSS
jQuery对象有“批量操作”的特点，这用于修改CSS很方便。考虑下面的HTML结构：

<ul id="test-css">
       <li class="lang dy"><span>JavaScript</span></li>
       <li class="lang"><span>Java</span></li>
       <li class="lang dy"><span>Python</span></li>
   <li class="lang"><span>Swift</span></li>
   <li class="lang dy"><span>Scheme</span></li>
</ul>

要高亮显示动态语言，调用jQuery对象的css('name', 'value')方法，我们用一行语句实现：
$('#test-cssli.dy>span').css('background-color', '#ffd351').css('color', 'red');

(3).显示和隐藏DOM
考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供show()和hide()方法，我们不用关心它是如何修改display属性的，总之它能正常工作：
var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示

事件

jQuery能够绑定的事件主要包括：
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。

其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。

例子：绑定与取消绑定事件
function hello() {
alert('hello!');
}
a.click(hello); // 绑定事件

// 10秒钟后取消绑定:
setTimeout(function () {
a.off('click', hello);
}, 10000);

Javascript后端开发

以前认为Javascript只能用于前端开发，经过这一个月的学习之后知道它也可用作后端开发。

Node.js简介

简单的说 Node.js 就是运行在服务端的JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2.Node的交互模式和直接运行.js文件的区别:
直接输入node进入交互模式，相当于启动了Node解释器，但是等待你一行一行地输入源代码，每输入一行就执行一行。
直接运行node hello.js文件相当于启动了Node解释器，然后一次性把hello.js文件的源代码给执行了，你是没有机会以交互的方式输入源代码的。

模块

为了编写可维护的代码，我们把很多函数分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较少，很多编程语言都采用这种组织代码的方式。在Node环境中，一个.js文件就称之为一个模块（module）。

编写模块：
//hello.js
var s = 'Hello';
function greet(name) {
console.log(s + ', ' + name + '!');
}
module.exports = greet;//作用是把函数greet作为模块的输出暴露出去，这样其他模块就可以使用greet函数了

调用模块：
//main.js
// 引入hello模块:
var greet = require('./hello');
var yx = 'yuxuan';
greet(yx); // Hello, yuxuan!

一个模块想要对外暴露变量（函数也是变量），可以用module.exports = variable;，一个模块要引用其他模块暴露的变量，用var ref = require('module_name');就拿到了引用模块的变量。

fs模块

Node.js内置的fs模块就是文件系统模块，负责读写文件。和所有其它JavaScript模块不同的是，fs模块同时提供了异步和同步的方法。
(1). 同步读文件步骤:
1. 创建一个文件 input.txt ，内容如下：
你好，我是于禤。
Hello!my name is yuxuan.

2. 创建 main.js 文件, 代码如下：
var fs = require("fs");
var data = fs.readFileSync('input.txt');
console.log(data.toString());
console.log("程序执行结束!");

3. 以上代码执行结果如下：
你好，我是于禤。
Hello!my name is yuxuan.
程序执行结束!
(2). 异步读文件步骤:
1. 创建一个文件 input.txt ，内容如下：
你好，我是于禤。
Hello!my name is yuxuan.

2. 创建 main.js 文件, 代码如下：
var fs = require("fs");
fs.readFile('input.txt', function (err, data) {
if (err) return console.error(err);
console.log(data.toString());
});
console.log("程序执行结束!");

3. 以上代码执行结果如下：
程序执行结束!
你好，我是于禤。
Hello!my name is yuxuan.

(3). 写文件步骤：
1. 创建一个空文件 output.txt

2. 创建 main.js 文件, 代码如下：
    var fs = require('fs');
    var data = 'Hello, Node.js';
    fs.writeFile('output.txt', data, function (err) {
        if (err) {
            console.log(err);
        } else {
            console.log('ok.');
        }
    });

3. 执行结果：空文件 output.txt里的内容变为Hello, Node.js

5. Stream模块
stream是Node.js提供的又一个仅在服务区端可用的模块，目的是支持“流”这种数据结构。
Stream 有四种流类型：
Readable - 可读操作。
Writable - 可写操作。
Duplex - 可读可写操作.
Transform - 操作被写入数据，然后读出结果。

所有的 Stream 对象都是 EventEmitter 的实例。常用的事件有：
      data - 当有数据可读时触发。
end - 没有更多的数据可读时触发。
error - 在接收和写入过程中发生错误时触发。
finish - 所有数据已被写入到底层系统时触发。

   (1). 从流中读取数据：
1. 创建 input.txt 文件，内容如下：
hello world !

2. 创建 main.js 文件, 代码如下：
var fs = require("fs");
var data = '';

// 创建可读流
var readerStream = fs.createReadStream('input.txt');

// 设置编码为 utf8。
readerStream.setEncoding('UTF8');

// 处理流事件 --> data, end, and error
readerStream.on('data', function(chunk) {
data += chunk;
});
readerStream.on('end',function(){
console.log(data);
});

readerStream.on('error', function(err){
console.log(err.stack);
});

console.log("程序执行完毕");

3. 以上代码执行结果如下：
程序执行完毕
hello world !

(2). 写入流：
1. 创建 main.js 文件, 代码如下：
var fs = require("fs");
var data = 'hello world !';

                     // 创建一个可以写入的流，写入到文件 output.txt 中
var writerStream = fs.createWriteStream('output.txt');

// 使用 utf8 编码写入数据
writerStream.write(data,'UTF8');

// 标记文件末尾
writerStream.end();

// 处理流事件 --> data, end, and error
writerStream.on('finish', function() {
console.log("写入完成。");
});

writerStream.on('error', function(err){
console.log(err.stack);
});

console.log("程序执行完毕");

2. 以上程序会将 data 变量的数据写入到 output.txt 文件中。代码执行结果如下：
程序执行完毕
写入完成。

3. 查看 output.txt 文件的内容：
hello world !

http模块

要开发HTTP服务器程序，从头处理TCP连接，解析HTTP是不现实的。这些工作实际上已经由Node.js自带的http模块完成了。应用程序并不直接和HTTP协议打交道，而是操作http模块提供的request和response对象。
实现一个HTTP服务器程序的步骤：
1. 引入requried模块：我们使用 require 指令来载入 http 模块，并将实例化的 HTTP 赋值给变量 http，实例如下:
var http = require("http");

2. 创建服务器，接收请求与响应请求：
// 创建http server，并传入回调函数:
var server = http.createServer(function (request, response) {
// 将HTTP响应200写入response
response.writeHead(200, {'Content-Type': 'text/html'});

// 将HTTP响应的HTML内容写入response:
response.end('<h1>Hello world!</h1>');
});

// 让服务器监听8080端口:
server.listen(8080,'127.0.0.1');

// 终端打印如下信息
console.log('Server is running at http://127.0.0.1:8080/');

3. 在命令提示符下运行该程序，可以看到以下输出：
Server is running at http://127.0.0.1:8080/

4. 不要关闭命令提示符，直接打开浏览器输http://127.0.0.1:8080，即可看到服务器响应的内容：
Hello world!

栏目列表