jQuery中需要注意的地方（不断更新中。。。）

1.$("#tt")永远获取的是对象，即便是网页中没有这个元素。如果要想检测网页中是否有这个元素时不能用

  

if($("#tt")){...}

       应该用

if($("#tt").length>0){...}

或者转化成Dom对象

if($("#tt")[0]){...}

---

2. siblings()方法与$("#pre~siblings")选择器的区别；

    $("#pre~siblings")例如：$("#pre~div")是选择"#pre"元素后面的所有同一层的div元素。

    siblings()方法与前后关系无关，只要是同一层节点就能够匹配。

    另外：$("#pre~siblings")与nextAll()方法是等价的：

    下面是几个例子：

$("#pre~div").css("background","#cccccc");

//选取#pre后面的所有同一层的div元素。

$("#pre").nextAll("div").css("background","#cccccc");

//同上

$("#pre").siblings();

//选取id为#pre的div元素的所有的同一层的div元素。

---

3.$("#form1 :input")与$("#form1 input")得区别：

  

$("#form1 :input")包含（，，，）的范围要比$("#form1 input")的范围（<input>）大，</TD></TR></TBODY></TABLE></DIV> <DIV> <HR id=null> </DIV> <DIV>4.选择其中的空格是不容忽视的，多一个空格和少一个空格会带来截然不同的后果。</DIV> <DIV>   例如：</DIV> <DIV> <TABLE style="BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 80%; BORDER-BOTTOM: #999 1px solid" align=center> <TBODY> <TR> <TD> <P><div class="test"><BR> <div style="display:none">tt</div><BR> <div style="display:none">rr</div><BR> <div style="display:none">dd</div><BR> <div class="test" style="display:none">gg</div><BR></div><BR><div class="test" style="display:none">aa</div><BR><div class="test" style="display:none">cc</div></P> <P><BR>使用下面的jQuery代码选择器获取他们。</P> <P><BR>var $t_a = $(".test :hidden");  //带空格<BR>var $t_b = $(".test:hidden");   //不带空格<BR>var $len_a = $t_a.length;<BR>var $len_b = $t_b.length;<BR>alert("$('.test :hidden')="+$len_a);//输出4<BR>alert("$('.test:hidden')="+$len_b); //输出3</P></TD></TR></TBODY></TABLE></DIV> <DIV>        结果：一个提示4，一个提示3</DIV> <DIV>        原因：var $t_a = $(".test :hidden"); 选取class为test中的隐藏的div元素</DIV> <DIV>             var $t_a = $(".test:hidden");  选取隐藏的class为test的div元素 </DIV> <DIV> <HR id=null> </DIV> <DIV>5.在节点的操作中有删除节点</DIV> <DIV>  删除节点的方法有两种：remove()和empty();</DIV> <DIV>  两种方法的区别是：remove()是删除节点。而empty并不是真正的删除节点而是清空节点。</DIV> <DIV> <HR id=null> </DIV> <DIV>6.包裹节点：</DIV> <DIV>   包裹节点的方法有三种：wrap(),wrapAll(),wrapInner();</DIV> <DIV>这3中包裹方法的区别是：</DIV> <DIV>   wrap()是将所有的元素单独进行包裹。</DIV> <DIV>   wrapAll()是将所有的元素用一个元素单独进行包裹。</DIV> <DIV>   warpInner()是将每一个匹配的节点的子内容（包括文本节点），用其他机构化标记包裹起来。</DIV> <DIV>   下面举几个例子，就明白了：</DIV> <DIV>   <TABLE style="BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 80%; BORDER-BOTTOM: #999 1px solid" align=center> <TBODY> <TR> <TD> <P><strong>这是原文本</strong>    //html代码</P> <P><strong>这是原文本</strong>    //html代码</P></TD></TR></TBODY></TABLE></DIV> <DIV>        使用$("strong").wrap("<b></b>");运行结果</DIV> <DIV>        <TABLE style="BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 80%; BORDER-BOTTOM: #999 1px solid" align=center> <TBODY> <TR> <TD> <P><FONT color=#990099><b></FONT><strong>这是原文本</strong><FONT color=#990099></b></FONT></P> <P><FONT color=#990099><b></FONT><strong>这是原文本</strong><FONT color=#990099></b></FONT></P></TD></TR></TBODY></TABLE></DIV> <DIV>        使用$("strong").warpAll("<b></b>");运行结果是：</DIV> <DIV>       <TABLE style="BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 80%; BORDER-BOTTOM: #999 1px solid" align=center> <TBODY> <TR> <TD> <P><FONT color=#990099><b></FONT></P> <P><FONT color=#990099>   </FONT><strong>这是原文本</strong></P> <P><FONT color=#990099>   </FONT><strong>这是原文本</strong></P> <P><FONT color=#990099></b></FONT></P></TD></TR></TBODY></TABLE></DIV> <DIV>        使用$("strong").wrapInner("<b></b>");运行结果是：</DIV> <DIV>        <TABLE style="BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 80%; BORDER-BOTTOM: #999 1px solid" align=center> <TBODY> <TR> <TD> <P><strong><FONT color=#990099><b></FONT>这是原文本<FONT color=#990099></b></FONT></strong></P> <P><strong><FONT color=#990099><b></FONT>这是原文本<FONT color=#990099></b></FONT></strong></P></TD></TR></TBODY></TABLE></DIV> <DIV> <HR id=null> </DIV> <DIV>7.属性操作：</DIV> <DIV>  用attr()方法来获取和设置元素的属性。用removeAttr()方法来删除元素属性。</DIV> <DIV>  需要注意的是添加一个属性和添加多个属性的语法不同；</DIV> <DIV>  添加一个属性：$("#nae").attr("title","is title");</DIV> <DIV>  添加多个属性：$("#nea").attr(<FONT color=#990099>{</FONT>"title"<FONT color=#990099>:</FONT>"is title","color"<FONT color=#990099>:</FONT>"red","name"<FONT color=#990099>:</FONT>"test"<FONT color=#990099>}</FONT>);</DIV> <DIV> <HR id=null> </DIV> <DIV> </DIV> <DIV>不断更新中。。。(如果有意见和建议请留言)</DIV> <DIV></DIV> <DIV></DIV> <DIV></DIV> <DIV></DIV> <DIV></DIV> <DIV></DIV> <DIV></DIV> </div> <!-- <div class="Blog_con3_1">管理员在2009年8月13日编辑了该文章文章。</div> --> <div class="Blog_con2_1 Blog_con3_2"> <div> <!--<img src="/image/default/tu_8.png">--> <!-- JiaThis Button BEGIN --> <div class="bdsharebuttonbox"><A class=bds_more href="#" data-cmd="more"></A><A class=bds_qzone title=分享到QQ空间 href="#" data-cmd="qzone"></A><A class=bds_tsina title=分享到新浪微博 href="#" data-cmd="tsina"></A><A class=bds_tqq title=分享到腾讯微博 href="#" data-cmd="tqq"></A><A class=bds_renren title=分享到人人网 href="#" data-cmd="renren"></A><A class=bds_weixin title=分享到微信 href="#" data-cmd="weixin"></A></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <!-- JiaThis Button END --> </div> 阅读(692) | 评论(0) | 转发(1) | <div class="HT_line3"></div> </div> <div class="Blog_con3_3"> <div><span id='digg_num'>0</span><a href="javascript:void(0)" id='digg' bid='1829877' url='/blog/digg.html' ></a></div> <p>上一篇：<a href="/uid-21153026-id-1829876.html">JavaScript中的一些常见错误</a></p> <p>下一篇：<a href="/uid-21153026-id-1829878.html">为页面中所有的p标签添加鼠标点击事件</a></p> </div> </div> <!-- <div class="Blog_con3_4 Blog_con3_5"> <div class="Blog_tit2 Blog_tit7">热门推荐</div> <ul> <li><a href="" title="" target='blank' ></a></li> </ul> </div> --> </div> </div> <div class="Blog_right1_7" id='replyList'> <div class="Blog_tit3">给主人留下些什么吧！~~</div> <!--暂无内容--> <!-- 评论分页--> <div class="Blog_right1_6 Blog_right1_12"> </div> <!-- 评论分页--> <div class="Blog_right1_10" style="display:none"> <div class="Blog_tit3">评论热议</div> <!--未登录 --> <div class="Blog_right1_8"> <div class="nologin_con1"> 请登录后评论。 <p><a href="http://account.chinaunix.net/login" onclick="link(this)">登录</a> <a href="http://account.chinaunix.net/register?url=http%3a%2f%2fblog.chinaunix.net">注册</a></p> </div> </div> </div> <div style="text-align:center;margin-top:10px;"> <script type="text/javascript" smua="d=p&s=b&u=u3118759&w=960&h=90" src="//www.nkscdn.com/smu0/o.js"></script> </div> </div> </div> </div> <input type='hidden' id='report_url' value='/blog/ViewReport.html' /> <script type="text/javascript"> //测试字符串的长度 一个汉字算2个字节 function mb_strlen(str) { var len=str.length; var totalCount=0; for(var i=0;i<len;i++) { var c = str.charCodeAt(i); if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { totalCount++; }else{ totalCount+=2; } } return totalCount; } /* var Util = {}; Util.calWbText = function (text, max){ if(max === undefined) max = 500; var cLen=0; var matcher = text.match(/[^\x00-\xff]/g), wlen = (matcher && matcher.length) || 0; //匹配url链接正则 http://*** var pattern = /http:\/\/([\w-]+\.)+[\w-]+(\/*[\w-\.\/\?%&=][^\s^\u4e00-\u9fa5]*)?/gi; //匹配的数据存入数组 var arrPt = new Array(); var i = 0; while((result = pattern.exec(text)) != null){ arrPt[i] = result[0]; i++; } //替换掉原文本中的链接 for(var j = 0;j<arrPt.length;j++){ text = text.replace(arrPt[j],""); } //减掉链接所占的长度 return Math.floor((max*2 - text.length - wlen)/2 - 12*i); }; */ var allowComment = '0'; //举报弹出层 function showJuBao(url, cid){ $.cover(false); asyncbox.open({ id : 'report_thickbox', url : url, title : '举报违规', width : 378, height : 240, scroll : 'no', data : { 'cid' : cid, 'idtype' : 2 , 'blogurl' : window.location.href }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); } $(function(){ //创建管理员删除的弹出层 $('#admin_article_del').click(function(){ $.cover(false); asyncbox.open({ id : 'class_thickbox', html : '<div class="HT_layer3_1"><ul><li class="HT_li1">操作原因：<select class="HT_sel7" id="del_type" name="del_type"><option value="广告文章">广告文章</option><option value="违规内容">违规内容</option><option value="标题不明">标题不明</option><option value="文不对题">文不对题</option></select></li><li class="HT_li1" ><input class="HT_btn4" id="admin_delete" type="button" /></li></ul></div>', title : '选择类型', width : 300, height : 150, scroll : 'no', callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); $('#admin_delete').live('click' , function(){ ///blog/logicdel/id/3480184/url/%252Fblog%252Findex.html.html var type = $('#del_type').val(); var url = '/blog/logicdel/id/1829877/url/%252Fuid%252F21153026.html.html'; window.location.href= url + '?type=' + type; }); //顶 js中暂未添加&过滤 $('#digg').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $('#digg').attr('bid'); var url = $('#digg').attr('url'); var digg_str = $.cookie('digg_id'); if(digg_str != null) { var arr= new Array(); //定义一数组 arr = digg_str.split(","); //字符分割 for( i=0 ; i < arr.length ; i++ ) { if(bid == arr[i]) { showErrorMsg('已经赞过该文章', '消息提示'); return false; } } } $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0) { var num = parseInt($('#digg_num').html(),10); num += 1; $('#digg_num').html(num); $('#digg').die(); if(digg_str == null) { $.cookie('digg_id', bid, {expires: 30 , path: '/'}); } else { $.cookie('digg_id', digg_str + ',' + bid, {expires: 30 , path: '/'}); } showSucceedMsg('谢谢' , '消息提示'); } else if(msg.error == 1) { //showErrorMsg(msg.error_content , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } else if(msg.error == 2) { showErrorMsg(msg.error_content , '消息提示'); } } }); }); //举报弹出层 /*$('.box_report').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var url = $('#report_url').val(); var cid = $(this).attr('cid'); $.cover(false); asyncbox.open({ id : 'report_thickbox', url : url, title : '举报违规', width : 378, height : 240, scroll : 'no', data : { 'cid' : cid, 'idtype' : 2 }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); });*/ //评论相关代码 //点击回复显示评论框 $('.Blog_a10').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var tid = $(this).attr('toid');//留言作者id var bid = $(this).attr('bid');//blogid var cid = $(this).attr('cid');//留言id var tname = $(this).attr('tname'); var tpl = '<div class="Blog_right1_9">'; tpl += '<div class="div2">'; tpl += '<textarea name="" cols="" rows="" class="Blog_ar1_1" id="rmsg">文明上网，理性发言...'; tpl += ''; tpl += '

