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></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></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();

            });

jquery 点滴的更多相关文章

jquery点滴
1.toggle 2.next prev after before 3.on 4.当我们使用jquery的attr('checked',true)或者attr('checked','checked') ...
JQuery点滴记录-持续更新
1. 获取各个控件的值 1)获取textArea等控件的值 2)获取span的值 3)删除ul下的所以li 2. jquery获取服务器控件dropdownlist的值 ddl_Type2为dropd ...
[jquery] jQuery点滴[持续更新]
001.查看jquery的版本. $(function(){ console.log($()); //jquery console.log($().jquery); }); 002.(new Func ...
jquery点滴总结
1.empty().remove().detach() empty():只移除了指定元素中的所有子节点,而留下了<p></p>,仍保留其在dom中所占的位置. remove ...
[ASP.NET 技术点滴] Jquery 前端验证
先上HTML代码: <form id="login" name="login" action="~/f_login/Login" me ...
点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计
效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据代码: <%@ Page Language="C#" AutoEventWireup=&qu ...
关于JQuery.form.js异步上传文件点滴
好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...
jQuery和js使用点滴
1.checkbox全选按钮 <input type="checkbox" name="allcheck" id="allcheck" ...
关于asp.net与jquery ajax 的一些补充
补充1:asp.net 与后台交互除了用之前写得$.ajsx()外还可以直接使用$.get() , $.post()等. 补充2:jquery 跨域请求例如: JSONP 跨域: $.ajax( ...

随机推荐

Type Systems
This section deals with more theoretical aspects of types. A type system is a set of rules used by a ...
BZOJ2005:[NOI2010]能量采集(莫比乌斯反演,欧拉函数)
Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种得 ...
star组件
一.star组件 <template> <div class="star" :class="starType"> <span v- ...
CPP-基础：事件
事件(Event) 事件对象也可以通过通知操作的方式来保持线程的同步.并且可以实现不同进程中的线程同步操作. 信号量包含的几个操作原语: CreateEvent() 创建一个事件 ...
python查看微信消息撤回
准备环境 python语言环境 python解释器-pycharm itchat介绍 itchat是一个开源的微信个人号接口,通过itchat可以实现微信(好友或微信群)的信息处理,包括文本.图片.小 ...
PAT——1005. 继续(3n+1)猜想
pat原题目:https://www.patest.cn/contests/pat-b-practise/1005 原题目: 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况 ...
【题解】洛谷P1074 [NOIP2009TG] 靶形数独（DFS+剪枝）
洛谷P1074:https://www.luogu.org/problemnew/show/P1074 思路这道题一看就是DFS 打一个分数表方便后面算分我用x y z数组分别表示行列宫是否 ...
ARC声明属性关键字详解(strong,weak,unsafe_unretained,copy)
ARC声明属性关键字详解(strong,weak,unsafe_unretained,copy) 在iOS开发过程中,属性的定义往往与retain, assign, copy有关,我想大家都很熟悉了, ...
LeetCode27.移除元素 JavaScript
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
C#中小写人民币转大写
/// <summary> /// 转换成大写人民币 /// </summary> /// <param name="myMoney">< ...

jquery 点滴

Jquery判断当前点击在表格的第几行第几列

jquery 点滴的更多相关文章

随机推荐

热门专题