jquery 点滴
$(function(){ //$('table tr:not(:first)').remove(); var len = $('table tr').length; for(var i = 1;i<len;i++){ $('table tr:eq('+i+') td:first').text(i); } });
原始代码
<!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=utf-8" /> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <title>jQuery</title> </head> <body> <table width=500 border=2> <tr><td width=250>序号</td><td width=250>项目</td></tr> <tr><td></td><td>Port</td></tr> <tr><td></td><td>Port</td></tr> <tr><td></td><td>Port</td></tr> <tr><td></td><td>Port</td></tr> <tr><td></td><td>Port</td></tr> <tr><td></td><td>Port</td></tr> <tr><td></td><td>Port</td></tr> <tr><td></td><td>Port</td></tr> </table> </body> </html>
变成
<!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=utf-8" /> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <title>jQuery</title> </head> <body> <table width=500 border=2> <tr><td width=250>序号</td><td width=250>项目</td></tr> <tr><td>1</td><td>Port</td></tr> <tr><td>2</td><td>Port</td></tr> <tr><td>3</td><td>Port</td></tr> <tr><td>4</td><td>Port</td></tr> <tr><td>5</td><td>Port</td></tr> <tr><td>6</td><td>Port</td></tr> <tr><td>7</td><td>Port</td></tr> <tr><td>8</td><td>Port</td></tr> </table> </body> </html>
Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)
("#loading").ajaxStart(function(){ $(this).show(); //callback })：当一个当Ajax请求开始时将把id为"loading"的内容显示；
("#loading").ajaxStop(function(){ $(this).hide(); //call })：当一个当Ajax请求结束时将把id为"loading"的内容隐藏；
<script> $(document).ready(function(){ $("#loading").ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){//ajaxStop改为ajaxComplete也是一样的 $(this).hide(); }); $("#o").click(function(){ $.post("for.php?id=o",function(data){ $("#content").html(data); }); }) $("#p").click(function(){ $.post("for.php?id=p",function(data){ $("#content").html(data); }); }) $("#q").click(function(){ $.post("for.php?id=q",function(data){ $("#content").html(data); }); }) }) </script>
jQuery判断展示的元素，并获取显示元素数据
// 获取显示元素的数据 jQuery(this).find("a:visible").attr("href"); // 多级标签选择器 jQuery("#slider").click(function(){ var rel = jQuery(".nivo-controlNav a.active").attr("rel"); location.href = jQuery(this).find("a").eq(rel).attr("href"); }); // 判断元素是否显示
$(document).ready(function(){ if($("#mydiv").is(":visible")==false){ alert("Hidden"); }else{ alert("Display"); } });
如何判断jquery选择器选择结果为空
$("#id").length
这样就可以通过这样判断是否存在符合选择器条件的内容存在了
Jquery判断当前点击在表格的第几行第几列
$(document).ready(function(){ $(".mytable td").click(function(){ var tdSeq = $(this).parent().find("td").index($(this)[0]); var trSeq = $(this).parent().parent().find("tr").index($(this).parent()[0]); alert("第" + (trSeq + 1) + "行，第" + (tdSeq + 1) + "列"); }); })
jquery table 增加两行,删除两行,并且有跨行rowspan
//先删除当前行的下面的一行 $(obj.parentNode.parentNode).next().remove(); //然后再删除当前行 $(obj.parentNode.parentNode).remove();
区间代码 获取序号2-5之间的数
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> $("li:lt(5)").filter(":gt(2)").prependTo('ul'); $("li:lt(5):gt(2)").prependTo('ul');
jQuery 获取当前节点的html包含当前节点的方法
<div class="test"><p>hello，你好！</p></div> <script> $(".test").prop("outerHTML"); </script> 输出结果为：<div class="test"><P>hello,你好！</p></div>
jQuery 追加元素的方法
append() 方法在被选元素的结尾插入内容。
prepend() 方法在被选元素的开头插入内容。
after() 方法在被选元素之后插入内容。
before() 方法在被选元素之前插入内容。
jquery版本之间的冲突
<!-- 引入1.6.4版的jq --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> <script> var jq164 = jQuery.noConflict(true); </script> <!-- 引入1.4.2版的jq --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script> var jq142 = jQuery.noConflict(true); </script> <script> (function($){ //此时的$是jQuery-1.6.4 $('#header'); })(jq164); </script> <script> (function($){ //此时的$是jQuery-1.4.2 $('#footer'); })(jq142); </script>
table
获取table最后一行 $("#tab tr:last")
获取table第一行 $("#tab tr").eq(0)
获取table倒数第二行 $("#tab tr").eq(-2)
获取table总行数 $("#tab").find("tr").length
jquery 屏蔽一个区域内的所有元素，禁止输入
<script type="text/javascript">
(function($) {
$.fn.disable = function() {
return $(this).find("*").each(function() {
$(this).attr("disabled", "disabled");
});
}
$.fn.enable = function() {
return $(this).find("*").each(function() {
$(this).removeAttr("disabled");
});
}
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#div_test").disable();
});
</script>
除了某个元素 not
$(".r_options_title").click(function(){
$(this).parents("li").enable();
$(".r_options_title").not(this).parents("li").disable();
});
