<!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>

<title>jquery test</title>

<style>

	.s1{

		color:blue;

	}

	.t1{

		color:red;

		background-color:blue;

	}

	.t2{

		color:yellow;

		background-color:#dddddd;

	}

</style>

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

<script type="text/javascript">

	//加载时执行

	$(function(){

		//addClass 添加样式  removeClass 去除样式

		$('#testspan').addClass('s1');

		//table:thead、tbody、tfoot

		//even 偶数 ，odd 奇数，first 第一个，last 最后一个

		$('#tb tbody tr:even').addClass('t2');

		//点击id为 showHidden 时执行

		$('#showHidden').click(function(){

			//显示 隐藏 切换 toggele

			$('#showHiddenSpan').toggle();

				//判断是否显示状态

				if($('#showHiddenSpan').is(':visible')){

					//当前按钮隐藏

					$(this).val('隐藏');

				}else{

					//当前按钮显示

					$(this).val('显示');

					//将标签插入到指定标签之前 insertBefore 之后 insertAfter

					$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').insertAfter('#testp');

					//$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').insertBefore('#testp');

					//将标签插入到指定标签之内 在前 prependTo 在后 appendTo

					$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').prependTo('#testp');

					//$('<a href="http://baidu.com" target="_blank">百度一下，你就知道！</a>').appendTo('#testp');

				}

			}

		)

		//标签显示内容改变

		$('h1').text('456');

		//标签显示html

		$('h1').html('<a href="###"> 1123</a>');

	});

	function change(){

		//先删除原有样式再改变

		$('#tb tbody tr:even').removeClass();

		$('#tb tbody tr:even').addClass('t1');

		$('#tb tbody tr:odd').addClass('t2');

	}

</script>

</head>

<body>

<h1>123</h1>

<span id="testspan">span</span>

<p id="testp">jquery test p</p>

<span id="showHiddenSpan">show/hidden</span>

<br>

<table id="tb">

<thead>

<tr><th>姓名</th><th>年龄</th></tr>

</thead>

<tbody>

<tr><td>a</td><td>24</td></tr>

<tr><td>b</td><td>22</td></tr>

<tr><td>c</td><td>21</td></tr>

<tr><td>d</td><td>20</td></tr>

<tr><td>e</td><td>24</td></tr>

<tr><td>f</td><td>23</td></tr>

<tbody>

<tfoot>

</tfoot>

</table>

<input type="button" onclick="change()" value="改变" />

<input type="button" id="showHidden" value="隐藏" />

</body>

</html>

　　

jQuery 个人随笔的更多相关文章

  1. jquery学习随笔

    转)jquery学习随笔(jquery选择器)   jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言. ...

  2. 锋利的jQuery读书随笔

    代码规范:var $variable = jQuery对象:var variable = DOM对象: jQuery对象无法使用DOM对象的任何方法,同样DOM对象也无法使用jQuery对象的任何方法 ...

  3. js(jQuery)相关随笔

    //获取所有name='id'.被选择的的多选框var idArr = $("input[type='checkbox'][name='id']:checked");//将这些多选 ...

  4. jQuery AJAX相关方法

    接jQuery学习上篇.因为AJAX是相对独立的一块,所以和jQuery的随笔分开记录了.素材同样来自runoob. 先了解下什么是AJAX. AJAX = 异步 JavaScript 和 XML(A ...

  5. jQuery——随笔

    jQuery——随笔 jQuery的parseInt方法 在使用parseInt方法的时候要注意解析失败的问题,解析失败返回的是NaN 计算sum=sum+parseInt(num);的时候可以报错, ...

  6. 使用jquery脚本获取随笔、文章和评论的统计数，自定义显示位置

    为了这个问题,花了好些时间去摸索,无奈没有搞定.于是,我就到博问去提问,终于搞定! 在此,非常感谢SeayXu的热心帮助. 1.在需要的位置添加一个标签 <div id="stats_ ...

  7. JQuery随笔

    web请求中,外部样式文件的加载不影响页面,js的加载会影响页面的加载速度 window.onlond 页面所有元素加载完后执行包含js,css等加载完毕 $(function(){}) 页面中DOM ...

  8. js随笔，css和js禁止网页选择文本，table的class样式使得td的class样式失效，jquery获得元素坐标

    css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-us ...

  9. jQuery 标签淡入淡出 个人随笔

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. ubuntu12.04下使用qemu模拟mips处理器安装debian

    注:ubuntu是不支持mips处理器的,只能在x86下安装运行第一步.安装qemu sudo apt-get install qemu qemu-system .执行 qemu-system-mip ...

  2. 转载: pyExcelerator(Python操作Excel内库)API 文档

    1.pyExcelerator 主要通过俩个Object操作Excel: Workbook 和Worksheet2.pyExcelerator 读取Excel文件 parase_xls(filenam ...

  3. RGB同步信号 DCLK／HS／VS／DE信号介绍

    来源:  http://www.cnblogs.com/general001/articles/3721683.html 只要是数字信号处理电路,就必须有时钟信号.在液晶面板中,像素时钟是一个非常重要 ...

  4. pom.xml第一行报错

    错误:Cannot detect Web Project version. Please specify version of Web Project through <version> ...

  5. Clojure学习资料

    以下大部分收藏自博客:http://blog.csdn.net/ithomer/article/details/17225813 官方文档: http://clojure.org/documentat ...

  6. centos防火墙操作

    centos防火墙基本操作 #/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT#/sbin/iptables -I INPUT -p tcp -- ...

  7. 一次mysql瘫痪解救

    最近手机app项目访问流量逐步的增加,对服务端webapi考验极大,是在一次新的业务消息推送后,极光推送给手机接受到的客户端达到19万个,此时app立马开始访问速度变慢了,用户体验相当差 客服接到的问 ...

  8. 课程助理For Windows（预览版，正方教务系统学生查分工具）

    其实盖子已经开发了一个功能更强大的版本,但是那个版本依然基于正方系统,也就是说只要正方系统跪了或者张院士在网站上做点手脚,这个小工具就会失效. 今天给大家的版本虽然功能及其简单.界面极端丑陋,但是通过 ...

  9. 用C#实现通用守护进程

    1. 下载 源码下载:http://pan.baidu.com/s/1vqDA2 安装包下载:http://pan.baidu.com/s/1sjmEB0p 2. 安装注意事项 在配置档中配置你要守护 ...

  10. [D3] 11. Basic D3 chart interactivity on(), select(this), classed(class, trueorfalse)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...