jQuery参考实例 1.13 复制DOM元素...-键盘事件kedown,keypress,keyup区别...-ligerui 提交反馈

当前位置: 编程技术>WEB前端

本页文章导读:

▪jQuery参考实例 1.13 复制DOM元素原文： http://www.lifelaf.com/blog/?p=229 本文翻译自jQuery Cookbook (O’Reilly 2009) 1.13 Cloning DOM Elements 需求复制DOM树中的一部分解决方案 jQuery提供了一个叫做clone()的方法来复制DOM元素。该方法的使用.........

▪键盘事件kedown,keypress,keyup区别按下键盘时会触发键盘事件，顺序为keydown -> keypress ->keyup。1、keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事.........

▪ligerui 提交反馈欢迎大家反馈，可以用下面的格式跟帖：UI版本：1.1.9浏览器：IE9.0jQuery版本：1.3.2BUG描述：ligerTab iframe在关闭时不释放内存上报人：TSN解决方案：。。。本文链接......

[1]jQuery参考实例 1.13 复制DOM元素

来源: 互联网发布时间: 2013-11-19

原文：

http://www.lifelaf.com/blog/?p=229

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.13 Cloning DOM Elements

需求

复制DOM树中的一部分

解决方案

jQuery提供了一个叫做clone()的方法来复制DOM元素。该方法的使用也是很直截明了的：只需在选中的DOM对象上调用clone()方法即可。clone()方法执行后，返回的是原来那个DOM对象的复制品。在下面的代码中，<ul>元素先被复制一次，然后其复制品用appendTo()方法插入到DOM树中。在这里，与原来的<ul>元素一模一样的<ul>被加入到页面中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
  </ul>
  <script type="text/JavaScript"
    src=/blog_article/"http_/ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>/index.html
  <script type="text/JavaScript">
    jQuery('ul').clone().appendTo('body');
  </script>
</body>
</html>

讨论

当需要在DOM树中移动某些DOM片段的时候，clone()方法非常好用，尤其是当这些DOM片段的事件监听逻辑也需要被复制的时候。来看一下下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <ul id="a">
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
  </ul>
  <ul id="b"></ul>
  <script type="text/JavaScript"
    src=/blog_article/"http_/ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>/index.html
  <script type="text/JavaScript">
    jQuery('ul#a li')
      .click(function(){alert('List Item Clicked')})
    .parent()
      .clone(true)
        .find('li')
        .appendTo('#b')
     .end()
   .end()
   .remove();
</script>
</body>
</html>

如果在浏览器中运行，上面的代码会复制页面中的<li>元素，并将复制出来的<li>元素（连同其事件响应机制）插入到空的<ul>元素中，最后移除之前被复制的那个<ul>元素。

对于刚接触jQuery的开发人员来说，上面的代码不那么好懂。让我们一步一步的来看一下上面的代码到底是怎么运行的：

jQuery(‘ul#a li’) = 选择id值为a的<ul>元素，然后选择该<ul>元素内所有的<li>元素。

.click(function(){alert(‘List Item Clicked’)}) = 对每个<li>元素，监听其鼠标点击事件。

.parent() = 以之前选择的<li>元素为起点，遍历DOM树来选中它们的父元素<ul>。

.clone(true) = 复制该<ul>元素及其所有的子元素。通过向clone()方法传入布尔值，可以复制这些元素上的事件监听机制

.find(‘li’) = 在复制出来的元素集中查找li元素，并选中它们。

.appendTo(‘#b’) = 将这些复制出来的li元素插入到id值为b的<ul>元素中。

.end() = 撤销最近一次的元素集更改操作，返回之前选中的元素集 — 复制出来的<ul>元素。

.end() = 再一次撤销之前的元素集更改操作，返回初始的那个被复制的<ul>元素。

.remove() = 移除该<ul>元素

很明显，对于复杂的jQuery操作语句，理解DOM元素的选择和更改操作的撤销，是非常重要的。

作者：enzymer 发表于2013-3-28 21:48:44 原文链接

阅读：12 评论：0 查看评论

[2]键盘事件kedown,keypress,keyup区别

来源: 发布时间: 2013-11-19

按下键盘时会触发键盘事件，顺序为keydown -> keypress ->keyup。

1、keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
console.log('onkeyup ' + this.value);
}
</script>

在文本框中敲入数字1，输出结果为：

onkeydown default
onkeypress default
onkeyup default1

2、keypress事件与keydown和keyup的主要区别

1）对中文输入法支持不好，无法响应中文输入

2）无法响应系统功能键（如delete，backspace）

3）由于前面两个限制，keyCode与keydown和keyup不是很一直

3、在keyup事件中无法阻止浏览器默认事件，因为在keypress时，浏览器默认行为已经完成，即将文字输入文本框（尽管这时还没显示），这个时候不管是preventDefault还是return false，都不能阻止在文本框中输入文字的行为，如要阻止在文本框中输入文字，必须在keydown或keypress时阻止

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
//return false;
console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
//return false;
console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
return false;
console.log('onkeyup ' + this.value);
}
</script>

结果为keydown、keypress事件中return false文本框无法输入文字，在keyup事件中return false文本框可以输入文字

本文链接

[3]ligerui 提交反馈

来源: 发布时间: 2013-11-19

欢迎大家反馈，可以用下面的格式跟帖：

UI版本：1.1.9
浏览器：IE9.0
jQuery版本：1.3.2
BUG描述：ligerTab iframe在关闭时不释放内存
上报人：TSN
解决方案：。。。

本文链接