<!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. Windows和Ubuntu双系统，修复UEFI引导的两种办法

    查看ubuntu是否是从 efi/uefi 启动的方法:  若 /sys/firmware/efi 存在则是,否则不是.shell命令: [ -d /sys/firmware/efi ] && ...

  2. Apache Commons 工具集使用简介

    Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.我选了一些比较常用的项目做简单介绍.文中用了很多网上现成的东西,我只是做了一个汇总整理. 一.Comm ...

  3. 了解mongodb

    本文大纲 基础了解mongodb(mongodb介绍,跟其他nosql区别,跟内存服务器区别等,使用场景) 在使用前,强力建议看哈http://wenku.baidu.com /link?url=lu ...

  4. composer 常用命令

    composer list 列出所有可用的命令 composer init 初始化 composer.json文件(就不劳我们自己费力创建啦),会要求输入一些信息来描述我们当前的项目,还会要求输入依赖 ...

  5. mybatis15 mapper方式 代码

    UserMapper.java package cn.itcast.mybatis.mapper; import java.util.List; import cn.itcast.mybatis.po ...

  6. \n 与 \r

    符号 ASCII码 意义 \n 换行NL \r 回车CR 回车 \r 本义是光标重新回到本行开头,r的英文return,控制字符可以写成CR,即Carriage Return 换行 \n 本义是光标往 ...

  7. 追踪CPU跑满 堆栈调试

    http://blog.donghao.org/2014/04/24/%E8%BF%BD%E8%B8%AAcpu%E8%B7%91%E6%BB%A1/

  8. hdu2058java

    The sum problem Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. java Reference(摘录)

    Java中的Reference对象和GC是紧密联系在一起的,Reference的实现也是和GC相关的. 强引用 强引用是Java中使用最普遍的引用,我们经常使用的Object o = new Obje ...

  10. vc++ 最小化到托盘的详细实现

    在VC++中,想实现将MFC最小化到系统托盘,需要调用NOTIFYICONDATA类,并注册相应的消息,以下详细讲解如何实现: 1.声明一个NOTIFYICONDATA类,也就是NOTIFYICOND ...