'; tpl += '

'; tpl += '

表情

'; tpl += '

'; tpl += '

'; tpl += ''; $('.z_move_comment').html(''); $(this).parents('.Blog_right1_8').find('.z_move_comment').html(tpl).show(); }); //引用的评论提交 $('#quota_sbumit').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var tid = $(this).attr('tid');//被引用人的id var qid = $(this).attr('cid');//引用的id var url = $(this).attr('url'); var text = $('#rmsg').val(); var tname = $(this).attr('tname'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : tid , 'qid' : qid , 'text': text , 'tname' : tname }, dataType: 'json', success: function(data){ if(data.code == 1){ var tpl = '

'; tpl+= '

' + data.info.header + '

'; tpl+= '

'; tpl+= '

' + data.info.username + '' + data.info.dateline + '

'; tpl+= '

' + data.info.quota.username + '：'+ data.info.quota.content + '

'; tpl+= '

' + data.info.content + '

回复 | 　删除　| 　举报

'; tpl+= '

'; tpl+= '

'; $('#replyList .Blog_right1_8:first').before(tpl); $('.z_move_comment').html('').hide(); } else if(data.code == -1){ //showErrorMsg(data.info , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } }, error: function(){//请求出错处理 } }); }); //底部发表评论 $('#submitmsg').click(function(){ if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var bid = $(this).attr('bid'); var toid = $(this).attr('toid'); var text = $('#reply').val(); var url = $(this).attr('url'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : toid ,'text': text}, dataType: 'json', success: function(data){ if(data.code == 1) { var tpl = '

