<!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. Linux内核是如何创建一个新进程的？

    进程描述 进程描述符(task_struct) 用来描述进程的数据结构,可以理解为进程的属性.比如进程的状态.进程的标识(PID)等,都被封装在了进程描述符这个数据结构中,该数据结构被定义为task_ ...

  2. jsp中的forward和redirect的区别

    转自http://blog.163.com/tsing_hua/blog/static/139622224201101110836644/ 一.调用方式 我们知道,在servlet中调用转发.重定向的 ...

  3. HTML快速参考

    HTML 模版 html> <head> <meta charset="utf-8"/> <title>html template< ...

  4. Swift中UITableView的简单使用

    Swift中的注释 使用"// MARK:- 注释内容",对属性或方法进行注释 使用"///注释内容"对属性或方法提供调用说明的注释 使用extension对同 ...

  5. ASP.NET MVC- VIEW Overview Part 1

    The purpose of this tutorial is to  provide you with a brief introduction to ASP.NET MVC views, view ...

  6. JGit与远程仓库链接使用的两种验证方式（ssh和https）

    JGit是使用JAVA的API来操控Git仓库的库,由Eclipse公司维护.他提供的API分成两个层次,底层命令和高层命令.底层API是直接作用于低级的仓库对象,高层的API是一个面向普通用户级别功 ...

  7. UVa 567: Risk

    这是一道很简单的图论题,只要使用宽度优先搜索(BFS)标记节点间距离即可. 我的解题代码如下: #include <iostream> #include <cstdio> #i ...

  8. OGG-01224 Bad file number

    今天在看OGG的日志时.发现例如以下OGG-01224 Bad file number错误.查阅资料才知道port不可用,看了一下mgr的參数,发现是设置的DYNAMICPORTLIST 动态port ...

  9. json xmpp

    https://github.com/lamfire/jspp http://blog.csdn.net/nomousewch/article/category/823687 http://my.os ...

  10. 【转】正确使用Block避免Cycle Retain和Crash

    原文地址:http://tanqisen.github.io/blog/2013/04/19/gcd-block-cycle-retain/ 使用指南:http://blog.csdn.net/nic ...