标签存档: JavaScript - 第2页

jQuery 元素选择器

作者: 日期: 2018年4月13日 1 条评论

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的使用

作者: 日期: 2017年11月30日 没有评论

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 个监听器监听连接事件。
程序执行完毕。

Node.js 回调函数

作者: 日期: 2017年11月28日 没有评论

Node.js 异步编程的直接体现就是回调。

异步编程依托于回调来实现，但不能说使用了回调后程序就异步化了。

回调函数在完成任务后就会被调用，Node 使用了大量的回调函数，Node 所有 API 都支持回调函数。

例如，我们可以一边读取文件，一边执行其他命令，在文件读取完成后，我们将文件内容作为回调函数的参数返回。这样在执行代码时就没有阻塞或等待文件 I/O 操作。这就大大提高了 Node.js 的性能，可以处理大量的并发请求。

阻塞代码实例:

创建一个文件 input.txt ，内容如下：

今天自学Node.js

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

var fs = require("fs");
var data = fs.readFileSync('input.txt');
console.log(data.toString());
console.log("程序执行结束!");

以上代码执行结果如下：

$ node main.js
今天自学Node.js
程序执行结束!

非阻塞代码实例:

创建 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("程序执行结束!");

以上代码执行结果如下：

$ node main.js
今天自学Node.js
程序执行结束!

以上两个实例我们了解了阻塞与非阻塞调用的不同。第一个实例在文件读取完后才执行完程序。 第二个实例我们不需要等待文件读取完，这样就可以在读取文件时同时执行接下来的代码，大大提高了程序的性能。

因此，阻塞是按顺序执行的，而非阻塞是不需要按顺序的，所以如果需要处理回调函数的参数，我们就需要写在回调函数内。

JS热键键值及应用

作者: 日期: 2017年11月16日 没有评论

字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 – 109 F6 117 F12 123
6 102 . 110
7 103 / 111

控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 /| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up A

应用:屏蔽按键或按键组合

function Key Down(){    
  if ((window.event.altKey)&& 
      ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ← 
       (window.event.keyCode==39))){  //屏蔽 Alt+ 方向键 → 
     alert("不准你使用ALT+方向键前进或后退网页！"); 
     event.returnValue=false; 
     } 
  if ((event.keyCode==8)||            //屏蔽退格删除键 
      (event.keyCode==116)){          //屏蔽 F5 刷新键 
     event.keyCode=0; 
     event.returnValue=false; 
     } 
  if ((event.ctrlKey)&&(event.keyCode==78)){   //屏蔽 Ctrl+n 
     event.returnValue=false; 
     } 
  if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10 
     event.returnValue=false; 
     } 
  if (event.keyCode==122){ //屏蔽 F11 
     event.returnValue=false; 
     } 
  }function Key Down(){    
  if ((window.event.altKey)&& 
      ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ← 
       (window.event.keyCode==39))){  //屏蔽 Alt+ 方向键 → 
     alert("不准你使用ALT+方向键前进或后退网页！"); 
     event.returnValue=false; 
     } 
  if ((event.keyCode==8)||            //屏蔽退格删除键 
      (event.keyCode==116)){          //屏蔽 F5 刷新键 
     event.keyCode=0; 
     event.returnValue=false; 
     } 
  if ((event.ctrlKey)&&(event.keyCode==78)){   //屏蔽 Ctrl+n 
     event.returnValue=false; 
     } 
  if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10 
     event.returnValue=false; 
     } 
  if (event.keyCode==122){ //屏蔽 F11 
     event.returnValue=false; 
     } 
  }

用input-radio选择性切换不同品牌的地图

作者: 日期: 2017年6月7日 没有评论

        先看index.html文件的代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
    <!-- <script src="js/ol.js" type="text/javascript"></script> -->
    <script src="js/ol-debug.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>Map Test</h2>
    <div id="map">
        <nav id="layers">
            <ul>
                <li><input type="radio" name="layer" value="mapquest"/>MapQuest OSM</li>
                <li><input type="radio" name="layer" value="bingmaps"/>Bing Maps</li>
                <li><input type="radio" name="layer" value="esri"/>ESRI Maps</li>
                <li><input type="radio" name="layer" value="stamen"/>Stamen</li>
            </ul>
        </nav>
</div>
  </body>
</html>

        在ul标签中加入mapquest bingmaps esri stamen.与index.html相应的CSS代码：

.map {
    position:absolute;
    height: 600px;
    width: 100%;
    border: 1px red solid; 
  }
#layers {
	position:absolute;
	z-index:2;
	background-color:rgba(0,60,136,0.7);
	color:#fff;
	padding:8x 12px;
	font-size:12px;
	right:25px;
	top:5px;
        border-radius:8px;	 
  }
#layers > ul{
	list-style:none;
}
#layers > ul > li{
	padding: 2px 15px 1px 2px;
	margin-left:-25px;
}

        给#layers中的li标签加载'change'事件：

	$("#layers input[type=radio]").live('change',function(){
		var layer = $(this).val();
		map.getLayers().getArray().forEach(function(e){
			var name = e.get('name');
			e.setVisible(name == layer);
		});		
	})

        如果从OSM切换到bingmaps，则需要申请一个调用bingmaps的key，bingmaps key的申请地址：://www.bingmapsportal.com，同样切换到baidumaps或googlemaps等等都需要相应的key。 

	var mapquest = new ol.layer.Tile({
		source: new ol.source.OSM(),
		visible:true,
		name:'mapquest'	
	});	
	var bingmaps = new ol.layer.Tile({
		source: new ol.source.BingMaps({
			key:'AmqG5Tq1jbzjo1jTHyUyYqtAwfVf1OotyTiZaCU-AmDskeVi56TTKJ010u9g4j7O',
			imagerySet:'AerialWithLabels'
		}),
		visible:false,
		name:'bingmaps'	
	});

        看效果地址(由于另外两幅地图没有申请key，所以暂时不可见)：地图切换