'; tpl += '

' + data.info.header + '

'; tpl += '

'; tpl += '

' + data.info.username + '' + data.info.dateline + '

'; tpl += '

' + data.info.content + '

'; tpl += '

回复 | 　删除　| 　举报

'; tpl += '

'; tpl += '

'; $('.Blog_tit3:first').after(tpl); $('#reply').val('文明上网，理性发言...'); } else if(data.code == -1) { showErrorMsg(data.info , '消息提示'); } }, error: function(){//请求出错处理 } }); }); //底部评论重置 $('#reset_comment').click(function(){ $('#reply').val('文明上网，理性发言...'); }); //取消回复 $('#qx_comment').live('click' , function(){ $('.z_move_comment').html('').hide(); }); $('#rmsg, #reply').live({ focus:function(){ if($(this).val() == '文明上网，理性发言...'){ $(this).val(''); } }, blur:function(){ if($(this).val() == ''){ $(this).val('文明上网，理性发言...'); } } }); //删除留言确认 $('.comment_del_mark').live('click' , function(){ var url = $(this).attr('url'); asyncbox.confirm('删除留言','确认', function(action){ if(action == 'ok') { location.href = url; } }); }); //删除时间确认 $('.del_article_id').click(function(){ var delurl = $(this).attr('delurl'); asyncbox.confirm('删除文章','确认', function(action){ if(action == 'ok') { location.href = delurl; } }); }); /* //字数限制 $('#rmsg, #reply').live('keyup', function(){ var id = $(this).attr('id'); var left = Util.calWbText($(this).val(), 500); var eid = '#errmsg'; if(id == 'reply') eid = '#rerrmsg'; if (left >= 0) $(eid).html('您还可以输入' + left + '字'); else $(eid).html('您已超出' + Math.abs(left) + '字 '); }); */ //加载表情 $('#face').qqFace({id : 'facebox1', assign : 'reply', path : '/image/qqface/'}); $('#mface').qqFace({id : 'facebox', assign : 'rmsg', path:'/image/qqface/'}); /* $('#class_one_id').change(function(){ alert(123213); var id = parseInt($(this).val() , 10); if(id == 0) return false; $('.hidden_son_class span').each(function( index , dom ){ if( dom.attr('cid') == id ) { } }); }); */ //转载文章 var turn_url = "/blog/viewClassPart.html"; $('#repost_bar').click(function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var id = $(this).attr('bid'); asyncbox.open({ id : 'turn_class_thickbox', url : turn_url, title : '转载文章', width : 330, height : 131, scroll : 'no', data : { 'id' : id }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); /* //转发文章 $('#repost_bar').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var url = $(this).attr('url'); asyncbox.confirm('转载文章','确认', function(action){ if(action == 'ok'){ $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0){ showSucceedMsg('转发成功！', '消息提示'); }else if(msg.error == 1){ //location.href = '/index.php?r=site/login'; showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); }else{ showErrorMsg(msg.error_content, '消息提示'); } } }); } }); }); */ });

关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6