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( ...
随机推荐
- bzoj2331 [SCOI2011]地板
Description lxhgww的小名叫“小L”,这是因为他总是很喜欢L型的东西.小L家的客厅是一个的矩形,现在他想用L型的地板来铺满整个客厅,客厅里有些位置有柱子,不能铺地板.现在小L想知道,用 ...
- PowerDNS简单教程（1）：安装篇
这一篇开始直接是PowerDNS教程,连续四篇.DNS的相关背景知识我就不介绍了,有需要的话看看 http://baike.baidu.com/link?url=QcthFpAb2QydMqcMJr9 ...
- 牛客网多校训练第一场 A - Monotonic Matrix（Lindström–Gessel–Viennot lemma）
链接: https://www.nowcoder.com/acm/contest/139/A 题意: 求满足以下条件的n*m矩阵A的数量模(1e9+7):A(i,j) ∈ {0,1,2}, 1≤i≤n ...
- [AHOI2004]数字迷阵
嘟嘟嘟 应该算一道结论题吧. 首先很明显的一点,就是对于ai,j,我们只用求出ai,1就行了,剩下的就是斐波那契和矩阵快速幂的事. 至于如何求ai,1,用两种方法,但是哪一个我都不懂为啥,网上也没有解 ...
- ssm小小整合
ssm整合: 首先是创建数据库: CREATE TABLE `user` ( `id` ) NOT NULL, `username` varchar() NOT NULL, `password` va ...
- JZ2440学习笔记之IIS音频芯片WM8976
音频芯片的接线图:IIS接到MPU的IIS controller上:看L3总线的接法,应该是使用GPIO来模拟时序. IIS总线用来传输音频数据. L3总线用来配置WM8976的内部寄存器. L3总线 ...
- Java构造器(构造方法)与方法区别
构造器,又称为构造方法.构造器用于构造该类的实例,也就是对象. 格式如下:[修饰符] 类名 (形参列表){//n条语句} 构造方法是一种特殊的方法,与一般的方法区别: 1.构造方法的名字必须与定义 ...
- firefox下载文件弹出框之终极解决方案-vbs模拟键盘操作
由于近期一直被firefox的保存文件弹出框困扰,摸索尝试过几种方法,已有的方法可以跑通但是对对效果不太满意,因此一直在寻找合适的解决办法. 最近发现了也可以通过VBS来处理弹出框,速度也不错,其原理 ...
- hibernate-笔记
什么是 hibernate 框架 1.hibernate 框架应用在 javaee 三次结构中 dao 层框架 2.在dao 层里面对数据库做curd 操作, 使用hibernate 做crud 操作 ...
- Zabbix——使用邮件报警
前提条件: 1. Zabbix版本4.0 zabbix-server 命令配置: yum install mailx -y #下载邮件功能 vi /etc/mail.rc set bsdcompat ...