当前位置:  编程技术>WEB前端
本页文章导读:
    ▪你必须知道的JQuery--选择器      Dom与JQuery<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title ></title>    <style type="text/css">        .myDiv .........
    ▪jquery 调用 click 事件 的 三种 方式      第一种方式： $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二种方式： $('#clickmebind').bind("click", function(){ alert("Hello World bind&q.........
    ▪JavaScript执行环境 + 变量对象 + 作用域链 + 闭包      闭包真的是一个谈烂掉的内容。说到闭包，自然就涉及到执行环境、变量对象以及作用域链。汤姆大叔翻译的《深入理解JavaScript系列》很好，帮我解决了一直以来似懂非懂的很多问题，包括.........

[1]你必须知道的JQuery--选择器
    来源:    发布时间: 2013-11-06

Dom与JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title ></title>
    <style type="text/css">
        .myDiv
        {
            border: 1px solid black;
            padding: 10px ;
            width: 500px ;
            height: 80px ;
        }
    </style >
    <script src="/blog_article/Js/jquery-1.5.1.js" type="text/javascript"></ script>
    <script type="text/javascript">
        //以下两段内容四次显示结果顺序为：
        //a结果：jquery null ===> (图片未出来)b结果：ready嘿嘿嘿 ===>(图片出来之后)c结果：onload嘿嘿嘿====>c中的jquery:onload中的jquery嘿嘿嘿
        //dom方式  为Window对象的onload事件 设置了一个匿名方法
        //c、这个匿名方法 是在页面所有的资源加载完毕后 才被调用
        window.onload = function () {
            //1、dom方式  返回的是dom节点对象
            var div = document.getElementById("imgAfter" );
            alert( "onload" + div.innerHTML);
            //2、Jquery方式  返回的是jquery对象
            alert( "onload中的jquery" + $("#imgAfter" ).html());
        }
        //a、直接写在Script标签中的js代码最先 被浏览器执行 Body还未加载完成  所以显示null
        //alert("onload中的jquery" + $("#imgAfter").html());
        //b、Jquery的ready方法，是当dom树 完全生成后才执行   body中的图片还没有出来就会显示
        //3、Jquery注册事件函数一定要知道格式

    
[2]jquery 调用 click 事件 的 三种 方式
    来源: 互联网  发布时间: 2013-11-06

第一种方式：

$(document).ready(function(){
  $("#clickme").click(function(){
       alert("Hello World  click");
  });

第二种方式：

 $('#clickmebind').bind("click", function(){
  alert("Hello World  bind");
 });


第三种方式：

$('#clickmeon').on('click', function(){
 alert("Hello World  on");
});
});

注意：第三种方式只适用于jquery 1.7以上的版本

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src=/blog_article/"js/jquery-1.6.1.min.js"></script>/index.html
<script type="text/javascript" src=/blog_article/"js/jquery.validate.js"></script>/index.html
<script type="text/javascript" src=/blog_article/"js/jquery.metadata.js"></script>/index.html
<script type="text/javascript" src=/blog_article/"js/messages_zh.js"></script>/index.html
<style type="text/css">
	#frm label.error {
		color: Red;
	}
</style>
</head>
<script type="text/javascript">

$(document).ready(function(){
  $("#clickme").click(function(){
       alert("Hello World  click");
  });
  
  
 $('#clickmebind').bind("click", function(){
  alert("Hello World  bind");
 });

$('#clickmeon').on('click', function(){
 alert("Hello World  on");
});
});

</script>
<body>
<label></label>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
    <input type="text" name="username" id="username" />
</label>
  <p>
    <label>邮       编 :<label></label></label>
    <label>
    <input type="text" name="postcode" id="postcode" />
    <br />
    </label>
  </p>
  <p><label>数      字 : 
    <input type="text" name="number" id="number" />
  </label>
    <br /><label>身份证号：
    <input type="text" name="identifier" id="identifier" />
    </label>
     
  <label>
  <input type="button" name="clickme"  id="clickme"   value="click me" /> 
  </label>
   <label>
  <input type="button" name="clickmebind" id="clickmebind"  value="clickme_bind" />
  </label>
  <label>
  <input type="button" name="clickmeon" id="clickmeon"  value="clickme_on" />
  </label>
  </p>
</form>
</body>
</html>


作者：topwqp 发表于2013-1-31 23:05:31 原文链接
阅读：0 评论：0 查看评论

    
[3]JavaScript执行环境 + 变量对象 + 作用域链 + 闭包
    来源:    发布时间: 2013-11-06

闭包真的是一个谈烂掉的内容。说到闭包，自然就涉及到执行环境、变量对象以及作用域链。汤姆大叔翻译的《深入理解JavaScript系列》很好，帮我解决了一直以来似懂非懂的很多问题，包括闭包。下面就给自己总结一下。包括参考大叔的译文以及《JavaScript高级程序设计（第3版）》，一些例子引用自它们。

附上大叔的链接：《深入理解JavaScript系列》

一、执行环境（或“执行上下文”，意义一样）

首先说下ECMAScript可执行代码的类型包括：全局代码、函数代码、eval()代码。

每当执行流转到可执行代码时，即会进入一个执行环境。活动的执行环境构成一个栈：栈的底部始终是全局环境，顶部是当前活动的执行环境。

❶全局执行环境是最外围的一个执行环境。在浏览器中，全局环境就是window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。

❷每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境被推入栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。某个执行环境中的代码执行完后，该环境销毁，保存在其中的所有变量和函数定义也随之销毁。而全局执行环境直到应用程序退出才会被销毁。

❸eval的执行环境与调用环境的执行环境相同。

二、变量对象

我们知道变量和执行环境有着密切的关系：

var a = 10; // 全局上下文中的变量

(function () {
var b = 20; // function上下文中的局部变量
})();

alert(a); // 10
alert(b); // 全局变量 "b" 没有声明

而且我们也知道在JS里没有块级作用域这一说法，ES规范指出独立作用域只能通过函数（function）代码类型的执行环境创建。也就是说，像for循环并不能创建一个局部环境：

for (var k in {a: 1, b: 2}) {
alert(k);
}

alert(k); // 尽管循环已经结束但变量k依然在当前作用域

既然变量与执行环境相关，那变量自己应该知道它的数据存放在哪里，并知道如何访问。这就引出了“变量对象”这个概念。

每个执行环境都有一个与之关联的变量对象，这个对象存储着在环境中定义的以下内容：

1. 函数的形参
2. var声明的变量
3. 函数声明(不包括函数表达式)

举例来说，用一个普通对象来表示变量对象，它是执行环境的一个属性：

执行环境 = {
变量对象:{
//环境中的数据
}
};

例如：

var a = 10;

function test(x) {
var b = 20;
};

test(30);

对应的变量对象为：

// 全局执行环境的变量对象
全局环境的变量对象= {
a: 10,
test: 指向test()函数
};

// test函数执行环境的变量对象
test函数环境的变量对象 = {
x: 30,
b: 20
};

 那么，不同执行环境中的变量对象的初始化是怎样的呢？下面详细看一下：

❶全局环境中的变量对象

先看下全局对象的明确定义：

全局对象 是在进入任何执行环境之前就已经创建了的对象。
这个对象只存在一份，它的属性在程序中的任何地方都可以访问，全局对象的生命周期终止于程序退出那一刻。

全局对象初始创建阶段，将Math、String等作为自身属性，初始化如下：

globla = {
Math:
String:
...
...
window:globla //引用自身
};

在这里，变量对象就是全局对象自己。

❷函数环境中的变量对象

在函数执行环境中，“活动对象” 扮演着变量对象这个角色。活动对象是在进入函数执行环境时创建的，它通过函数的arguments属性初始化：

活动对象 = {
arguments: //是个对象，包括callee、length等属性
};

理解了变量对象的初始化之后，下面就是关于变量对象的核心了。

环境中的代码，被分为两个阶段来处理：进入执行环境 、执行代码。变量对象的修改变化与这两个阶段紧密相关。

这2个阶段的处理是一般行为，和环境的类型无关（即，在全局环境和函数环境中的表现是一样的）。

①进入环境

当进入执行环境时（代码执行之前），变量对象已包含下列属性（上面有提到）：

①函数的所有形参（如果是在函数执行环境中。因为全局环境没有形参。）
————由 形参名称 和 对应值 组成，作为变量对象的属性。如果没有传递对应的参数，将undefined作为对应值。

②所有函数声明（注意是声明，函数表达式不算。）
————由 函数名 和 对应值（函数对象）组成，作为变量对象的属性。如果变量对象已经存在同名的属性，则覆盖这个属性。

③所有变量声明（由var声明的变量）
————由 变量名 和 对应值（undefined） 组成，作为变量对象的属性。如果变量名与已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性。
————注意：此时的对应值是undefined。

让我们来看一个例子：

function test(a, b) {
alert(c); //undefined
alert(d); //function d() {}
alert(e); //undefined
alert(x); //出错
var c = 10;
function d() {}
var e = function _e() {};
(function x() {});
}

test(10); //

 我们考虑当进入带有参数10的test函数环境时（代码执行之前），活动对象表现如下：


    
最新技术文章:
▪css white-space:nowrap属性用法（可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解（css排版隐藏溢...
▪页面遮罩层，并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框，像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3