<!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. apache启动目录(禁止目录)与设置默认入口文件的方法

    设置默认入口文件的方法: 打开apache的conf目录,找到httpd.conf文件,打开这个文件,搜索dir_module,找到以下截图修改位置进行修改,注意重启apache服务器,修改位置才会生 ...

  2. runnable:在线IDE+代码片段分享

    在我之前的博客20个最好的在线IDE中列举过很多在线IDE,可以很方便的在云端执行代码,这样在你手头没有编译器时想试个小程序会非常有用. 今天介绍的这个网站runnable把在线IDE和代码片段结合了 ...

  3. GXT之旅：第三章：表单和窗口(4)——表单的提交和RPC

    表单使用HTTP提交 表单有两种提交方式,第一种就是传统的HTTP提交. 最直接的步骤就是: 使用FormPanel的setAction()方法,去定义submit的URL 使用FormPanel的i ...

  4. PowerShell自定义对象

    前面的性能高 使用[pscustomobject][ordered]强制类型转换 [pscustomobject][ordered]@{Name= 'Boe'Number = 1ID = 007} 使 ...

  5. MVC Controller return 格式

    所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Index()  ...

  6. DNS的查找机制、中文扩展，及其对手机扫描商标名称的支持

    DNS的查找机制.中文扩展.及其对手机扫描商标名称的支持 DNS的查找机制 当DNS查找主机时,它首先在本域里查找,假设找不到则交给更上一级的域查找,直至顶级的域. 因此,假设计算机在北大域名(pku ...

  7. javamail发送邮件的简单实例(转)

    今天学习了一下JavaMail,javamail发送邮件确实是一个比较麻烦的问题.为了以后使用方便,自己写了段代码,打成jar包,以方便以后使用.呵呵 注意:要先导入javamail的mail.jar ...

  8. ARCGIS二维三维互动

    当对三维模型进行操作时(如导航.平移)二维地图自动跟进. private void Synckron() { m_pGlobe = this._GlobeControl.Globe; m_pMap = ...

  9. pnd_start_2

    试过才知道一点都不简单,虽然表现出的逻辑是错的,但是至少运行上是正确的.

  10. Task类（任务）

    任务表示应完成的某个单元的工作.这个单元的工作可以在单独的线程中运行,也可以以同步方式启动一个任务,这需要等待主调用线程.使用任务不仅可以获得一个抽象层,还可以对底层线程进行很多控制. 1.启动任务 ...