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

    基于Linux的系统最美妙的一点,就是你可以在终端中使用命令行来管理整个系统.使用命令行的优势在于,你可以使用相同的知识和技能来管理随便哪个Linux发行版. 对于各个发行版以及桌面环境(DE)而言, ...

  2. mongDB基本命令和Java操作MongoDB

    上一篇博文<mongoDB安装>我们安装了mongoDB,现在来复习一下它的一些基本命令:mongoDB的bin目录加入到path之后,命令行中输入mongo: 然后我们进入正题 1.查看 ...

  3. Cleaner Robot - CodeForces 589J（搜索）

    有一个M*N的矩阵,有一个会自动清洁的机器人,这个机器人会按照设定好的程序来打扫卫生,如果当前方向前面可以行走,那么直接走,如果不可以走那么会向右转动90度,然后回归上一步判断.求机器人最多能打扫的面 ...

  4. Hadoop版Helloworld之wordcount运行示例

    1.编写一个统计单词数量的java程序,并命名为wordcount.java,代码如下: import java.io.IOException; import java.util.StringToke ...

  5. Hibernate查询之HQL查询

    转自:http://blog.csdn.net/xiao_yi/article/details/1733342 Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(H ...

  6. postgresql9.4新特性jsonb学习-update更新操作

    先科普下概念:PgSQL9.4 新增 JSONB 数据类型, JSONB 同时属于 JSON (JavaScript Object Notation) 数据类型,jsonb 和 json 的输入数据几 ...

  7. chrome 全屏无法退出

    起因:chrome 按F11 全屏后,再按F11 死活无法退出全屏,关掉后,再打开chrome,自动全屏,F11无法退出全屏 系统:centos 6.3 解决:找到 chrome的用户数据存储目录,( ...

  8. 《Linux内核设计与实现》学习笔记之“Linux进程管理机制”

    一.进程(或者称为“任务”)简介 进程是OS最基本的抽象之一,通常进程包括“可执行程序代码”,“其他资源”(如:打开的文件,挂起的信号,内核内部数据,处理器状态,地址空间,一个或多个执行线程等) 二. ...

  9. C++ Virtual介绍 分类： C/C++ 2015-06-16 21:36 26人阅读 评论(0) 收藏

    参考链接:http://www.cnblogs.com/xd502djj/archive/2010/09/22/1832912.html 学过C++的人都知道在类Base中加了Virtual关键字的函 ...

  10. android 62 手机存储目录的划分

    android下应用程序的路径和javase不同,应用程序的数据要保存自己的文件夹里面 > > getFileDir(); 获取自己的文件夹 /data/data/包名(应用程序的名字)/ ...