VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > 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')来选择,层级之间用空格隔开。例如:
<!-- HTML结构 -->
<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结构:
<!-- 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
 
  1. 操作DOM
(1).修改Text和HTML:
jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本,例如,如下的HTML结构:
 
<!-- HTML结构 -->
<ul id="test-ul">
       <li class="js">JavaScript</li>
       <li name="book">Java &amp; JavaScript</li>
</ul>
 
分别获取文本和HTML:
$('#test-ul li[name=book]').text();// 'Java & JavaScript'
$('#test-ul li[name=book]').html();//'Java&amp; JavaScript'
 
(2).修改CSS
jQuery对象有“批量操作”的特点,这用于修改CSS很方便。  考虑下面的HTML结构:
<!-- 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(); // 显示
 
  1. 事件
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只能用于前端开发,经过这一个月的学习之后知道它也可用作后端开发。
 
  1. 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文件的源代码给执行了,你是没有机会以交互的方式输入源代码的。
 
  1. 模块
为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在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');就拿到了引用模块的变量。
 
  1. 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 !
 
  1. 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!
 

相关教程