请教 jQuery 的问题 本帖最后由 zkylm 于 2011-11-07 09:41:09 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 this[i].innerHTML = a;运行到这就出错了 尼玛的 , 我已经解决了 , jQuery 的作者果然是又贱又绝 ... 想知道是什么问题的话 , 我把代码发上来 , 可以自由的选择 $('div') $('div').find('ul').find('li') 等等连续的 FIND , 还写了个 EACH 的操作 , 但没写 callback , .each 之后可以改变选择内容的值 , 终于解决了 , 尼玛 jQuery 的作者果然是贱到不行了 楼主先学好jquery才骂作者吧。。东西没学好就骂,,不懂什么逻辑 我说明一下问题 , 但是好友些问题能期待高人解惑 .产生 this[i] undefind 的原因是 jQuery 的 find 是会将 getElementsByTagName 所获得的东西使用Array.prototype.slice ( 要这么用因为它得 ret 是对象 , 而不是数组 , ret 为 this.constructor() , 说白了也就是 jQuery 对象 . ) 将不必要的一些方法去掉 , 因为 javascript 的DOM 获得之后不仅获得了 HTML 对象当然还有些可操作的方法 , 所以这里只保留 HTML 对象就可以了 .截取之后将其加入ret , 前面括号中说过 ret 是等于从新声明了一份 jQuery , 而这里的var ret = this.constructor() 里面是空的 ... 根据我的选择器this.context = this[0] = selector;this.length = 1;自然 , ret 里有 length .. 但是 undefind 因为我啥也没给他 .我回头看一遍源代码才知道 , 选择器里一开始就有一个判断 :if(!selector){ return this;}.......................................................我现在才知道 , 这个判断的作用不仅仅是让使用者可以运行$.extend$.ajax 之类的功能 , 还有对jQuery.fn.pushStack总有对应 ... 说不定这小小的一个判断还对其他地方有用 所以感叹它代码写的很严谨而已 , 我绝不是骂 , 不能误解我 . 我已经能正确取到 HTML OBJECT 了 , 效果也是对的 .我的 .each 很简单 , 对这些 HTML OBJECT 循环赋值 .可是有个问题 .我还是将 ret 内容打印在页面上的 , 如果选择 DIV ( $('div').each('kk') ) 的时候 , 能正确的排列出对象的顺序 :0 : [object HTMLDivElement]1 : [object HTMLDivElement]2 : [object HTMLDivElement]3 : [object HTMLDivElement]4 : [object HTMLDivElement]length : 5像这样 , 可是如果选择 li ( $('div').find('li').each('kk') ) 的时候 , 虽说能够选择到所有 LI , 也正确针对 LI 赋值了 , 可问题是对象排列顺序乱了 , 我调试了一下 jQuery , 发现是整齐的 . 错误的顺序如下 : 0 : [object HTMLLIElement]length : 51 : [object HTMLLIElement]2 : [object HTMLLIElement]3 : [object HTMLLIElement]4 : [object HTMLLIElement]请问高手们这是为啥呢 ? 我哪一步错了呢 ? 以下便是代码 :<html><head><title>New Document</title><meta name="charset" content="utf-8"><meta name="Generator" content="EditPlus "><meta name="Author" content="test"><meta name="Keywords" content="Js,JavaScript,test"><meta name="Description" content="Any about javaScript OOP Test."></head><body><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><span></span><script type='text/javascript'>(function(){ var j = function(selector,context){ return new j.fn.init(selector,context,rootj); }, rootj, splice = [].splice, push = Array.prototype.push; j.fn = j.prototype = { constructor:j, push:push, splice:splice, init:function(selector,context,rootj){ if(!selector){ return this; } if(typeof selector=='string'){ if(!context){ return rootj.find(selector); }else{ this.context = context; return context.find(selector); } }else{ this.context = this[0] = selector; this.length = 1; return this; } }, test:function(c){ alert(c); }, add:function(){ var ret = this.constructor(); ret.context = this.context; return ret; } } j.fn.init.prototype = j.fn; j.extend = j.fn.extend = function(){ for(i=0;i<arguments.length;i++){ for(k in arguments[i]){ this[k] = arguments[i][k]; } } } rootj = j(document); j.fn.extend({ find:function(selector){ if(typeof selector == "string"){// 如果是字符串的话 var ret = this.add(selector); for(i=0,l=this.length;i<l;i++){ var length = ret.length; makeArray(this[i].getElementsByTagName(selector),ret); if ( i > 0 ) { // Make sure that the results are unique for ( n = length; n < ret.length; n++ ) {//n=1;n<4;n++ for ( r = 0; r < length; r++ ) { if ( ret[r] === ret[n] ) {//ret[0] === ret[1] ret.splice(n--, 1); break; } } } } } var tmp = ''; for(k in ret)tmp+=k+' : '+ret[k]+'<br />'; document.getElementsByTagName('span').item(0).innerHTML = tmp; return ret; } }, each:function(a){ for(i=0;i<this.length;i++){ this[i].innerHTML = a; } } }); var makeArray = function( array, results ) { array = Array.prototype.slice.call( array, 0 ); if ( results ) { results.push.apply( results, array ); return results; } return array; }; window.$ = j;})();$('div').find('li').each('kk');</script></body></html> 我已经将 .each 加入了 CALLBACK , 可以这样 :$('div').each(function( alert($(this).html()); $(this).html('fdsafads');))但是我的问题是 , 为什么经过 : for(i=0;i<this.length;i++){ callback.call(this[i],i);}之后 , 在each(function(){ // 在这个中使用 $(this) 就代表了上面循环中 this[i] 所指的对象 ? 为啥如此精确 ? // 而且即便指向 this[i] 也应该仅仅是个 HTML OBJECT 而已 , 为何会附带 j.fn 中的所有方法 ? // 非常期望高人解答 !!!})代码 ( 黏贴过去直接运行就可以了 , 还可以调试调试 ) :<html><head><title>New Document</title><meta name="charset" content="utf-8"><meta name="Generator" content="EditPlus "><meta name="Author" content="test"><meta name="Keywords" content="Js,JavaScript,test"><meta name="Description" content="Any about javaScript OOP Test."></head><body><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><div> <ul> <li>fdasdasfdas</li> </ul></div><span></span><script type='text/javascript'>(function(){ var j = function(selector,context){ return new j.fn.init(selector,context,rootj); }, rootj, splice = [].splice, push = Array.prototype.push; j.fn = j.prototype = { constructor:j, push:push, splice:splice, init:function(selector,context,rootj){ if(!selector){ return this; } if(typeof selector=='string'){ if(!context){ return rootj.find(selector); }else{ this.context = context; return context.find(selector); } }else{ this.context = this[0] = selector; this.length = 1; return this; } }, test:function(c){ alert(c); }, add:function(){ var ret = this.constructor(); ret.context = this.context; return ret; } } j.fn.init.prototype = j.fn; j.extend = j.fn.extend = function(){ for(i=0;i<arguments.length;i++){ for(k in arguments[i]){ this[k] = arguments[i][k]; } } } rootj = j(document); j.fn.extend({ find:function(selector){ if(typeof selector == "string"){// 如果是字符串的话 var ret = this.add(selector); for(i=0,l=this.length;i<l;i++){ var length = ret.length; makeArray(this[i].getElementsByTagName(selector),ret); if ( i > 0 ) { // Make sure that the results are unique for ( n = length; n < ret.length; n++ ) {//n=1;n<4;n++ for ( r = 0; r < length; r++ ) { if ( ret[r] === ret[n] ) {//ret[0] === ret[1] ret.splice(n--, 1); break; } } } } } var tmp = ''; for(k in ret)tmp+=k+' : '+ret[k]+'<br />'; document.getElementsByTagName('span').item(0).innerHTML = tmp; return ret; } }, each:function(callback){ for(i=0;i<this.length;i++){ callback.call(this[i],i); } return this; }, html:function(val){ alert(this.length); if(val==''){ alert(this[0].innerHTML); }else{ this[0].innerHTML = val; } } }); var makeArray = function( array, results ) { array = Array.prototype.slice.call( array, 0 ); if ( results ) { results.push.apply( results, array ); return results; } return array; }; window.$ = j;})();$('div').find('li').each(function(i){ $(this).html('cc_'+i+'');});</script></body></html> 有没有什么好的技术可以实现这样的效果(急!急!急!) javascript 控件 ExtJS 格式化日期 任意页面获取弹出窗口句柄 如何实现鼠标右键功能? 如何得到 iframe 中数组的内容? IFRAME编辑器中,如何跳出当前Tag的控制范围? iframe传值问题 急!!请问:在javascript 中有象java的事件监听吗? 问一个js关于变量作用域的问题,求助! 一个无缝滚动动画,能否帮忙改进?非常感谢 javascript中的恶'&'和 ‘>>>=’是代表什么意思
$('div').find('ul').find('li')
等等连续的 FIND , 还写了个 EACH 的操作 , 但没写 callback , .each 之后可以改变选择内容的值 , 终于解决了 , 尼玛 jQuery 的作者果然是贱到不行了
getElementsByTagName 所获得的东西使用
Array.prototype.slice ( 要这么用因为它得 ret 是对象 , 而不是数组 , ret 为 this.constructor() , 说白了也就是 jQuery 对象 . ) 将不必要的一些方法去掉 , 因为 javascript 的DOM 获得之后不仅获得了 HTML 对象当然还有些可操作的方法 , 所以这里只保留 HTML 对象就可以了 .截取之后将其加入
ret , 前面括号中说过
ret 是等于从新声明了一份 jQuery , 而这里的
var ret = this.constructor() 里面是空的 ...
根据我的选择器this.context = this[0] = selector;
this.length = 1;自然 , ret 里有 length .. 但是 undefind 因为我啥也没给他 .我回头看一遍源代码才知道 , 选择器里一开始就有一个判断 :
if(!selector){
return this;
}
.......................................................
我现在才知道 , 这个判断的作用不仅仅是让使用者可以运行$.extend
$.ajax
之类的功能 , 还有对jQuery.fn.pushStack总有对应 ... 说不定这小小的一个判断还对其他地方有用 所以感叹它代码写的很严谨而已 , 我绝不是骂 , 不能误解我 .
我的 .each 很简单 , 对这些 HTML OBJECT 循环赋值 .
可是有个问题 .我还是将 ret 内容打印在页面上的 , 如果选择 DIV ( $('div').each('kk') ) 的时候 , 能正确的排列出对象的顺序 :
0 : [object HTMLDivElement]
1 : [object HTMLDivElement]
2 : [object HTMLDivElement]
3 : [object HTMLDivElement]
4 : [object HTMLDivElement]
length : 5
像这样 , 可是如果选择 li ( $('div').find('li').each('kk') ) 的时候 , 虽说能够选择到所有 LI , 也正确针对 LI 赋值了 , 可问题是对象排列顺序乱了 , 我调试了一下 jQuery , 发现是整齐的 . 错误的顺序如下 :
0 : [object HTMLLIElement]
length : 5
1 : [object HTMLLIElement]
2 : [object HTMLLIElement]
3 : [object HTMLLIElement]
4 : [object HTMLLIElement]
请问高手们这是为啥呢 ? 我哪一步错了呢 ? 以下便是代码 :<html>
<head>
<title>New Document</title>
<meta name="charset" content="utf-8">
<meta name="Generator" content="EditPlus ">
<meta name="Author" content="test">
<meta name="Keywords" content="Js,JavaScript,test">
<meta name="Description" content="Any about javaScript OOP Test.">
</head>
<body>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<span></span>
<script type='text/javascript'>
(function(){
var j = function(selector,context){
return new j.fn.init(selector,context,rootj);
},
rootj,
splice = [].splice,
push = Array.prototype.push; j.fn = j.prototype = {
constructor:j,
push:push,
splice:splice,
init:function(selector,context,rootj){
if(!selector){
return this;
}
if(typeof selector=='string'){
if(!context){
return rootj.find(selector);
}else{
this.context = context;
return context.find(selector);
}
}else{
this.context = this[0] = selector;
this.length = 1;
return this;
}
},
test:function(c){
alert(c);
},
add:function(){
var ret = this.constructor();
ret.context = this.context;
return ret;
}
}
j.fn.init.prototype = j.fn; j.extend = j.fn.extend = function(){
for(i=0;i<arguments.length;i++){
for(k in arguments[i]){
this[k] = arguments[i][k];
}
}
} rootj = j(document); j.fn.extend({
find:function(selector){
if(typeof selector == "string"){// 如果是字符串的话
var ret = this.add(selector);
for(i=0,l=this.length;i<l;i++){
var length = ret.length;
makeArray(this[i].getElementsByTagName(selector),ret);
if ( i > 0 ) {
// Make sure that the results are unique
for ( n = length; n < ret.length; n++ ) {//n=1;n<4;n++
for ( r = 0; r < length; r++ ) {
if ( ret[r] === ret[n] ) {//ret[0] === ret[1]
ret.splice(n--, 1);
break;
}
}
}
}
}
var tmp = '';
for(k in ret)tmp+=k+' : '+ret[k]+'<br />';
document.getElementsByTagName('span').item(0).innerHTML = tmp;
return ret;
}
},
each:function(a){
for(i=0;i<this.length;i++){
this[i].innerHTML = a;
}
}
}); var makeArray = function( array, results ) {
array = Array.prototype.slice.call( array, 0 );
if ( results ) {
results.push.apply( results, array );
return results;
}
return array;
}; window.$ = j;
})();
$('div').find('li').each('kk');
</script>
</body>
</html>
$('div').each(function(
alert($(this).html());
$(this).html('fdsafads');
))
但是我的问题是 , 为什么经过 :
for(i=0;i<this.length;i++){
callback.call(this[i],i);
}
之后 , 在
each(function(){
// 在这个中使用 $(this) 就代表了上面循环中 this[i] 所指的对象 ? 为啥如此精确 ?
// 而且即便指向 this[i] 也应该仅仅是个 HTML OBJECT 而已 , 为何会附带 j.fn 中的所有方法 ?
// 非常期望高人解答 !!!
})代码 ( 黏贴过去直接运行就可以了 , 还可以调试调试 ) :
<html>
<head>
<title>New Document</title>
<meta name="charset" content="utf-8">
<meta name="Generator" content="EditPlus ">
<meta name="Author" content="test">
<meta name="Keywords" content="Js,JavaScript,test">
<meta name="Description" content="Any about javaScript OOP Test.">
</head>
<body>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<div>
<ul>
<li>fdasdasfdas</li>
</ul>
</div>
<span></span>
<script type='text/javascript'>
(function(){
var j = function(selector,context){
return new j.fn.init(selector,context,rootj);
},
rootj,
splice = [].splice,
push = Array.prototype.push; j.fn = j.prototype = {
constructor:j,
push:push,
splice:splice,
init:function(selector,context,rootj){
if(!selector){
return this;
}
if(typeof selector=='string'){
if(!context){
return rootj.find(selector);
}else{
this.context = context;
return context.find(selector);
}
}else{
this.context = this[0] = selector;
this.length = 1;
return this;
}
},
test:function(c){
alert(c);
},
add:function(){
var ret = this.constructor();
ret.context = this.context;
return ret;
}
}
j.fn.init.prototype = j.fn; j.extend = j.fn.extend = function(){
for(i=0;i<arguments.length;i++){
for(k in arguments[i]){
this[k] = arguments[i][k];
}
}
} rootj = j(document); j.fn.extend({
find:function(selector){
if(typeof selector == "string"){// 如果是字符串的话
var ret = this.add(selector);
for(i=0,l=this.length;i<l;i++){
var length = ret.length;
makeArray(this[i].getElementsByTagName(selector),ret);
if ( i > 0 ) {
// Make sure that the results are unique
for ( n = length; n < ret.length; n++ ) {//n=1;n<4;n++
for ( r = 0; r < length; r++ ) {
if ( ret[r] === ret[n] ) {//ret[0] === ret[1]
ret.splice(n--, 1);
break;
}
}
}
}
}
var tmp = '';
for(k in ret)tmp+=k+' : '+ret[k]+'<br />';
document.getElementsByTagName('span').item(0).innerHTML = tmp;
return ret;
}
},
each:function(callback){
for(i=0;i<this.length;i++){
callback.call(this[i],i);
}
return this;
},
html:function(val){
alert(this.length);
if(val==''){
alert(this[0].innerHTML);
}else{
this[0].innerHTML = val;
}
}
}); var makeArray = function( array, results ) {
array = Array.prototype.slice.call( array, 0 );
if ( results ) {
results.push.apply( results, array );
return results;
}
return array;
}; window.$ = j;
})();
$('div').find('li').each(function(i){
$(this).html('cc_'+i+'');
});
</script>
</body>
</html>