标签存档: DOM

上传图预览

HTML部分

<img id="pscover" src="__PUBLIC__/Home/images/z_70.jpg" alt="" />
<input type="file" name="scover" id="scover" />
<img id="pqr" src="__PUBLIC__/Home/images/z_70.jpg" alt="" />
<input type="file" name="qr" id="qr"/>

JS部分(注意引入jQ)

window.onload = function(){
	var arr = new Array();
	arr["img[id='pscover']"] = "input[name='scover']";
	arr["img[id='pqr']"] = "input[name='qr']";
	for(var i in arr){
		void function(i){
			$(arr[i]).on("change",function(){
		 		var pic = this.files[0];
		 		pic_preview(pic,i);
			})		
		}(i)	 	
	}
	function pic_preview(pic,obj){
		var f = new FileReader();
		f.readAsDataURL(pic);
		f.onload = function (e){
			$(obj).attr("src",this.result).show();
		}
	}	
}

jquery遍历数组和对象

/*
jquery中的each是用来遍历数组的而map则是用来映射生成一个新数组的
each方法中的return false相当于循环中的break,return true相当于循环中的continue
map方法中的return 相当于个新数组映射成的一个元素,没有return就相当于新的数组中忽略掉了这个元素
*/

/*遍历数组*/
var arr=["a","b","c"];
console.log("js遍历数组1");
for(var i=0;i<arr.length;i++){
	console.log(i+"--"+arr[i]);
}
console.log("js遍历数组2");
for(var i in arr){
	console.log(i+"--"+arr[i]);
}
console.log("jquery.each遍历数组");
$.each(arr,function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.each遍历数组2");
$(arr).each(function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.map遍历数组1,注意这里回调函数中第一个参数是元素,第二个是索引");
$.map(arr,function(i,item){
	console.log(i+"--"+item);
});
console.log("jqery.map遍历数组2");
console.log($(arr).map(function(i,item){
	console.log(i+"--"+item);
}).length);

/*遍历对象*/
var obj={name:"xiaoming",age:20,addr:"tianminglu"};
console.log("js遍历对象")
for(var i in obj){
	console.log(i+"--"+obj[i]);
}

console.log("jquery.each遍历对象1");
$.each(obj,function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.each遍历对象2")
$(obj).each(function(i,item){
	console.log(i+"--"+item);
});
console.log("jquery.map遍历对象1,注意这里回调函数中第一个参数是元素,第二个是索引");

$.map(obj,function(i,item){
	console.log(i+"--"+item);
});	
console.log("jquery.map遍历对象2");
$(obj).map(function(i,item){
	console.log(i+"--"+item);
});

jQuery 元素选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

更多实例

语法 描述 实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

Node.js事件发射器EventEmitter的使用

Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列。

Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.readStream对象会在文件被打开的时候发出一个事件。 所有这些产生事件的对象都是 events.EventEmitter 的实例。

EventEmitter 提供了多个属性,如 on 和 emit。on 函数用于绑定事件函数,emit 属性用于触发一个事件。接下来我们来具体看下 EventEmitter 的属性介绍。

方法

序号 方法 & 描述
1 addListener(event, listener)
为指定事件添加一个监听器到监听器数组的尾部。
2 on(event, listener)
为指定事件注册一个监听器,接受一个字符串 event 和一个回调函数。
server.on('connection', function (stream) {
  console.log('someone connected!');
});
3 once(event, listener)
为指定事件注册一个单次监听器,即 监听器最多只会触发一次,触发后立刻解除该监听器。
server.once('connection', function (stream) {
  console.log('Ah, we have our first user!');
});
4 removeListener(event, listener)

移除指定事件的某个监听器,监听器必须是该事件已经注册过的监听器。

它接受两个参数,第一个是事件名称,第二个是回调函数名称。

var callback = function(stream) {
console.log('someone connected!');};
server.on('connection', callback);
// ...
server.removeListener('connection', callback);
5 removeAllListeners([event])
移除所有事件的所有监听器, 如果指定事件,则移除指定事件的所有监听器。
6 setMaxListeners(n)
默认情况下, EventEmitters 如果你添加的监听器超过 10 个就会输出警告信息。 setMaxListeners 函数用于提高监听器的默认限制的数量。
7 listeners(event)
返回指定事件的监听器数组。
8 emit(event, [arg1], [arg2], […])
按参数的顺序执行每个监听器,如果事件有注册监听返回 true,否则返回 false。

类方法

序号 方法 & 描述
1 listenerCount(emitter, event)
返回指定事件的监听器数量。

事件

序号 事件 & 描述
1 newListener
  • event – 字符串,事件名称

  • listener – 处理事件函数

该事件在添加新监听器时被触发。

2 removeListener
  • event – 字符串,事件名称

  • listener – 处理事件函数

从指定监听器数组中删除一个监听器。需要注意的是,此操作将会改变处于被删监听器之后的那些监听器的索引。

实例

以下实例通过 connection(连接)事件演示了 EventEmitter 类的应用。

创建 main.js 文件,代码如下:

var events = require('events');
var eventEmitter = new events.EventEmitter();// 监听器 #1
var listener1 = function listener1() {
       console.log('监听器 listener1 执行。');
   }// 监听器 #2
var listener2 = function listener2() {
  console.log('监听器 listener2 执行。');
  }// 绑定 connection 事件,处理函数为 listener1 
eventEmitter.addListener('connection', listener1);
// 绑定 connection 事件,处理函数为 listener2
eventEmitter.on('connection', listener2);
var eventListeners = 
    require('events').EventEmitter.listenerCount(eventEmitter,'connection');
console.log(eventListeners + " 个监听器监听连接事件。");
// 处理 connection 事件 
eventEmitter.emit('connection');
// 移除监绑定的 listener1 函数
eventEmitter.removeListener('connection', listener1);
console.log("listener1 不再受监听。");
// 触发连接事件eventEmitter.emit('connection');
eventListeners = 
    require('events').EventEmitter.listenerCount(eventEmitter,'connection');
console.log(eventListeners + " 个监听器监听连接事件。");
console.log("程序执行完毕。");

以上代码,执行结果如下所示:

$ node main.js
2 个监听器监听连接事件。
监听器 listener1 执行。
监听器 listener2 执行。
listener1 不再受监听。
监听器 listener2 执行。
1 个监听器监听连接事件。
程序执行完毕。

JavaScript获取元素及遍历修改元素的方法

viagrasansordonnancefr.com

先看样例代码:

<script language="JavaScript">
//alert(document.getElementById("Od").getElementsByTagName("b")[1].innerHTML);
var tagOd = document.getElementById("Od");
var tagB = tagOd.getElementsByTagName("b");
for(var i = 0;i < tagB.length;i++){
   tagB[i].innerHTML = D[i]!= null?D[i]:"";
}
</script>

因为要选取页面中的元素,所以这段代码必须等页面加载完才能执行,那最好的方法就得把这段代码放到页面的末尾。

代码的意思就是,选取ID值为"Od"元素里边的所有b标签,然后用循环遍历的方式将所有获取的b标签里的html赋予D[i],如果D[i]为空,则将b的html也赋予空文本值。