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( ...
随机推荐
- Swift编程语言学习1.1——常量与变量
常量和变量把一个名字(比方maximumNumberOfLoginAttempts或者welcomeMessage)和一个指定类型的值(比方数字10或者字符串"Hello")关联起 ...
- JQuery获取和设置Select选项的常用方法总结
1.获取select 选中的 text: $("#cusChildTypeId").find("option:selected").text(); $(&q ...
- UVa 1609 - Foul Play
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- TCP/IP模型 & 5层参考模型
OSl参考模型与TCP/IP参考模型相同点: 1.都分层 2.基于独立的协议栈的概念 3.可以实现异构网络互联
- zabbix时间不同步
Linux下如何实现与Internet时间同步 一.安装ntp [root@server-2 ~]# yum install -y ntpdate 二.同步时间 // 方式一.使用域名连接,要经过DN ...
- Docker创建镜像文件并在容器中运行
1.如何创建镜像文件 首先找到Docker ToolBox安装的路径,在路径下直接新建Dockerfile文件 在Dockerfile文件里写入的内容为: FROM docker/whalesay:l ...
- java中数据类型的范围
前言:最近:本菜鸡在准备pat,可以每次遇到数据类型的时候都得去查找范围,因此本着学习的目的,来总结一下java中的数据类型. 因此我用mindManager做了一个思维图
- 用javascript编写猜拳游戏（函数）
const readline = require('readline-sync')//引用readline-sync console.log('欢迎进入猜拳游戏'); //电脑随机出拳 let fn ...
- Knowledge Point 20180303 对比编译器、解释器与Javac编译原理
编译器与Javac编译原理 在前文我们知道了Java是一种编译语言和解释语言,它的源代码经过编译器Javac编译为能够被JVM识别的二进制语言,然后JVM将其解释为能够被平台识别的机器语言.那么什么是 ...
- redhat5本地源NBD驱动安装
1.将镜像挂载到本机上 1)将系统ISO镜像放到自己电脑/root下 lsb_release -a 查看系统类型 2)在(/)目录下,建立yum目录 mkdir /root/yum 3 ...