当前位置:  编程技术>WEB前端
本页文章导读:
    ▪jQuery一些注意事项      1.   jQuery变量命名时不能使用“-”,可以使用下划线“_”,例如var click-product;会报出“丢失分号”很奇怪的错误,var click_product;正确,很小的一个细节,但因我曾.........
    ▪jQuery链式操作      两个问题1.jQuery的链式操作是如何实现的?2.为什么要用链式操作?你认为这两个问题哪个好回答一点呢? 链式操作原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最.........
    ▪Frameset之间值传递       1,用 jQuery 获取iframe父頁面元素 $('#dd', window.parent.document).text('control father iframe'); 2,用 jQuery 获取子iframe頁面元素 $("#iframe1").contents().find("#ddd").text("This frame was modified with jQuery!.........

[1]jQuery一些注意事项
    来源:    发布时间: 2013-11-06

1.   jQuery变量命名时不能使用“-”,可以使用下划线“_”,例如var click-product;会报出“丢失分号”很奇怪的错误,var click_product;正确,很小的一个细节,但因我曾经的一时疏忽,造成两天都找不出错来,深刻的教训,所以写下来告诫自己;
2.  一个无序列表 我要点击任意一个列表项目 要求得到该项目的序列
    <ul>
    <li><a href="#nogo"> </a></li>
    <li><a href="#nogo"> </a></li>
    <li><a href="#nogo"> </a></li>
  </ul>
   $(document).ready(function(){
     $("ul li a").click(function(){
         var index=  $( "ul li a" ).index( $(this)[0] );
        });
   });
3.单击页面中的按钮,就会重新加载当前页面
<a href="#" onclick='parent.location="javascript:location.reload()"'></a>
加入你想通过链接打开新窗口,又想重新加载当前页面,这是一个比较好的办法;
4.js的变量可以通过设置cookie来传递给php使用,也可以实现页面之间的传参;

本文链接


    
[2]jQuery链式操作
    来源:    发布时间: 2013-11-06

两个问题

1.jQuery的链式操作是如何实现的?

2.为什么要用链式操作?

你认为这两个问题哪个好回答一点呢?

 

链式操作

原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后

return this

把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了。那么,简单实现一个:

//定义一个JS类
function Demo() {

}
//扩展它的prototype
Demo.prototype ={
setName:function (name) {
this.name = name;
return this;
},
getName:function () {
return this.name;
},
setAge:function (age) {
this.age = age;
return this;
}
};

////工厂函数
function D() {
return new Demo();
}
//去实现可链式的调用
D().setName("CJ").setAge(18).setName();

 

但……为什么要用呢?

一般的解释:

节省代码量,代码看起来更优雅。

例如如果没有链式,那么你可能需要这样写代码:

document.getElementById("ele").dosomething();
document.getElementById("ele").dootherthing();

这个代码中调用了两次document.getElementById来获取DOM树的元素,这样消耗比较大,而且要写两行,而链式只要写一行,节省了代码……

但我们也可以用缓存元素啊。比如:

var ele = document.getElementById("ele");
ele.dosomething();
ele.dootherthing();

而且两行并没有比一行多多少代码,甚至相应的封装反而使得代码更多了。

最糟糕的是所有对象的方法返回的都是对象本身,也就是说没有返回值,这不一定在任何环境下都适合。

举个例子,我们想弄一个超大整数BigInteger(意思是如果用Javascript的Number保存可能会溢出的整数),顺便扩展他的运算方法,会适合用链式操作么?

 例如运算31415926535 * 4 - 271828182,如果设计成链式风格的方法可能会是这样的:

var result = (new BigInteger("31415926535")).multiply(new BigInteger("4")).subtract(new BigInteger("271828182")).val();
console.log("result == " + result);

这看起来似乎也很优雅,但是如果我们想要中间的结果怎么办呢?或许会写成这样:

var bigInteger = new BigInteger("31415926535");
var result1 = bigInteger.multiply(new BigInteger("4")).val();
var result2 = bigInteger.subtract(new BigInteger("271828182")).val();
console.log("result1 == " + result1 + ", result2 == " + result2);

这似乎一点也不优雅了,和不用链式操作没啥不同嘛!

那么如果要求是原来的BigInteger不能改变呢?好吧,链式操作似乎不能满足这个需求了。

那么到底为什么要用链式操作呢?


为了更好的异步体验

Javascript是无阻塞语言,所以他不是没阻塞,而是不能阻塞,所以他需要通过事件来驱动,异步来完成一些本需要阻塞进程的操作。

但是异步编程是一种令人疯狂的东西……运行时候是分离的倒不要紧,但是编写代码时候也是分离的就……

常见的异步编程模型有哪些呢?

  • 回调函数 

所谓的回调函数,意指先在系统的某个地方对函数进行注册,让系统知道这个函数的存在,然后在以后,当某个事件发生时,再调用这个函数对事件进行响应。

function f(num, callback){
if(num<0) {
alert("调用低层函数处理!");
alert("分数不能为负,输入错误!");
}else if(num==0){
alert("调用低层函数处理!");
alert("该学生可能未参加考试!");
}else{
alert("调用高层函数处理!");
setTimeout(function(){callback();}, 1000);
}
}

这里callback则是回调函数。可以发现只有当num为非负数时候callback才会调用。

但是问题,如果我们不看函数内部,我们并不知道callback会几时调用,在什么情况下调用,代码间产生了一定耦合,流程上也会产生一定的混乱。

虽然回调函数是一种简单而易于部署的实现异步的方法,但从编程体验来说它却不够好。

  • 事件监听

也就是采用事件驱动,执行顺序取决于事件顺序。 

function EventTarget(){
this.handlers = {};
}

EventTarget.prototype = {
constructor: EventTarget,
addHandler: function(type, handler){
this.handlers[type] = [];
},
fire: function(){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type instanceof Array]){
var handlers = this.handlers[event.type];
for(var i = 0, len = handlers.length, i < len; i++){
handlers[i](event);
}
}
},
removeHandler: function(type, handler){
if(this.handlers[type] instan
    
[3]Frameset之间值传递
    来源: 互联网  发布时间: 2013-11-06

1,用 jQuery 获取iframe父頁面元素 $('#dd', window.parent.document).text('control father iframe');

2,用 jQuery 获取子iframe頁面元素 $("#iframe1").contents().find("#ddd").text("This frame was modified with jQuery! Yay!!!");

3,用 jQuery 获取frameset頁面元素 $(window.parent.frames["down"].document).find('#dd').text('yes'); $('#dd',window.parent.frames["down"].document)

4, parent.document.getElementById("main").cols="0px,*";控制Frame的大小

作者:jzh440 发表于2013-1-17 13:08:43 原文链接
阅读:0 评论:0 查看评论

    
最新技术文章:
▪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