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( ...
随机推荐
- Django logging的介绍
Django用的是Python buildin的logging模块. Python logging由四部分组成: Loggers - 记录器 Handles - 处理器 Filters - 过滤器 F ...
- Cocos2dx打包apk时变更NDK引发问题及解决
现在官方的Cocos Studio已经支持打包apk文件,写该随笔的时候还没试过官方的打包功能,所以就按自己的学习顺序先把打包的心得写下. 问题及最终解决方案: 其中耗时最长的问题就是ndk-r10改 ...
- luogu P4231 三步必杀
嘟嘟嘟 这道题就是区间加一个等差数列,然后最后求每一个数的值. O(n)做法:二阶差分. 其实就是差分两遍.举个例子 0 0 0 0 0 0 0,变成了 0 2 4 6 8 0 0.第一遍差分:0 2 ...
- PHP-------文件上传的实例
文件上传的实例 一.上传头像 在注册时,要求用户上传头像,登陆主页面,显示用户信息时,头像也要显示出来. 例子: 注册页面: 图片存数据库时是text类型. <title>无标题文档< ...
- spring+jdbc+template+transaction实现
使用spring和jdbc模板事务实现 1.创建实体类: Role package com.wbg.sjt.entity; public class Role { private int id; pr ...
- AngularJS简介-起步阶段
AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HT ...
- 在spring添加注解时，第一行package报错configure build path
练习spring的ioc的注解的时候写上注解就会在第一行package报错configure build path. 用的spring4.2.4的jar包.经过上网查阅资料,可能是jar包冲突,解决办 ...
- 基于java的简易计算器实现
方法: 1.将string类型的表达式输入转换成后缀表达式 2.计算后缀表达式 步骤一:将string类型的表达式输入转换成后缀表达式 输入字符串表达式,并将表达式转换成char型数组 String ...
- Android软件开发之SharedPreferences
SharedPreferences 一种轻量级的数据保存方式 以键值对的方式存储 用于存储小批量的数据 使用方法: SharedPreferences sp= getSharedPreferenc ...
- Vue清除所有JS定时器
Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...