jquery 点滴

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

?
1
2
3
4
获取table最后一行 $("#tab tr:last")
获取table第一行 $("#tab tr").eq(0)
获取table倒数第二行 $("#tab tr").eq(-2)
获取table总行数 $("#tab").find("tr").length

　　

 

jquery 屏蔽一个区域内的所有元素，禁止输入

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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();
            });

 

posted @   wangxusummer  阅读(222)  评论(0)  编辑  收藏  举报
编辑推荐：
· 对象命名为何需要避免'-er'和'-or'后缀
· SQL Server如何跟踪自动统计信息更新?
· AI与.NET技术实操系列：使用Catalyst进行自然语言处理
· 分享一个我遇到过的“量子力学”级别的BUG。
· Linux系列：如何调试 malloc 的底层源码
阅读排行：
· C# 中比较实用的关键字，基础高频面试题！
· .NET 10 Preview 2 增强了 Blazor 和.NET MAUI
· Ollama系列05：Ollama API 使用指南
· 为什么AI教师难以实现
· 如何让低于1B参数的小型语言模型实现 100% 的准确率
点击右上角即可分享
微信分享提示