丑小鸭变黑天鹅

jQuery学习笔记

一、初识jQuery
- 1、是什么？
- 2、为什么使用？
- 3、如何使用
二、jQuery的使用
- 1、jQuery函数：$ / jQuery
- 2、jQuery函数的使用
- - 1、核心函数
  - 2、核心对象
- 3、选择器
- 4、基本选择器
- 5、层次选择器
- 6、过滤选择器
- 7、常见效果-表格隔行变色
- 8、表单选择器
- 9、工具方法
- 10、常见效果-多Tab点击切换
- 11、属性
- 12、css
- 13、位置offset和position
- 14、scroll
- 15、常见效果-回到顶部
- 16、元素的尺寸
- 17、对象的筛选-过滤
- 18、筛选-对象的查找
- 19、一个小案例-选择复选框
- - 1、jQuery方式
  - 2、原生js方式
- 20、文档处理-增删改
- 21、例子-添加删除记录
- - 1、jQuery方式
  - 2、jQuery方式2-改进（使用了事件委托）
  - 3、js原生方式
- 22、事件处理
- 23、区别mouseover与mouseenter
- 24、事件委托
- 25、轮播图
- - 1、原生
  - 2、jQuery
- 26、淡入淡出效果
- 27、滑动
- 28、显示与隐藏
- 29、自定义动画
- 30、导航动态显示效果
三、多库并存
四、onload与ready
五、扩展插件
六、jQuery插件-jQueryValidate
七、jQuery插件-jQueryUI
八、jQuery日期控件-laydate
九、案例-用jQuery做一些pc端京东页面效果

一、初识jQuery

个人认为学习jQuery核心要会js以及会查中文文档

1、是什么？

一个JS函数库: write less, do more
封装简化DOM操作(CRUD) / Ajax

2、为什么使用？

强大选择器: 方便快速查找DOM元素
隐式遍历(迭代): 一次操作多个元素
读写合一: 读数据/写数据用的是一个函数
链式调用: 可以通过.不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容

3、如何使用

引入jQuery库
- 本地引入与CDN远程引入
- 测试版与生产版(压缩版)
使用jQuery
- 使用jQuery函数: $/jQuery
- 使用jQuery对象: $ xxx(执行$()得到的)


<html>
	<head>
		<meta charset="UTF-8">
		<title>01_初识jQuerytitle>
		
		<script type="text/javascript">
			window.onload = function() {
				var btn1 = document.getElementById('btn1')
				btn1.onclick = function() {
					var username = document.getElementById('username').value
					alert(username)
				}
			}
		script>
		
		
		<script type="text/javascript" src="js/jquery-1.12.3.js">script>
		
		
		<script type="text/javascript">
			//绑定文档加载完成的监听
			$(function (){
				$("#btn2").click(function (){
					var username = $("#username").val();
					alert(username);
				})
			})
			/*
			1. 使用jQuery核心函数: $或者jQuery
			2. 使用jQuery核心对象: 执行$()返回的对象
			 */
			//新的注释
		script>
	head>
	<body>
		
		用户名: <input type="text" id="username">
		<button id="btn1">确定(原生版)button>
		<button id="btn2">确定(jQuery版)button>
	body>
html>

二、jQuery的使用

1、jQuery函数：$ / jQuery


<html>

	<head>
		<meta charset="UTF-8">
		<title>jQuery的两把利器title>
	head>
	<body>
		<button>测试button>
		
	
		<script type="text/javascript" src="js/jquery-1.12.3.js">script>
		<script type="text/javascript">
			//1.  jQuery函数: 直接可用
			console.log($, typeof $);
			console.log(jQuery === $); // true
			//2. jQuery对象: 执行jQuery函数得到它
			console.log($() instanceof Object) ;// true
			/*
			(function (window) {
			  var jQuery = function () {
			    return new xxx();
			  }
			  window.$ = window.jQuery = jQuery;
			})(window)
			*/
		script>
	body>
html>

2、jQuery函数的使用

1、核心函数

jQuery向外暴露的就是jQuery函数, 可以直接使用
- 当成一般函数使用人: $(param)
  - param是function: 相当于window.onload = function(文档加载完成的监听)
  - param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
  - param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
  - param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
- 当成对象使用: $.xxx
  - each(obj/arr, function(key, value){})
  - trim(str)


<html>
	<head>
		<meta charset="UTF-8">
		<title>03_jQuery核心函数title>
	head>
	<body>
		<div>
			<button id="btn">测试button>
			<br />
			<input type="text" name="msg1" /><br />
			<input type="text" name="msg2" /><br />
		div>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
		   需求2. 遍历输出数组中所有元素值
		   需求3. 去掉"  my atguigu  "两端的空格
		   */
			/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
			//1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
			$(function() { // 绑定文档加载完成的监听
				// 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
				$('#btn').click(function() { // 绑定点击事件监听
					// this是什么? 发生事件的dom元素(

2、核心对象

jQuery对象
- 包含所有匹配的n个DOM元素的伪数组对象
- 执行$()返回的就是jQuery对象
- 基本行为:
- length/size(): 得到dom元素的个数
- 、[index]: 得到指定下标对应的dom元素
- each(function(index, domEle){}): 遍历所有dom元素
- index(): 得到当前dom元素在所有兄弟中的下标


<html>
	<head>
		<meta charset="UTF-8">
		<title>04_jQuery对象title>
	head>

	<body>
		<button>测试一button>
		<button>测试二button>
		<button id="btn3">测试三button>
		<button>测试四button>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   需求1. 统计一共有多少个按钮
		   需求2. 取出第2个button的文本
		   需求3. 输出所有button标签的文本
		   需求4. 输出'测试三'按钮是所有按钮中的第几个
		   */
			//需求1. 统计一共有多少个按钮
			var $buttons = $('button'); //返回的是jQuery对象
			/*size()/length: 包含的DOM元素个数*/
			console.log($buttons.size(), $buttons.length);

			//需求2. 取出第2个button的文本
			/*[index]/get(index): 返回的是对应位置的DOM元素*/
			console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML);

			//需求3. 输出所有button标签的文本
			/*each(): 遍历包含的所有DOM元素*/
			/*$buttons.each(function (index, domEle) {
			  console.log(index, domEle.innerHTML, this)
			})*/
			$buttons.each(function() {
				console.log(this.innerHTML);
			})
			//需求4. 输出'测试三'按钮是所有按钮中的第几个
			/*index(): 得到在所在兄弟元素中的下标*/
			console.log($('#btn3').index()); //2
			/*
			1. 伪数组
			  * Object对象
			  * length属性
			  * 数值下标属性
			  * 没有数组特别的方法: forEach(), push(), pop(), splice()
			 */
			console.log($buttons instanceof Array); // false
			// 自定义一个伪数组
			var weiArr = {};
			weiArr.length = 0;
			weiArr[0] = 'atguigu'；
			weiArr.length = 1;
			weiArr[1] = 123;
			weiArr.length = 2;
			for (var i = 0; i < weiArr.length; i++) {
				var obj = weiArr[i];
				console.log(i, obj);
			}
			console.log(weiArr.forEach, $buttons.forEach); //undefined, undefined
		script>
	body>
html>

3、选择器

是什么?
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
- 分类
  - 基本
    - #id
    - tagName/*
    - .class
    - selector1,selector2,selector3: 并集
    - selector1selector2selector3: 交集
  - 层次
    - 找子孙后代, 兄弟元素
    - selector1>selector2: 子元素
    - selector1 selector2: 后代元素
  - 过滤
    - 在原有匹配元素中筛选出其中一些
    - :first
    - :last
    - :eq(index)
    - :lt
    - :gt
    - :odd
    - :even
    - :not(selector)
    - :hidden
    - :visible
    - [attrName]
    - [attrName=value]
  - 表单
    - :input
    - :text
    - :checkbox
    - :radio
    - :checked: 选中的

4、基本选择器


<html>
	<head>
		<meta charset="UTF-8">
		<title>05_基本选择器title>
	head>

	<body>
		<div id="div1" class="box">div1(class="box")div>
		<div id="div2" class="box">div2(class="box")div>
		<div id="div3">div3div>
		<span class="box">span(class="box")span>
		<br>
		<ul>
			<li>AAAAAli>
			<li title="hello">BBBBB(title="hello")li>
			<li class="box">CCCCC(class="box")li>
			<li title="hello">DDDDDD(title="hello")li>
		ul>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. 选择id为div1的元素
		   2. 选择所有的div元素
		   3. 选择所有class属性为box的元素
		   4. 选择所有的div和span元素
		   5. 选择所有class属性为box的div元素
		   */
			//1. 选择id为div1的元素
			// $('#div1').css('background', 'red');

			//2. 选择所有的div元素
			// $('div').css('background', 'red');
			/* $("div").css({background:"red"}); */

			//3. 选择所有class属性为box的元素
			//$('.box').css('background', 'red');

			//4. 选择所有的div和span元素
			// $('div,span').css('background', 'red');

			//5. 选择所有class属性为box的div元素
			//$('div.box').css('background', 'red');

			//$('*').css('background', 'red');
		script>
	body>
html>

5、层次选择器


<html>
	<head>
		<meta charset="UTF-8">
		<title>06_层次选择器title>
	head>
	<body>
		<ul>
			<li>AAAAAli>
			<li class="box">CCCCCli>
			<li title="hello"><span>BBBBBspan>li>
			<li title="hello"><span class="box">DDDDspan>li>
			<span>EEEEEspan>
		ul>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. 选中ul下所有的的span
		   2. 选中ul下所有的子元素span
		   3. 选中class为box的下一个li
		   4. 选中ul下的class为box的元素后面的所有兄弟元素
		   */
		  
			//1. 选中ul下所有的的span
			// $('ul span').css('background', 'yellow')

			//2. 选中ul下所有的子元素span
			// $('ul>span').css('background', 'yellow')

			//3. 选中class为box的下一个li
			// $('.box+li').css('background', 'yellow')

			//4. 选中ul下的class为box的元素后面的所有兄弟元素
			$('ul .box~*').css('background', 'yellow')
		script>
	body>
html>

6、过滤选择器


<html>
	<head>
		<meta charset="UTF-8">
		<title>07_过滤选择器title>
	head>
	<body>
		<div id="div1" class="box">class为box的div1div>
		<div id="div2" class="box">class为box的div2div>
		<div id="div3">div3div>
		<span class="box">class为box的spanspan>
		<br />
		<ul>
			<li>AAAAAli>
			<li title="hello">BBBBBli>
			<li class="box">CCCCCli>
			<li title="hello">DDDDDDli>
			<li title="two">BBBBBli>
			<li style="display:none">我本来是隐藏的li>
		ul>
		
		<script src="js/jquery-1.12.3.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. 选择第一个div
		   2. 选择最后一个class为box的元素
		   3. 选择所有class属性不为box的div
		   4. 选择第二个和第三个li元素
		   5. 选择内容为BBBBB的li
		   6. 选择隐藏的li
		   7. 选择有title属性的li元素
		   8. 选择所有属性title为hello的li元素
		   */
			//1. 选择第一个div
			// $('div:first').css('background', 'red')

			//2. 选择最后一个class为box的元素
			//$('.box:last').css('background', 'red')

			//3. 选择所有class属性不为box的div
			// $('div:not(.box)').css('background', 'red')  //没有class属性也可以

			//4. 选择第二个和第三个li元素
			// $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
			//$('li:lt(3):gt(0)').css('background', 'red')

			//5. 选择内容为BBBBB的li
			// $('li:contains("BBBBB")').css('background', 'red')

			//6. 选择隐藏的li
			// console.log($('li:hidden').length, $('li:hidden')[0])

			//7. 选择有title属性的li元素
			// $('li[title]').css('background', 'red')

			//8. 选择所有属性title为hello的li元素
			$('li[title="hello"]').css('background', 'red')
		script>
	body>
html>

7、常见效果-表格隔行变色


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>01__表格隔行变色title>
		<style>
			div, span, p {
			  width: 140px;
			  height: 140px;
			  margin: 5px;
			  background: #aaa;
			  border: #000 1px solid;
			  float: left;
			  font-size: 17px;
			  font-family: Verdana;
			}
	
			div.mini {
			  width: 55px;
			  height: 55px;
			  background-color: #aaa;
			  font-size: 12px;
			}

			div.hide {
			  display: none;
			}

			#data {
			  width: 600px;
			}
	
			#data, td, th {
			  border-collapse: collapse;
			  border: 1px solid #aaaaaa;
			}

			th, td {
			  height: 28px;
			}

			#data thead {
			  background-color: #333399;
			  color: #ffffff;
			}

			.odd {
			  background-color: #ccccff;
			}
		style>
	head>
	<body>
		<table id="data">
			<thead>
				<tr>
					<th>姓名th>
					<th>工资th>
					<th>入职时间th>
					<th>操作th>
				tr>
			thead>
			<tbody>
				<tr>
					<td>Tomtd>
					<td>$3500td>
					<td>2010-10-25td>
					<td><a href="javascript:void(0)">删除a>td>
				tr>
				<tr>
					<td>Marytd>
					<td>$3400td>
					<td>2010-12-1td>
					<td><a href="javascript:void(0)">删除a>td>
				tr>
				<tr>
					<td>Kingtd>
					<td>$5900td>
					<td>2009-08-17td>
					<td><a href="javascript:void(0)">删除a>td>
				tr>
				<tr>
					<td>Scotttd>
					<td>$3800td>
					<td>2012-11-17td>
					<td><a href="javascript:void(0)">删除a>td>
				tr>
				<tr>
					<td>Smithtd>
					<td>$3100td>
					<td>2014-01-27td>
					<td><a href="javascript:void(0)">删除a>td>
				tr>
				<tr>
					<td>Allentd>
					<td>$3700td>
					<td>2011-12-05td>
					<td><a href="javascript:void(0)">删除a>td>
				tr>
			tbody>
		table>

		<script type="text/javascript" src="jquery-1.10.1.js">script>
		<script type="text/javascript">
			$('#data>tbody>tr:odd').css('background', '#ccccff')
			// $('#data>tbody>tr:odd').addClass('odd')
			//$('#data>tbody>tr:odd').attr('class', 'odd')
		script>
	body>
html>

效果如图：

8、表单选择器


<html>
	<head>
		<meta charset="UTF-8">
		<title>08_表单选择器title>
	head>
	<body>
		<form>
			用户名: <input type="text" /><br>
			密 码: <input type="password" /><br>
			爱 好:
			<input type="checkbox" checked="checked" />篮球
			<input type="checkbox" />足球
			<input type="checkbox" checked="checked" />羽毛球 <br>
			性 别:
			<input type="radio" name="sex" value='male' />男
			<input type="radio" name="sex" value='female' />女<br>
			邮 箱: <input type="text" name="email" disabled="disabled" /><br>
			所在地:
			<select>
				<option value="1">北京option>
				<option value="2" selected="selected">天津option>
				<option value="3">河北option>
			select><br>
			<input type="submit" value="提交" />
		form>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. 选择不可用的文本输入框
		   2. 显示选择爱好 的个数
		   3. 显示选择的城市名称
		   */
			//1. 选择不可用的文本输入框
			// $(':text:disabled').css('background', 'red')
			//2. 显示选择爱好 的个数
			console.log($(':checkbox:checked').length)
			//3. 显示选择的城市名称
			$(':submit').click(function() {
				var city = $('select>option:selected').html(); // 选择的option的标签体文本
				city = $('select').val();// 选择的option的value属性值
				alert(city);
			})
		script>
	body>
html>

9、工具方法


<html>
	<head>
		<meta charset="UTF-8">
		<title>09_$工具方法title>
	head>
	<body>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			//1. $.each(): 遍历数组或对象中的数据
			var obj = {
				name: 'Tom',
				setName: function(name) {
					this.name = name
				}
			}
			$.each(obj, function(key, value) {
				console.log(key, value)
			})

			//2. $.trim(): 去除字符串两边的空格
			//3. $.type(obj): 得到数据的类型
			console.log($.type($)) // 'function'

			//4. $.isArray(obj): 判断是否是数组
			console.log($.isArray($('body')), $.isArray([])) // false true
			//5. $.isFunction(obj): 判断是否是函数
			console.log($.isFunction($)) // true
			//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
			var json = '{"name":"Tom", "age":12}' // json对象: {}
			// json对象===>JS对象
			console.log($.parseJSON(json))
			json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
			// json数组===>JS数组
			console.log($.parseJSON(json))
			/*
			JSON.parse(jsonString)   json字符串--->js对象/数组
			JSON.stringify(jsObj/jsArr)  js对象/数组--->json字符串
			*/
		script>
	body>
html>

10、常见效果-多Tab点击切换


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>02_多Tab点击切换title>
		<style>
			* {
			  margin: 0;
			  padding: 0;
			}

			#tab li {
			  float: left;
			  list-style: none;
			  width: 80px;
			  height: 40px;
			  line-height: 40px;
			  cursor: pointer;
			  text-align: center;
			}

			#container {
			  position: relative;
			}

			#content1, #content2, #content3 {
			  width: 300px;
			  height: 100px;
			  padding: 30px;
			  position: absolute;
			  top: 40px;
			  left: 0;
			}
	
			#tab1, #content1 {
			  background-color: #ffcc00;
			}

			#tab2, #content2 {
			  background-color: #ff00cc;
			}

			#tab3, #content3 {
			  background-color: #00ccff;
			}
		  style>
	head>
	<body>
		<h2>多Tab点击切换h2>

		<ul id="tab">
			<li id="tab1" value="1">10元套餐li>
			<li id="tab2" value="2">30元套餐li>
			<li id="tab3" value="3">50元包月li>
		ul>

		<div id="container">
			<div id="content1">
				10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟
			div>
			<div id="content2" style="display: none">
				30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
			div>
			<div id="content3" style="display: none">
				50元包月详情：<br /> 每月无限量随心打
			div>
		div>


		<script type="text/javascript" src="jquery-1.10.1.js">script>
		<script type="text/javascript">
			var $contents = $('#container>div')
			// 给3个li加监听
			/*$('#tab>li').click(function () { // 隐式遍历
			  //alert('----')
			  // 隐隐藏所有内容div
			  $contents.css('display', 'none')
			  // 显示对应的内容div
			  // 得到当前点击的li在兄弟中下标
			  var index = $(this).index()
			  // 找到对应的内容div, 并显示
			  $contents[index].style.display = 'block'
			  // $($contents[index]).css('display', 'block')
			})*/

			var currIndex = 0 //当前显示的内容div的下标
			$('#tab>li').click(function() { // 隐式遍历
				//alert('----')
				// 隐藏当前已经显示的内容div
				$contents[currIndex].style.display = 'none'
				// 显示对应的内容div
				// 得到当前点击的li在兄弟中下标
				var index = $(this).index()
				// 找到对应的内容div, 并显示
				$contents[index].style.display = 'block'

				// 更新下标
				currIndex = index
			})
		script>
	body>
html>

11、属性


<html>
	<head>
		<meta charset="UTF-8">
		<title>10_属性title>
	head>
	<body>
		<div id="div1" class="box" title="one">class为box的div1div>
		<div id="div2" class="box" title="two">class为box的div2div>
		<div id="div3">div3div>
		<span class="box">class为box的spanspan>
		<br />
		<ul>
			<li>AAAAAli>
			<li title="hello" class="box2">BBBBBli>
			<li class="box">CCCCCli>
			<li title="hello">DDDDDDli>
			<li title="two"><span>BBBBBspan>li>
		ul>
		<input type="text" name="username" value="guiguClass" />
		<br>
		<input type="checkbox">
		<input type="checkbox">
		<br>
		<button>选中button>
		<button>不选中button>

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. 读取第一个div的title属性
		   2. 给所有的div设置name属性(value为atguigu)
		   3. 移除所有div的title属性
		   4. 给所有的div设置class='guiguClass'
		   5. 给所有的div添加class='abc'
		   6. 移除所有div的guiguClass的class
		   7. 得到最后一个li的标签体文本
		   8. 设置第一个li的标签体为"mmmmmmmmm"
		   9. 得到输入框中的value值
		   10. 将输入框的值设置为atguigu
		   11. 点击'全选'按钮实现全选
		   12. 点击'全不选'按钮实现全不选
		   */
			//1. 读取第一个div的title属性
			// console.log($('div:first').attr('title')) // one

			//2. 给所有的div设置name属性(value为atguigu)
			// $('div').attr('name', 'atguigu')

			//3. 移除所有div的title属性
			// $('div').removeAttr('title')

			//4. 给所有的div设置class='guiguClass'
			//$('div').attr('class', 'guiguClass')

			//5. 给所有的div添加class='abc'
			//$('div').addClass('abc')

			//6. 移除所有div的guiguClass的class
			//$('div').removeClass('guiguClass')

			//7. 得到最后一个li的标签体文本
			//console.log($('li:last').html())

			//8. 设置第一个li的标签体为"mmmmmmmmm
"
			//$('li:first').html('mmmmmmmmm
')

			//9. 得到输入框中的value值
			//console.log($(':text').val()) // 读取

			//10. 将输入框的值设置为atguigu
			//$(':text').val('atguigu') // 设置      读写合一
			//11. 点击'全选'按钮实现全选
			// attr(): 操作属性值为非布尔值的属性
			// prop(): 专门操作属性值为布尔值的属性
			var $checkboxs = $(':checkbox')
			$('button:first').click(function() {
				$checkboxs.prop('checked', true)
			})

			//12. 点击'全不选'按钮实现全不选
			$('button:last').click(function() {
				$checkboxs.prop('checked', false)
			})
		script>
	body>
html>

12、css


<html>
	<head>
		<meta charset="UTF-8">
		<title>11_csstitle>
	head>
	<body>
		<p style="color: blue;">月亮的后裔p>
		<p style="color: green;">太阳的后裔p>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   1. 得到第一个p标签的颜色
		   2. 设置所有p标签的文本颜色为red
		   3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
		   */
			//1. 得到第一个p标签的颜色
			//console.log($('p:first').css('color'))

			//2. 设置所有p标签的文本颜色为red
			//$('p').css('color', 'red')

			//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
			$('p:eq(1)').css({
				color: '#ff0011',
				background: 'blue',
				width: 300,
				height: 30
			})
		script>
	body>
html>

13、位置offset和position


<html>
	<head>
		<meta charset="UTF-8">
		<title>12_offset和positiontitle>
	head>
	<style type="text/css">
		* {
			margin: 0px;
		}

		.div1 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 20px;
			left: 10px;
			background: blue;
		}

		.div2 {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50px;
			background: red;
		}

		.div3 {
			position: absolute;
			top: 250px;
		}
	style>
	<body style="height: 2000px;">

		<div class="div1">
			<div class="div2">测试offsetdiv>
		div>

		<div class='div3'>
			<button id="btn1">读取offset和positionbutton>
			<button id="btn2">设置offsetbutton>
		div>

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
			  需求:
			  1. 点击 btn1
				打印 div1 相对于页面左上角的位置
				打印 div2 相对于页面左上角的位置
				打印 div1 相对于父元素左上角的位置
				打印 div2 相对于父元素左上角的位置
			  2. 点击 btn2
				设置 div2 相对于页面的左上角的位置
			*/
			$('#btn1').click(function() {
				//    打印 div1 相对于页面左上角的位置
				var offset = $('.div1').offset()
				console.log(offset.left, offset.top) // 10 20
				//    打印 div2 相对于页面左上角的位置
				offset = $('.div2').offset()
				console.log(offset.left, offset.top) // 10 70
				//    打印 div1 相对于父元素左上角的位置
				var position = $('.div1').position()
				console.log(position.left, position.top) // 10 20
				//    打印 div2 相对于父元素左上角的位置
				position = $('.div2').position()
				console.log(position.left, position.top) // 0 50
			})

			$('#btn2').click(function() {
				$('.div2').offset({
					left: 50,
					top: 100
				})
			})
		script>
	body>
html>

14、scroll


<html>
	<head>
		<meta charset="UTF-8">
		<title>13_元素滚动title>
	head>
	<body style="height: 2000px;">
		<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
			This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text. This is some text.
			his is some text.
		div>
		<br>
		<br>
		<br>
		<button id="btn1">得到scrollTopbutton>
		<button id="btn2">设置scrollTopbutton>
		
		<script src="js/jquery-1.10.1.js">script>
		<script>
			/*
		   需求:
		   1. 得到div或页面滚动条的坐标
		   2. 让div或页面的滚动条滚动到指定位置
		   */
			//1. 得到div或页面滚动条的坐标
			$('#btn1').click(function() {
				console.log($('div').scrollTop())
				// console.log($('html').scrollTop()+$('body').scrollTop())
				console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()) // 兼容IE/Chrome
			})
			//2. 让div或页面的滚动条滚动到指定位置
			$('#btn2').click(function() {
				$('div').scrollTop(200)
				$('html,body').scrollTop(300)
			})
		script>
	body>
html>

15、常见效果-回到顶部


<html>
	<head>
		<meta charset="UTF-8">
		<title>03_回到顶部title>
		<style>
			#to_top {
			  width: 30px;
			  height: 40px;
			  font: 14px/20px arial;
			  text-align: center;
			  background: #06c;
			  position: fixed;
			  cursor: pointer;
			  color: #fff;
			  left: 1050px;
			  top: 500px;
			}
		  style>
	head>
	<body style="height: 2000px;">
		<div id="to_top">返回顶部div>
		<script type="text/javascript" src="../js/jquery-1.10.1.js">script>
		<script type="text/javascript">
			$('#to_top').click(function() {
				// 瞬间滚到顶部
				//$('html,body').scrollTop(0)
				// 平滑滚到顶部
				// 总距离
				var $page = $('html,body')
				var distance = $('html').scrollTop() + $('body').scrollTop()
				// 总时间
				var time = 500
				// 间隔时间
				var intervalTime = 50
				var itemDistance = distance / (time / intervalTime)
				// 使用循环定时器不断滚动
				clearInterval(intervalId);
				var intervalId = setInterval(function() {
					distance -= itemDistance
					// 到达顶部, 停止定时器
					if (distance <= 0) {
						distance = 0 //修正
						clearInterval(intervalId)
					}
					$page.scrollTop(distance)
				}, intervalTime)
			})
		script>
	body>
html>

16、元素的尺寸


<html>
	<head>
		<meta charset="UTF-8">
		<title>14_元素的尺寸title>
	head>
	<style>
		div {
			width: 100px;
			height: 150px;
			background: red;
			padding: 10px;
			border: 10px #fbd850 solid;
			margin: 10px;
		  }
		style>
	head>
	<body>
		<div>divdiv>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script>
			var $div = $('div')
			// 1. 内容尺寸
			console.log($div.width(), $div.height()) // 100 150
			// 2. 内部尺寸
			console.log($div.innerWidth(), $div.innerHeight()) //120 170
			// 3. 外部尺寸
			console.log($div.outerWidth(), $div.outerHeight()) //140 190
			console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210
		script>
	body>
html>

17、对象的筛选-过滤


<html>
	<head>
		<meta charset="UTF-8">
		<title>15_筛选_过滤title>
	head>
	<body>
		<ul>
			<li>AAAAAli>
			<li title="hello" class="box2">BBBBBli>
			<li class="box">CCCCCli>
			<li title="hello">DDDDDDli>
			<li title="two"><span>BBBBBspan>li>
		ul>
		<li>eeeeeli>
		<li>EEEEEli>
		<br>

		

		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. ul下li标签第一个
		   2. ul下li标签的最后一个
		   3. ul下li标签的第二个
		   4. ul下li标签中title属性为hello的
		   5. ul下li标签中title属性不为hello的
		   6. ul下li标签中有span子标签的
		   */
			var $lis = $('ul>li')
			//1. ul下li标签第一个
			// $lis.first().css('background', 'red')
			// $lis[0].style.background = 'red'

			//2. ul下li标签的最后一个
			// $lis.last().css('background', 'red')

			//3. ul下li标签的第二个
			// $lis.eq(1).css('background', 'red')

			//4. ul下li标签中title属性为hello的
			// $lis.filter('[title=hello]').css('background', 'red')

			//5. ul下li标签中title属性不为hello的
			// $lis.not('[title=hello]').css('background', 'red')
			// $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')

			//6. ul下li标签中有span子标签的
			$lis.has('span').css('background', 'red')
		script>
	body>
html>

18、筛选-对象的查找


<html>
	<head>
		<meta charset="UTF-8">
		<title>16_筛选_查找孩子-父母-兄弟标签title>
	head>
	<body>
		<div id="div1" class="box" title="one">class为box的div1div>
		<div id="div2" class="box">class为box的div2div>
		<div id="div3">div3div>
		<span class="box">class为box的spanspan>
		<br />
		<div>
			<ul>
				<span>span文本1span>
				<li>AAAAAli>
				<li title="hello" class="box2">BBBBBli>
				<li class="box" id='cc'>CCCCCli>
				<li title="hello">DDDDDDli>
				<li title="two"><span>span文本2span>li>
				<span>span文本3span>
			ul>
			<span>span文本444span><br>
			<li>eeeeeli>
			<li>EEEEEli>
			<br>
		div>

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. ul标签的第2个span子标签
		   2. ul标签的第2个span后代标签
		   3. ul标签的父标签
		   4. id为cc的li标签的前面的所有li标签
		   5. id为cc的li标签的所有兄弟li标签
		   */
			var $ul = $('ul')
			//1. ul标签的第2个span子标签
			//$ul.children('span:eq(1)').css('background', 'red')

			//2. ul标签的第2个span后代标签
			// $ul.find('span:eq(1)').css('background', 'red')

			//3. ul标签的父标签
			// $ul.parent().css('background', 'red')

			//4. id为cc的li标签的前面的所有li标签
			var $li = $('#cc')
			// $li.prevAll('li').css('background', 'red')

			//5. id为cc的li标签的所有兄弟li标签
			$li.siblings('li').css('background', 'red')
		script>
	body>
html>

19、一个小案例-选择复选框

1、jQuery方式


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>全选练习title>
	head>
	<body>
		<form>
			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			<input type="button" id="sendBtn" value="提　交" />
		form>

		<script type="text/javascript" src="../js/jquery-1.10.1.js">script>
		<script type="text/javascript">
			/*
		   功能说明:
		   1. 点击'全选': 选中所有爱好
		   2. 点击'全不选': 所有爱好都不勾选
		   3. 点击'反选': 改变所有爱好的勾选状态
		   4. 点击'提交': 提示所有勾选的爱好
		   5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
		   6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
		   */
			var $checkedAllBox = $('#checkedAllBox')
			var $items = $(':checkbox[name=items]')

			// 1. 点击'全选': 选中所有爱好
			$('#checkedAllBtn').click(function() {
				$items.prop('checked', true)
				$checkedAllBox.prop('checked', true)
			})

			// 2. 点击'全不选': 所有爱好都不勾选
			$('#checkedNoBtn').click(function() {
				$items.prop('checked', false)
				$checkedAllBox.prop('checked', false)
			})

			// 3. 点击'反选': 改变所有爱好的勾选状态
			$('#checkedRevBtn').click(function() {
				$items.each(function() {
					this.checked = !this.checked
				})
				$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length === 0)
			})

			//4. 点击'提交': 提示所有勾选的爱好
			$('#sendBtn').click(function() {
				$items.filter(':checked').each(function() {
					alert(this.value)
				})
			})

			// 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
			$checkedAllBox.click(function() {
				$items.prop('checked', this.checked)
			})

			// 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
			$items.click(function() {
				$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length === 0)
			})
		script>
	body>
html>

2、原生js方式


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>全选练习title>
	head>
	<body>
		<form method="post" action="">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			<input type="button" id="sendBtn" value="提　交" />
		form>
		<script type="text/javascript">
			/*
		   功能说明:
			 1. 点击'全选': 选中所有爱好
			 2. 点击'全不选': 所有爱好都不勾选
			 3. 点击'反选': 改变所有爱好的勾选状态
			 4. 点击'提交': 提示所有勾选的爱好
			 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
			 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
		   技术点：
			 1.DOM查询
			 2.事件回调函数绑定
			 3.checkbox操作
			 4.事件回调函数中的this
			 5.逻辑思维能力
		   */

			window.onload = function() {

				var items = document.getElementsByName("items");

				//1.#checkedAllBtn
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function() {
					setItemsChecked(true);
					checkedAllBox.checked = true;
				};

				//2.#checkedNoBtn
				var checkedNoBtn = document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick = function() {
					setItemsChecked(false);
					checkedAllBox.checked = false;
				};
				//3.#checkedRevBtn
				var checkedRevBtn = document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick = function() {
					setItemsChecked();
					//点满时将checkedAllBox.checked设置为true
					//统计当前items中被选中的个数
					checkedAllBox.checked = isAllChecked();
				};

				//4.#checkedAllBox
				var checkedAllBox = document.getElementById("checkedAllBox");
				checkedAllBox.onclick = function() {
					setItemsChecked(this.checked);
				};

				//5.#sendBtn
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function() {
					for (var i = 0; i < items.length; i++) {
						if (items[i].checked) {
							alert(items[i].value);
						}
					}
				};
				//6.items
				for (var i = 0; i < items.length; i++) {
					items[i].onclick = function() {
						//点满时将checkedAllBox.checked设置为true
						//统计当前items中被选中的个数
						checkedAllBox.checked = isAllChecked();
					}
				}

				function isAllChecked() {
					for (var j = 0; j < items.length; j++) {
						if (!items[j].checked)
							return false;
					}
					return true;
				}

				function setItemsChecked(checked) {
					for (var i = 0; i < items.length; i++) {
						items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;
					}
				}
			}
		script>
	body>
html>

20、文档处理-增删改


<html>
	<head>
		<meta charset="UTF-8">
		<title>17_文档_增删改title>
	head>
	<style type="text/css">
		* {
			margin: 0px;
		}
		.div1 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 20px;
			left: 10px;
			background: blue;
		}
		.div2 {
			position: absolute;
			width: 100px;
			height: 100px;
			/*top: 50px;*/
			background: red;
		}
		.div3 {
			position: absolute;
			top: 250px;
		}
	style>
	<body>
		<ul id="ul1">
			<li>AAAAAli>
			<li title="hello">BBBBBli>
			<li class="box">CCCCCli>
			<li title="hello">DDDDDDli>
			<li title="two">EEEEEli>
			<li>FFFFFli>
		ul>
		<br>
		<br>
		<ul id="ul2">
			<li>aaali>
			<li title="hello">bbbli>
			<li class="box">cccli>
			<li title="hello">dddli>
			<li title="two">eeeli>
		ul>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求:
		   1. 向id为ul1的ul下添加一个span(最后)
		   2. 向id为ul1的ul下添加一个span(最前)
		   3. 在id为ul1的ul下的li(title为hello)的前面添加span
		   4. 在id为ul1的ul下的li(title为hello)的后面添加span
		   5. 将在id为ul2的ul下的li(title为hello)全部替换为p
		   6. 移除id为ul2的ul下的所有li
		   */

			//1. 向id为ul1的ul下添加一个span(最后)
			var $ul1 = $('#ul1')
			// $ul1.append('append()添加的span')
			$('appendTo()添加的span').appendTo($ul1)

			//2. 向id为ul1的ul下添加一个span(最前)
			// $ul1.prepend('prepend()添加的span')
			$('prependTo()添加的span').prependTo($ul1)

			//3. 在id为ul1的ul下的li(title为hello)的前面添加span
			$ul1.children('li[title=hello]').before('before()添加的span')

			//4. 在id为ul1的ul下的li(title为hello)的后面添加span
			$ul1.children('li[title=hello]').after('after()添加的span')

			//5. 将在id为ul2的ul下的li(title为hello)全部替换为p
			$('#ul2>li[title=hello]').replaceWith('replaceAll()替换的p
')
			//6. 移除id为ul2的ul下的所有li
			// $('#ul2').empty()  // 也会删除
			$('#ul2>li').remove()
		script>
	body>
html>

21、例子-添加删除记录

1、jQuery方式


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习title>
		<link rel="stylesheet" type="text/css" href="../css/css.css" />
	head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Nameth>
				<th>Emailth>
				<th>Salaryth>
				<th> th>
			tr>
			<tr>
				<td>Tomtd>
				<td>[email protected]td>
				<td>5000td>
				<td><a href="deleteEmp?id=001">Deletea>td>
			tr>
			<tr>
				<td>Jerrytd>
				<td>[email protected]td>
				<td>8000td>
				<td><a href="deleteEmp?id=002">Deletea>td>
			tr>
			<tr>
				<td>Bobtd>
				<td>[email protected]td>
				<td>10000td>
				<td><a href="deleteEmp?id=003">Deletea>td>
			tr>
		table>
		<div id="formDiv">
			<h4>添加新员工h4>
			<table>
				<tr>
					<td class="word">name:td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					td>
				tr>
				<tr>
					<td class="word">email:td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					td>
				tr>
				<tr>
					<td class="word">salary:td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					td>
				tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">
							Submit
						button>
					td>
				tr>
			table>
		div>
		<script type="text/javascript" src="jquery-1.10.1.js">script>
		<script type="text/javascript">
			/*
		  1. 添加
		  2. 删除
		   */
			$('#addEmpButton').click(function() {
				//1. 收集输入的数据
				var $empName = $('#empName')
				var $email = $('#email')
				var $salary = $('#salary')
				var empName = $empName.val()
				var email = $email.val()
				var salary = $salary.val()
				//2. 生成对应的标签结构, 并插入#employeeTable的tbody中
				/*
				 
				   Bob
				   [email protected]
				   10000
				   Delete
				 
				 */
					$('')
					.append('' + empName + '') // 拼串
					.append('' + email + '')
					.append('' + salary + '')
					.append(' + Date.now() + '>Delete')
					.appendTo('#employeeTable>tbody')
					.find('a')
					.click(clickDelete)
				//3. 清除输入
				$empName.val('')
				$email.val('')
				$salary.val('')
			})
			// 给所有删除链接绑定点击监听
			$('#employeeTable a').click(clickDelete)
			/*
			点击删除的回调函数
			 */
			function clickDelete() {
				var $tr = $(this).parent().parent()
				var name = $tr.children(':first').html()
				if (confirm('确定删除' + name + '吗?')) {
					$tr.remove()
				}
				return false
			}
		script>
	body>
html>

2、jQuery方式2-改进（使用了事件委托）


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习title>
		<link rel="stylesheet" type="text/css" href="../css/css.css" />
	head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Nameth>
				<th>Emailth>
				<th>Salaryth>
				<th> th>
			tr>
			<tr>
				<td>Tomtd>
				<td>[email protected]td>
				<td>5000td>
				<td><a href="deleteEmp?id=001">Deletea>td>
			tr>
			<tr>
				<td>Jerrytd>
				<td>[email protected]td>
				<td>8000td>
				<td><a href="deleteEmp?id=002">Deletea>td>
			tr>
			<tr>
				<td>Bobtd>
				<td>[email protected]td>
				<td>10000td>
				<td><a href="deleteEmp?id=003">Deletea>td>
			tr>
		table>
		<div id="formDiv">
			<h4>添加新员工h4>
			<table>
				<tr>
					<td class="word">name:td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					td>
				tr>
				<tr>
					<td class="word">email:td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					td>
				tr>
				<tr>
					<td class="word">salary:td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					td>
				tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">
							Submit
						button>
					td>
				tr>
			table>
		div>
		<script type="text/javascript" src="jquery-1.10.1.js">script>
		<script type="text/javascript">
			/*
		  1. 添加
		  2. 删除
		   */
			$('#addEmpButton').click(function() {
				//1. 收集输入的数据
				var $empName = $('#empName')
				var $email = $('#email')
				var $salary = $('#salary')
				var empName = $empName.val()
				var email = $email.val()
				var salary = $salary.val()
				//2. 生成对应的标签结构, 并插入#employeeTable的tbody中
				/*
				 
				   Bob
				   [email protected]
				   10000
				   Delete
				 
				 */
				var $xxx = $('')
					.append('' + empName + '') // 拼串
					.append('' + email + '')
					.append('' + salary + '')
					.append(' + Date.now() + '>Delete')
					.appendTo('#employeeTable>tbody')
				//3. 清除输入
				$empName.val('')
				$email.val('')
				$salary.val('')
			})
			// 通过table实现对所有a的click事件委托
			$('#employeeTable').delegate('a', 'click', clickDelete)
			/*
			点击删除的回调函数
			 */
			function clickDelete() {
				var $tr = $(this).parent().parent()
				var name = $tr.children(':first').html()
				if (confirm('确定删除' + name + '吗?')) {
					$tr.remove()
				}
				return false
			}
		script>
	body>
html>

3、js原生方式


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>添加删除记录练习title>
	<link rel="stylesheet" type="text/css" href="../css/css.css" />
head>
<body>
	<table id="employeeTable">
		<tr>
			<th>Nameth>
			<th>Emailth>
			<th>Salaryth>
			<th> th>
		tr>
		<tr>
			<td>Tomtd>
			<td>[email protected]td>
			<td>5000td>
			<td><a href="deleteEmp?id=001">Deletea>td>
		tr>
		<tr>
			<td>Jerrytd>
			<td>[email protected]td>
			<td>8000td>
			<td><a href="deleteEmp?id=002">Deletea>td>
		tr>
		<tr>
			<td>Bobtd>
			<td>[email protected]td>
			<td>10000td>
			<td><a href="deleteEmp?id=003">Deletea>td>
		tr>
	table>
	<div id="formDiv">
		<h4>添加新员工h4>
		<table>
			<tr>
				<td class="word">name: td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				td>
			tr>
			<tr>
				<td class="word">email: td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				td>
			tr>
			<tr>
				<td class="word">salary: td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				td>
			tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					button>
				td>
			tr>
		table>
	div>
	<script type="text/javascript">
		/*
		 功能说明:
			 1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
			 2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
		 技术要点:
			 1. DOM查询
			 2. 绑定事件监听
			 3. DOM增删改
			 5. 取消事件的默认行为
		 */
		function removeTr(){
			var trNode = this.parentNode.parentNode;
			var tds = trNode.getElementsByTagName("td");
			var nameStr = tds[0].firstChild.nodeValue;
			var flag = confirm("真的要删除" + nameStr + "的信息吗？");
			if(flag){
				trNode.parentNode.removeChild(trNode);
			}
			return false;
		}
		window.onload = function(){
			//目标1：点击Delete删除记录
			var aEles = document.getElementsByTagName("a");
			for(var i = 0;i < aEles.length;i++){
				aEles[i].onclick = removeTr;
			}
			//目标2：点击Submit增加记录
			var subBtn = document.getElementById("addEmpButton");
			subBtn.onclick = function(){
				var nameText = trim(document.getElementById("empName").value);
				var emailText = trim(document.getElementById("email").value);
				var salaryText = trim(document.getElementById("salary").value);
				document.getElementById("empName").value = nameText;
				document.getElementById("email").value = emailText;
				document.getElementById("salary").value = salaryText;
				if(nameText == "" || emailText == "" || salaryText == ""){
					alert("您输入的内容不完整");
					return ;
				}
				//组装节点
				var nameTd = document.createElement("td");
				nameTd.appendChild(document.createTextNode(nameText));
				var emailTd = document.createElement("td");
				emailTd.appendChild(document.createTextNode(emailText));
				var salaryTd = document.createElement("td");
				salaryTd.appendChild(document.createTextNode(salaryText));
				var aTd = document.createElement("td");
				var aNewEle = document.createElement("a");
				aNewEle.href = "deleteEmp?id=XXX";
				aNewEle.appendChild(document.createTextNode("Delete"));
				aNewEle.onclick = removeTr;
				aTd.appendChild(aNewEle);

				var trNode = document.createElement("tr");
				trNode.appendChild(nameTd);
				trNode.appendChild(emailTd);
				trNode.appendChild(salaryTd);
				trNode.appendChild(aTd);

				var empTable = document.getElementById("employeeTable");
				empTable.appendChild(trNode);
			}
			function trim(str){
				var reg = /^\s*|\s*$/g;
				return str.replace(reg,"");
			}
		}
	script>
body>
html>

22、事件处理


<html>
	<head>
		<meta charset="UTF-8">
		<title>18_事件绑定与解绑title>
	head>
	<style type="text/css">
		* {
			margin: 0px;
		}

		.out {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 20px;
			left: 10px;
			background: blue;
		}

		.inner {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50px;
			background: red;
		}

		.divBtn {
			position: absolute;
			top: 250px;
		}
	style>
	<body style="height: 2000px;">
		<div class="out">
			外部DIV
			<div class="inner">内部divdiv>
		div>
		<div class='divBtn'>
			<button id="btn1">取消绑定所有事件button>
			<button id="btn2">取消绑定mouseover事件button>
			<button id="btn3">测试事件坐标button>
			<a href="http://www.baidu.com" id="test4">百度一下a>
		div>
		
		<script type="text/javascript">
			/*
		   需求：
		   1. 给.out绑定点击监听(用两种方法绑定)
		   2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
		   3. 点击btn1解除.inner上的所有事件监听
		   4. 点击btn2解除.inner上的mouseover事件
		   5. 点击btn3得到事件坐标
		   6. 点击.inner区域, 外部点击监听不响应
		   7. 点击链接, 如果当前时间是偶数不跳转
		   */
			//1. 给.out绑定点击监听(用两种方法绑定)
			/*$('.out').click(function () {
			 console.log('click out')
			 })*/
			$('.out').on('click', function() {
				console.log('on click out')
			})

			//2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
			/*
			 $('.inner')
			 .mouseenter(function () { // 进入
			  console.log('进入')
			 })
			 .mouseleave(function () { // 离开
			 console.log('离开')
			 })
			 */
			/*
			 $('.inner')
			 .on('mouseenter', function () {
			 console.log('进入2')
			 })
			 .on('mouseleave', function () {
			 console.log('离开2')
			 })
			 */
			$('.inner').hover(function() {
				console.log('进入3')
			}, function() {
				console.log('离开3')
			})


			//3. 点击btn1解除.inner上的所有事件监听
			$('#btn1').click(function() {
				$('.inner').off()
			})

			//4. 点击btn2解除.inner上的mouseenter事件
			$('#btn2').click(function() {
				$('.inner').off('mouseenter')
			})

			//5. 点击btn3得到事件坐标
			$('#btn3').click(function(event) { // event事件对象
				console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
				console.log(event.clientX, event.clientY) // 原点为窗口的左上角
				console.log(event.pageX, event.pageY) // 原点为页面的左上角
			})

			//6. 点击.inner区域, 外部点击监听不响应
			$('.inner').click(function(event) {
				console.log('click inner')
				//停止事件冒泡
				event.stopPropagation()
			})

			//7. 点击链接, 如果当前时间是偶数不跳转
			$('#test4').click(function(event) {
				if (Date.now() % 2 === 0) {
					event.preventDefault()
				}
			})
		script>
	body>
html>

23、区别mouseover与mouseenter


<html>
	<head>
		<meta charset="UTF-8">
		<title>19_事件切换title>
	head>
	<style type="text/css">
		* {
			margin: 0px;
		}

		.div1 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 50px;
			left: 10px;
			background: olive;
		}

		.div2 {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50px;
			background: red;
		}

		.div3 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 50px;
			left: 230px;
			background: olive;
		}

		.div4 {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50px;
			background: yellow;
		}

		.divText {
			position: absolute;
			top: 330px;
			left: 10px;
		}
	style>
	<body>

		<div class="divText">
			区分鼠标的事件
		div>

		<div class="div1">
			div1.....
			<div class="div2">div2....div>
		div>

		<div class="div3">
			div3.....
			<div class="div4">div4....div>
		div>
		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			$('.div1')
				.mouseover(function() {
					console.log('mouseover 进入')
				})
				.mouseout(function() {
					console.log('mouseout 离开')
				})

			$('.div3')
				.mouseenter(function() {
					console.log('mouseenter 进入')
				})
				.mouseleave(function() {
					console.log('mouseleave 离开')
				})
		script>
	body>
html>

24、事件委托


<html>
	<head>
		<meta charset="UTF-8">
		<title>20_事件委托2title>
	head>
	<body>
		<ul>
			<li>1111li>
			<li>2222li>
			<li>3333li>
			<li>4444li>
		ul>
		<li>22222li>
		<br>
		<button id="btn1">添加新的libutton>
		<button id="btn2">删除ul上的事件委托的监听器button>
		
		<script src="js/jquery-1.10.1.js">script>
		<script>
			// 设置事件委托
			$('ul').delegate('li', 'click', function() {
				// console.log(this)
				this.style.background = 'red'
			})

			$('#btn1').click(function() {
				$('ul').append('新增的li....
')
			})

			$('#btn2').click(function() {
				// 移除事件委托
				$('ul').undelegate('click')
			})
		script>
	body>
html>

25、轮播图

1、原生


<html>
	<head>
		<meta charset="UTF-8">
		<title>焦点轮播图title>
		<style type="text/css">
			/*去除内边距,没有链接下划线*/
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
			}

			/*让
			body {
				padding: 20px;
			}

			/*最外围的div*/
			#container {
				width: 600px;
				height: 400px;
				overflow: hidden;
				position: relative;
				/*相对定位*/
				margin: 0 auto;
			}

			/*包含所有图片的*/
			#list {
				width: 4200px;
				/*7张图片的宽*/
				height: 400px;
				position: absolute;
				/*绝对定位*/
				z-index: 1;
				/*???*/
			}

			/*所有的图片*/
			#list img {
				float: left;
				/*浮在左侧*/
			}

			/*包含所有圆点按钮的*/
			#buttons {
				position: absolute;
				height: 10px;
				width: 100px;
				z-index: 2;
				bottom: 20px;
				left: 250px;
			}

			/*所有的圆点*/
			#buttons span {
				cursor: pointer;
				float: left;
				border: 1px solid #fff;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #333;
				margin-right: 5px;
			}

			/*第一个*/
			#buttons .on {
				background: orangered;
			}

			/*切换图标*/
			.arrow {
				cursor: pointer;
				display: none;
				line-height: 39px;
				text-align: center;
				font-size: 36px;
				font-weight: bold;
				width: 40px;
				height: 40px;
				position: absolute;
				z-index: 2;
				top: 180px;
				background-color: RGBA(0, 0, 0, 0.3);
				color: #fff;
			}

			/*鼠标移到切换图标上时*/
			.arrow:hover {
				background-color: RGBA(0, 0, 0, 0.7);
			}

			/*鼠标移到整个div区域时*/
			#container:hover .arrow {
				display: block;
				/*显示*/
			}

			/*上一个切换图标的左外边距*/
			#prev {
				left: 20px;
			}

			/*下一个切换图标的右外边距*/
			#next {
				right: 20px;
			}
		style>
	head>
	<body>

		<div id="container">
			<div id="list" style="left: -600px;">
				<img src="img/5.jpg" alt="1" />
				<img src="img/1.jpg" alt="1" />
				<img src="img/2.jpg" alt="2" />
				<img src="img/3.jpg" alt="3" />
				<img src="img/4.jpg" alt="4" />
				<img src="img/5.jpg" alt="5" />
				<img src="img/1.jpg" alt="5" />
			div>
			<div id="buttons">
				<span index="1" class="on">span>
				<span index="2">span>
				<span index="3">span>
				<span index="4">span>
				<span index="5">span>
			div>
			<a href="javascript:;" id="prev" class="arrow"><a>
			<a href="javascript:;" id="next" class="arrow">>a>
		div>
		<script type="text/javascript">
			/*
		   功能说明:
		   1. 点击向右(左)的图标, 平滑切换到下(上)一页
		   2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
		   3. 每隔3s自动滑动到下一页
		   4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
		   5. 切换页面时, 下面的圆点也同步更新
		   6. 点击圆点图标切换到对应的页
		   */
			/**
			 * 根据id得到对应的标签对象
			 * @param {Object} id
			 */
			function $(id) {
				return document.getElementById(id);
			}
			/**
			 * 给指定id对应的元素绑定点击监听
			 * @param {Object} id
			 * @param {Object} callback
			 */
			function click(id, callback) {
				$(id).onclick = callback;
			}

			window.onload = function() {

				var listDiv = $("list");
				var totalTime = 400; //换页的总时间
				var intervalTime = 20; //移动的间隔时间
				var intervalId; //循环定时器的id(翻页中的不移动)
				var imgCount = 5; //图片的个数
				var moveing = false; //是否正在移动中
				var index = 0; //当前显示图片的下标(从0开始到imgCount-1)
				var buttonSpans = $("buttons").children; //所有标识圆点标签的集合
				var containerDiv = $("container");
				var intervalId2; //循环定时器的id(自动翻页)

				//给下一页绑定点击监听
				click("next", function() {
					//切换到下一页
					nextPage(true);
				});

				//给上一页绑定点击监听
				click("prev", function() {
					//切换到上一页
					nextPage(false);
				});

				//给所有的提示圆点绑定点击监听
				clickButtons();

				//启动定时自动翻页
				autoNextPage();
				//给容器div绑定鼠标移入的监听: 停止自动翻页
				containerDiv.onmouseover = function() {
					clearInterval(intervalId2);
				}
				//给容器div绑定鼠标移出的监听: 启动自动翻页
				containerDiv.onmouseout = function() {
					autoNextPage();
				};

				/**
				 * 启动定时自动翻页
				 */
				function autoNextPage() {
					intervalId2 = setInterval(function() {
						nextPage(true);
					}, 3000);
				}

				/**
				 * 切换到下一页/上一页
				 * true 下
				 * false 上
				 * index 目标页
				 * @param {Object} next true
				 */
				function nextPage(next) {

					//如果正在移动, 直接结束
					if (moveing) {
						return;
					}
					//标识正在移动
					moveing = true;

					//需要进行的总偏移量
					var offset;
					if (typeof next === 'boolean') {
						offset = next ? -600 : 600;
					} else {
						offset = -600 * (next - index);
					}
					//var offset = next ? -600 : 600;
					//每个小移动需要做的偏移量
					var itemOffset = offset / (totalTime / intervalTime);
					//切换完成时div的left的坐标
					var targetLeft = listDiv.offsetLeft + offset;
					//循环定时器
					intervalId = setInterval(function() {
						//var currentLeft = listDiv.offsetLeft;
						//得到当前这次偏移的样式left坐标
						var left = listDiv.offsetLeft + itemOffset;
						//如果已经到达目标位置
						if (left == targetLeft) {
							//移除定时器
							clearInterval(intervalId);

							//如果当前到达的是最左边的图片, 跳转到右边第二张图片的位置
							if (left == 0) {
								left = -imgCount * 600;
							} else if (left == -600 * (imgCount + 1)) { //如果当前到达的是最右边的图片, 跳转到左边第二张图片的位置
								left = -600;
							}
							//标识没有移动了
							moveing = false;
						}
						//指定div新的left坐标
						listDiv.style.left = left + "px";
					}, intervalTime);

					//更新标识圆点
					updateButtons(next);
				}

				/**
				 * 更新标识圆点
				 * @param {Object} next
				 */
				function updateButtons(next) {
					//将当前的圆点更新为一般圆点
					buttonSpans[index].removeAttribute("class");
					//计算出目标圆点的下标
					var targetIndex;
					if (typeof next == 'boolean') {
						if (next) {
							targetIndex = index + 1;
							if (targetIndex == imgCount) {
								targetIndex = 0;
							}
						} else {
							targetIndex = index - 1;
							if (targetIndex == -1) {
								targetIndex = imgCount - 1;
							}
						}
					} else {
						targetIndex = next;
					}
					//将标圆点的下标更新为当前下标
					index = targetIndex;
					//将目标圆点设置为当前圆点
					buttonSpans[index].className = 'on';
				}

				/**
				 * 给所有的圆点设置点击监听
				 */
				function clickButtons() {
					for (var i = 0, length = buttonSpans.length; i < length; i++) {

						buttonSpans[i].index = i;
						buttonSpans[i].onclick = function() {
							nextPage(this.index);
						};

						/*
						 (function (index) {
						 buttonSpans[index].onclick = function () {
						 nextPage(index);
						 };
						 })(i);
						 */
					}
				}
			};
		script>
	body>
html>

2、jQuery

html代码


<html>
	<head>
		<meta charset="UTF-8">
		<title>焦点轮播图title>
		<style type="text/css">
			/*去除内边距,没有链接下划线*/
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
			}

			/*让
			body {
				padding: 20px;
			}

			/*最外围的div*/
			#container {
				width: 600px;
				height: 400px;
				overflow: hidden;
				position: relative;
				/*相对定位*/
				margin: 0 auto;
			}

			/*包含所有图片的*/

			#list {
				width: 4200px;
				/*7张图片的宽: 7*600 */
				height: 400px;
				position: absolute;
				/*绝对定位*/
				z-index: 1;
			}

			/*所有的图片*/
			#list img {
				float: left;
				/*浮在左侧*/
			}

			/*包含所有圆点按钮的*/
			#pointsDiv {
				position: absolute;
				height: 10px;
				width: 100px;
				z-index: 2;
				bottom: 20px;
				left: 250px;
			}

			/*所有的圆点*/

			#pointsDiv span {
				cursor: pointer;
				float: left;
				border: 1px solid #fff;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #333;
				margin-right: 5px;
			}

			/*第一个*/

			#pointsDiv .on {
				background: orangered;
			}

			/*切换图标*/

			.arrow {
				cursor: pointer;
				display: none;
				line-height: 39px;
				text-align: center;
				font-size: 36px;
				font-weight: bold;
				width: 40px;
				height: 40px;
				position: absolute;
				z-index: 2;
				top: 180px;
				background-color: RGBA(0, 0, 0, 0.3);
				color: #fff;
			}

			/*鼠标移到切换图标上时*/
			.arrow:hover {
				background-color: RGBA(0, 0, 0, 0.7);
			}

			/*鼠标移到整个div区域时*/
			#container:hover .arrow {
				display: block;
				/*显示*/
			}

			/*上一个切换图标的左外边距*/
			#prev {
				left: 20px;
			}

			/*下一个切换图标的右外边距*/
			#next {
				right: 20px;
			}
		style>
	head>
	<body>
		<div id="container">
			<div id="list" style="left: -600px;">
				<img src="../img/5.jpg" alt="5" />
				<img src="../img/1.jpg" alt="1" />
				<img src="../img/2.jpg" alt="2" />
				<img src="../img/3.jpg" alt="3" />
				<img src="../img/4.jpg" alt="4" />
				<img src="../img/5.jpg" alt="5" />
				<img src="../img/1.jpg" alt="1" />
			div>
			<div id="pointsDiv">
				<span index="1" class="on">span>
				<span index="2">span>
				<span index="3">span>
				<span index="4">span>
				<span index="5">span>
			div>
			<a href="javascript:;" id="prev" class="arrow"><a>
			<a href="javascript:;" id="next" class="arrow">>a>
		div>
		<script type="text/javascript" src="../js/jquery-1.10.1.js">script>
		<script type="text/javascript" src="../js/app.js">script>
	body>
html>

js代码

/*
 功能说明:
 1. 点击向右(左)的图标, 平滑切换到下(上)一页
 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
 3. 每隔3s自动滑动到下一页
 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
 5. 切换页面时, 下面的圆点也同步更新
 6. 点击圆点图标切换到对应的页

 bug: 快速点击时, 翻页不正常
 */
$(function () {

  var $container = $('#container')
  var $list = $('#list')
  var $points = $('#pointsDiv>span')
  var $prev = $('#prev')
  var $next = $('#next')
  var PAGE_WIDTH = 600 //一页的宽度
  var TIME = 400 // 翻页的持续时间
  var ITEM_TIME = 20 // 单元移动的间隔时间
  var imgCount = $points.length
  var index = 0 //当前下标
  var moving = false // 标识是否正在翻页(默认没有)


  // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
  $next.click(function () {
    // 平滑翻到下一页
    nextPage(true)
  })
  $prev.click(function () {
    // 平滑翻到上一页
    nextPage(false)
  })

  // 3. 每隔3s自动滑动到下一页
  var intervalId = setInterval(function () {
    nextPage(true)
  }, 1000)

  // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
  $container.hover(function () {
    // 清除定时器
    clearInterval(intervalId)
  }, function () {
    intervalId = setInterval(function () {
      nextPage(true)
    }, 1000)
  })

  // 6. 点击圆点图标切换到对应的页
  $points.click(function () {
    // 目标页的下标
    var targetIndex = $(this).index()
    // 只有当点击的不是当前页的圆点时才翻页
    if(targetIndex!=index) {
      nextPage(targetIndex)
    }
  })

  /**
   * 平滑翻页
   * @param next
   * true: 下一页
   * false: 上一页
   * 数值: 指定下标页
   */
  function nextPage (next) {
    /*
      总的时间: TIME=400
      单元移动的间隔时间: ITEM_TIME = 20
      总的偏移量: offset
      单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME)

      启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
     */

    //如果正在翻页, 直接结束
    if(moving) { //已经正在翻页中
      return
    }
    moving = true // 标识正在翻页

    // 总的偏移量: offset
    var offset = 0
    // 计算offset
    if(typeof next==='boolean') {
      offset = next ? -PAGE_WIDTH : PAGE_WIDTH
    } else {
      offset = -(next-index)* PAGE_WIDTH
    }

    // 计算单元移动的偏移量: itemOffset
    var itemOffset = offset/(TIME/ITEM_TIME)
    // 得到当前的left值
    var currLeft = $list.position().left
    // 计算出目标处的left值
    var targetLeft = currLeft + offset

    // 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
    var intervalId = setInterval(function () {
      // 计算出最新的currLeft
      currLeft += itemOffset
      if(currLeft===targetLeft) { // 到达目标位置
        // 清除定时器
        clearInterval(intervalId)

        // 标识翻页停止
        moving = false

        // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
        if(currLeft===-(imgCount+1) * PAGE_WIDTH) {
          currLeft = -PAGE_WIDTH
        } else if(currLeft===0){
          // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
          currLeft = -imgCount * PAGE_WIDTH
        }

      }
      // 设置left
      $list.css('left', currLeft)
    }, ITEM_TIME)

    // 更新圆点
    updatePoints(next)
  }

  /**
   * 更新圆点
   * @param next
   */
  function updatePoints (next) {

    // 计算出目标圆点的下标targetIndex
    var targetIndex = 0
    if(typeof next === 'boolean') {
      if(next) {
        targetIndex = index + 1   // [0, imgCount-1]
        if(targetIndex===imgCount) {// 此时看到的是1.jpg-->第1个圆点
          targetIndex = 0
        }
      } else {
        targetIndex = index - 1
        if(targetIndex===-1) { // 此时看到的是5.jpg-->第5个圆点
          targetIndex = imgCount-1
        }
      }
    } else {
      targetIndex = next
    }


    // 将当前index的的class移除
    // $points.eq(index).removeClass('on')
    $points[index].className = ''
    // 给目标圆点添加class='on'
    // $points.eq(targetIndex).addClass('on')
    $points[targetIndex].className = 'on'

    // 将index更新为targetIndex
    index = targetIndex
  }
})

26、淡入淡出效果


<html>
	<head>
		<meta charset="UTF-8">
		<title>21_淡入淡出title>
	head>
	<style type="text/css">
		* {
			margin: 0px;
		}

		.div1 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 50px;
			left: 10px;
			background: red;
		}
	style>

	<body>
		<button id="btn1">慢慢淡出button>
		<button id="btn2">慢慢淡入button>
		<button id="btn3">淡出/淡入切换button>
		<div class="div1">
		div>

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求：
		   1. 点击btn1, 慢慢淡出
			 * 无参
			 * 有参
			   * 字符串参数
			   * 数字参数
		   2. 点击btn3, 慢慢淡入
		   3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
		   */

			var $div1 = $('.div1')

			$('#btn1').click(function() {
				// $div1.fadeOut()
				// $div1.fadeOut('slow')
				$div1.fadeOut(1000, function() {
					alert('动画完成了!!!')
				})
			})

			$('#btn2').click(function() {
				$div1.fadeIn()
			})

			$('#btn3').click(function() {
				$div1.fadeToggle()
			})
		script>
	body>
html>

27、滑动


<html>
	<head>
		<meta charset="UTF-8">
		<title>22_滑动title>
	head>
	<style type="text/css">
		* {
			margin: 0px;
		}

		.div1 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 50px;
			left: 10px;
			background: red;
		}
	style>
	<body>
		<button id="btn1">慢慢收缩button>
		<button id="btn2">慢慢展开button>
		<button id="btn3">收缩/展开切换button>

		<div class="div1">
		div>

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求：
		   1. 点击btn1, 向上滑动
		   2. 点击btn2, 向下滑动
		   3. 点击btn3, 向上/向下切换
		   */
			var $div1 = $('.div1')

			// 1. 点击btn1, 向上滑动
			$('#btn1').click(function() {
				$div1.slideUp(3000)
			})

			// 2. 点击btn2, 向下滑动
			$('#btn2').click(function() {
				$div1.slideDown()
			})

			// 3. 点击btn3, 向上/向下切换
			$('#btn3').click(function() {
				$div1.slideToggle()
			})
		script>
	body>
html>

28、显示与隐藏


<html>
	<head>
		<meta charset="UTF-8">
		<title>23_显示与隐藏title>
	head>
	<style type="text/css">
		* {
			margin: 0px;
		}

		.div1 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 50px;
			left: 10px;
			background: red;
			display: none;
		}
	style>
	<body>
		<button id="btn1">瞬间显示button>
		<button id="btn2">慢慢显示button>
		<button id="btn3">慢慢隐藏button>
		<button id="btn4">显示隐藏切换button>

		<div class="div1">
		div>

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		  需求:
		  1. 点击btn1, 立即显示
		  2. 点击btn2, 慢慢显示
		  3. 点击btn3, 慢慢隐藏
		  4. 点击btn4, 切换显示/隐藏
		   */
			var $div1 = $('.div1')
			//1. 点击btn1, 立即显示
			$('#btn1').click(function() {
				$div1.show()
			})

			//2. 点击btn2, 慢慢显示
			$('#btn2').click(function() {
				$div1.show(1000)
			})

			//3. 点击btn3, 慢慢隐藏
			$('#btn3').click(function() {
				$div1.hide(1000)
			})

			//4. 点击btn4, 切换显示/隐藏
			$('#btn4').click(function() {
				$div1.toggle(1000)
			})
		script>
	body>
html>

29、自定义动画


<html>
	<head>
		<meta charset="UTF-8">
		<title>24_自定义动画title>
		<style type="text/css">
			* {
				margin: 0px;
			}

			.div1 {
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				left: 300px;
				background: red;
			}
		style>
	head>
	<body>
		<button id="btn1">逐渐扩大button>
		<button id="btn2">移动到指定位置button>
		<button id="btn3">移动指定距离button>
		<button id="btn4">停止动画button>

		<div class="div1">
			哈哈哈哈哈哈哈哈
		div>

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript">
			/*
		   需求：
			1. 逐渐扩大
			  1). 宽/高都扩为200px
			  2). 宽先扩为200px, 高后扩为200px
			2. 移动到指定位置
			  1).移动到(500, 100)处
			  2).移动到(100, 20)处
			3.移动指定的距离
			  1). 移动距离为(100, 50)
			  2). 移动距离为(-100, -20)
			4. 停止动画
		   */
			var $div1 = $('.div1')
			/*
			 1. 逐渐扩大
			   1). 宽/高都扩为200px
			   2). 宽先扩为200px, 高后扩为200px
			 */
			$('#btn1').click(function() {
				/*
				$div1.animate({
				  width: 200,
				  height: 200
				}, 1000)
				*/
				$div1
					.animate({
						width: 200
					}, 1000)
					.animate({
						height: 200
					}, 1000)
			})

			/*
			 2. 移动到指定位置
			   1).移动到(500, 100)处
			   2).移动到(100, 20)处
			 */
			$('#btn2').click(function() {
				// 1).移动到(500, 100)处
				/*
				$div1.animate({ // 向右下移动
				  left: 500,
				  top: 100
				}, 1000)
				*/

				// 2).移动到(100, 20)处
				$div1.animate({ // 向左上移动
					left: 100, // 300
					top: 20 // 50
				}, 1000)
			})

			/*
			 3.移动指定的距离
			   1). 移动距离为(100, 50)
			   2). 移动距离为(-100, -20)
			 */
			$('#btn3').click(function() {
				// 1). 移动距离为(100, 50)
				/*$div1.animate({
				  left: '+=100',
				  top: '+=50'
				}, 1000)*/

				// 2). 移动距离为(-100, -20)
				$div1.animate({
					left: '-=100',
					top: '-=20'
				}, 3000)
			})

			$('#btn4').click(function() {
				$div1.stop()
			})
		script>
	body>
html>

30、导航动态显示效果


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>04_导航动态显示效果title>
		<style rel="stylesheet">
			* {
      margin: 0;
      padding: 0;
      word-wrap: break-word;
      word-break: break-all;
    }

    body {
      background: #FFF;
      color: #333;
      font: 12px/1.6em Helvetica, Arial, sans-serif;
    }

    a {
      color: #0287CA;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    ul, li {
      list-style: none;
    }

    img {
      border: none;
    }

    h1, h2, h3, h4, h5, h6 {
      font-size: 1em;
    }

    html {
      overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
    }

    #navigation {
      width: 784px;
      padding: 8px;
      margin: 8px auto;
      background: #3B5998;
      height: 18px;
    }

    #navigation ul li {
      float: left;
      margin-right: 14px;
      position: relative;
      z-index: 100;
    }

    #navigation ul li a {
      display: block;
      padding: 0 8px;
      background: #EEEEEE;
      font-weight: 700;
    }

    #navigation ul li a:hover {
      background: none;
      color: #fff;
    }

    #navigation ul li ul {
      background-color: #88C366;
      position: absolute;
      width: 80px;
      overflow: hidden;
      display: none;
    }

    #navigation ul li ul li {
      border-bottom: 1px solid #BBB;
      text-align: left;
      width: 100%;
    }
  style>
	head>
	<body>
		<div id="navigation">
			<ul>
				<li><a href="#">首 页a>li>
				<li><a href="#">衬 衫a>
					<ul>
						<li><a href="#">短袖衬衫a>li>
						<li><a href="#">长袖衬衫a>li>
						<li><a href="#">无袖衬衫a>li>
					ul>
				li>
				<li><a href="#">卫 衣a>
					<ul>
						<li><a href="#">开襟卫衣a>li>
						<li><a href="#">套头卫衣a>li>
					ul>
				li>
				<li>
					<a href="#">裤 子a>
					<ul>
						<li><a href="#">休闲裤a>li>
						<li><a href="#">卡其裤a>li>
						<li><a href="#">牛仔裤a>li>
						<li><a href="#">短裤a>li>
					ul>
				li>
				<li><a href="#">联系我们a>li>
			ul>
		div>

		<script type="text/javascript" src="jquery-1.10.1.js">script>
		<script type="text/javascript">
			$('#navigation>ul>li:has(ul)').hover(function() {
				//动画展开
				$(this).children('ul').stop(true).slideDown()
			}, function() {
				// 动画收缩
				$(this).children('ul').stop(true).slideUp()
			})
		script>
	body>
html>

三、多库并存


<html>
	<head>
		<meta charset="UTF-8">
		<title>26_多库共存title>
		<style type="text/css">
			* {
				margin: 0px;
			}

			.div1 {
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				left: 10px;
				background: red;
			}
		style>
	head>
	<body>
		
		<script type="text/javascript" src="js/myLib.js">script>
		<script type="text/javascript" src="js/jquery-1.10.1.js">script>
		<script type="text/javascript">
			// 释放$的使用权
			jQuery.noConflict()
			// 调用myLib中的$
			$()
			// 要想使用jQuery的功能, 只能使用jQuery
			jQuery(function() {
				console.log('文档加载完成')
			})
			console.log('+++++')
		script>
	body>
html>

myLib.js

(function () {
  window.$ = function () {
    console.log('my lib $()...')
  }
})()

四、onload与ready


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>window.onload与$(document).ready()title>
	head>
	<body>
		<h1>测试window.onload与$(document).ready()h1>
		<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

		
		<script type="text/javascript" src="js/jquery-1.10.1.js">script>
		<script type="text/javascript">
			/*
		   需求：
		   1. 直接打印img的宽度，观察其值
		   2. 在 $(function(){}) 中 打印 img 的宽度
		   3. 在 window.onload 中打印宽度
		   4. 在 img 加载完成后打印宽度
		   */

			// 1. 直接打印img的宽度，观察其值
			console.log('直接', $('#logo').width())

			window.onload = function() {
				console.log('onload', $('#logo').width())
			}
			window.onload = function() {
				console.log('onload2', $('#logo').width())
			}

			$(function() {
				console.log('ready', $('#logo').width())
			})
			$(function() {
				console.log('ready2', $('#logo').width())
			})

			$('#logo').on('load', function() {
				console.log('img load', $(this).width())
			})

			/*$(document).ready(function () {

			})*/
		script>
	body>
html>

五、扩展插件


<html>
	<head>
		<meta charset="UTF-8">
		<title>25_扩展插件title>
		<style type="text/css">
			* {
				margin: 0px;
			}

			.div1 {
				position: absolute;
				width: 100px;
				height: 100px;
				top: 50px;
				left: 10px;
				background: red;
			}
		style>
	head>
	<body>
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="reverseCheckedBtn" value="反选" />

		
		<script src="js/jquery-1.10.1.js" type="text/javascript">script>
		<script type="text/javascript" src="js/my_jQuery-plugin.js">script>
		<script type="text/javascript">
			/*
		   需求：
		   1. 给 $ 添加4个工具方法:
			 * min(a, b) : 返回较小的值
			 * max(c, d) : 返回较大的值
			 * leftTrim() : 去掉字符串左边的空格
			 * rightTrim() : 去掉字符串右边的空格
		   2. 给jQuery对象 添加3个功能方法:
			 * checkAll() : 全选
			 * unCheckAll() : 全不选
			 * reverseCheck() : 全反选
		   */
			console.log($.min(3, 5), $.max(3, 5))
			var string = '   my atguigu    '
			console.log('-----' + $.leftTrim(string) + '-----')
			console.log('-----' + $.rightTrim(string) + '-----')

			var $items = $(':checkbox[name=items]')
			$('#checkedAllBtn').click(function() {
				$items.checkAll()
			})
			$('#checkedNoBtn').click(function() {
				$items.unCheckAll()
			})
			$('#reverseCheckedBtn').click(function() {
				$items.reverseCheck()
			})
		script>
	body>
html>

js文件

/*
 需求：
 1. 给 $ 添加4个工具方法:
   * min(a, b) : 返回较小的值
   * max(c, d) : 返回较大的值
   * leftTrim() : 去掉字符串左边的空格
   * rightTrim() : 去掉字符串右边的空格
 2. 给jQuery对象 添加3个功能方法:
 * checkAll() : 全选
 * unCheckAll() : 全不选
 * reverseCheck() : 全反选
 */
(function() {

	// 扩展$的方法
	$.extend({
		min: function(a, b) {
			return a < b ? a : b
		},
		max: function(a, b) {
			return a > b ? a : b
		},
		leftTrim: function(str) {
			return str.replace(/^\s+/, '')
		},
		rightTrim: function(str) {
			return str.replace(/\s+$/, '')
		}
	})

	// 扩展jQuery对象的方法
	$.fn.extend({
		checkAll: function() {
			this.prop('checked', true) // this是jQuery对象
		},
		unCheckAll: function() {
			this.prop('checked', false)
		},
		reverseCheck: function() {
			// this是jQuery对象
			this.each(function() {
				// this是dom元素
				this.checked = !this.checked
			})
		}
	})

})()

六、jQuery插件-jQueryValidate


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
		<style>
			.error {
			  color: red;
			}
		  style>
	head>
	<body>
		
		<form id="myForm" action="xxx">
			<p>用户名(必须, 最小6位): <input name="username" type="text" required minlength="6">p>
			<p>密码(必须,6到8位): <input id="password" name="pwd1" type="password" required minlength="6" maxlength="8">p>
			<p>确认密码(与密码相同): <input name="pwd2" type="password" equalTo="#password">p>
			<p><input type="submit" value="注册">p>
		form>

		<script type="text/javascript" src="jquery-1.11.1.js">script>
		<script type="text/javascript" src="jquery.validate.js">script>
		<script type="text/javascript">
			/*
		  声明式验证: 程序员只需要声明各种验证规则, 可以自定义验证错误信息
		   */

			//对此表单开户验证
			$('#myForm').validate({
				messages: {
					username: {
						required: '用户名是必须的',
						minlength: '用户名至少为6位'
					},
					pwd1: {
						required: '密码是必须的',
						minlength: '密码至少为6位',
						maxlength: '密码最多8位'
					},
					pwd2: {
						equalTo: '必须与密码相同'
					}
				}
			})
		script>
	body>
html>

官方示例


<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery validation plug-in - main demotitle>
	<link rel="stylesheet" href="css/screen.css">
	<script src="../lib/jquery.js">script>
	<script src="../dist/jquery.validate.js">script>
	<script>
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});

	$().ready(function() {
		// validate the comment form when it is submitted
		$("#commentForm").validate();

		// validate signup form on keyup and submit
		$("#signupForm").validate({
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				},
				password: {
					required: true,
					minlength: 5
				},
				confirm_password: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},
				email: {
					required: true,
					email: true
				},
				topic: {
					required: "#newsletter:checked",
					minlength: 2
				},
				agree: "required"
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long"
				},
				confirm_password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long",
					equalTo: "Please enter the same password as above"
				},
				email: "Please enter a valid email address",
				agree: "Please accept our policy",
				topic: "Please select at least 2 topics"
			}
		});

		// propose username by combining first- and lastname
		$("#username").focus(function() {
			var firstname = $("#firstname").val();
			var lastname = $("#lastname").val();
			if (firstname && lastname && !this.value) {
				this.value = firstname + "." + lastname;
			}
		});

		//code to hide topic selection, disable for demo
		var newsletter = $("#newsletter");
		// newsletter topics are optional, hide at first
		var inital = newsletter.is(":checked");
		var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
		var topicInputs = topics.find("input").attr("disabled", !inital);
		// show when newsletter is checked
		newsletter.click(function() {
			topics[this.checked ? "removeClass" : "addClass"]("gray");
			topicInputs.attr("disabled", !this.checked);
		});
	});
	script>
	<style>
	#commentForm {
		width: 500px;
	}
	#commentForm label {
		width: 250px;
	}
	#commentForm label.error, #commentForm input.submit {
		margin-left: 253px;
	}
	#signupForm {
		width: 670px;
	}
	#signupForm label.error {
		margin-left: 10px;
		width: auto;
		display: inline;
	}
	#newsletter_topics label.error {
		display: none;
		margin-left: 103px;
	}
	style>
head>
<body>
<h1 id="banner"><a href="http://jqueryvalidation.org/">jQuery Validation Plugina> Demoh1>
<div id="main">
	<p>Default submitHandler is set to display an alert into of submitting the formp>
	<form class="cmxform" id="commentForm" method="get" action="">
		<fieldset>
			<legend>Please provide your name, email address (won't be published) and a commentlegend>
			<p>
				<label for="cname">Name (required, at least 2 characters)label>
				<input id="cname" name="name" minlength="2" type="text" required>
			p>
			<p>
				<label for="cemail">E-Mail (required)label>
				<input id="cemail" type="email" name="email" required>
			p>
			<p>
				<label for="curl">URL (optional)label>
				<input id="curl" type="url" name="url">
			p>
			<p>
				<label for="ccomment">Your comment (required)label>
				<textarea id="ccomment" name="comment" required>textarea>
			p>
			<p>
				<input class="submit" type="submit" value="Submit">
			p>
		fieldset>
	form>
	<form class="cmxform" id="signupForm" method="get" action="">
		<fieldset>
			<legend>Validating a complete formlegend>
			<p>
				<label for="firstname">Firstnamelabel>
				<input id="firstname" name="firstname" type="text">
			p>
			<p>
				<label for="lastname">Lastnamelabel>
				<input id="lastname" name="lastname" type="text">
			p>
			<p>
				<label for="username">Usernamelabel>
				<input id="username" name="username" type="text">
			p>
			<p>
				<label for="password">Passwordlabel>
				<input id="password" name="password" type="password">
			p>
			<p>
				<label for="confirm_password">Confirm passwordlabel>
				<input id="confirm_password" name="confirm_password" type="password">
			p>
			<p>
				<label for="email">Emaillabel>
				<input id="email" name="email" type="email">
			p>
			<p>
				<label for="agree">Please agree to our policylabel>
				<input type="checkbox" class="checkbox" id="agree" name="agree">
			p>
			<p>
				<label for="newsletter">I'd like to receive the newsletterlabel>
				<input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
			p>
			<fieldset id="newsletter_topics">
				<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demolegend>
				<label for="topic_marketflash">
					<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
				label>
				<label for="topic_fuzz">
					<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
				label>
				<label for="topic_digester">
					<input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
				label>
				<label for="topic" class="error">Please select at least two topics you'd like to receive.label>
			fieldset>
			<p>
				<input class="submit" type="submit" value="Submit">
			p>
		fieldset>
	form>
	<h3>Synthetic examplesh3>
	<ul>
		<li><a href="errorcontainer-demo.html">Error message containers in actiona>
		li>
		<li><a href="custom-messages-data-demo.html">Custom Messages as Element Dataa>
		li>
		<li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selectsa>
		li>
		<li><a href="ajaxSubmit-integration-demo.html">Integration with Form Plugin (AJAX submit)a>
		li>
		<li><a href="custom-methods-demo.html">Custom methods and message display.a>
		li>
		<li><a href="dynamic-totals.html">Dynamic formsa>
		li>
		<li><a href="themerollered.html">Forms styled with jQuery UI Themerollera>
		li>
		<li><a href="tinymce/">TinyMCE3 Demoa>
		li>
		<li><a href="tinymce4/">TinyMCE4 Demoa>
		li>
		<li><a href="file_input.html">File inputsa>
		li>
		<li><a href="jquerymobile.html">jQuery Mobile Form Validationa>
		li>
		<li><a href="errors-within-labels.html">Displaying Errors within Field Labelsa>
		li>
		<li><a href="requirejs/index.html">Loading via RequireJSa>
		li>
	ul>
	<h3>Real-world examplesh3>
	<ul>
		<li><a href="cinema/">Retro Cinema Registrationa>li>
		<li><a href="milk/">Remember The Milk signup forma>li>
		<li><a href="marketo/">Marketo signup forma>li>
		<li><a href="multipart/">Buy and Sell a House multipart forma>li>
		<li><a href="captcha/">Remote captcha validationa>li>
	ul>
div>
body>
html>

效果如图：

七、jQuery插件-jQueryUI


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
		<link rel="stylesheet" href="css/jquery-ui.css">
	head>
	<body>

		
		<h2>1. Accordion: 手风琴h2>
		<div id="accordion">
			<h3>Firsth3>
			<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.div>
			<h3>Secondh3>
			<div>Phasellus mattis tincidunt nibh.div>
			<h3>Thirdh3>
			<div>Nam dui erat, auctor a, dignissim quis.div>
		div>

		
		<h2>Autocompleteh2>
		<div>
			<input id="autocomplete" title="type "a"">
		div>

		
		<h2>3. Tabs: 选项卡h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Firsta>li>
				<li><a href="#tabs-2">Seconda>li>
				<li><a href="#tabs-3">Thirda>li>
			ul>
			<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
				ex ea commodo consequat.div>
			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis.
				Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.div>
			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum
				eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.div>
		div>

		<script type="text/javascript" src="js/jquery.js">script>
		<script type="text/javascript" src="js/jquery-ui.js">script>
		<script type="text/javascript">
			// 1. Accordion: 手风琴
			$('#accordion').accordion()

			// 所有数据的数组
			var dataSource = [
				"ActionScript",
				"AppleScript",
				"Asp",
				"BASIC",
				"C",
				"C++",
				"Clojure",
				"COBOL",
				"ColdFusion",
				"Erlang",
				"Fortran",
				"Groovy",
				"Haskell",
				"Java",
				"JavaScript",
				"Lisp",
				"Perl",
				"PHP",
				"Python",
				"Ruby",
				"Scala",
				"Scheme"
			]

			// 2. Autocomplete: 自动搜索匹配
			$("#autocomplete").autocomplete({
				source: dataSource // 数据源
			});

			// 3. Tabs: 选项卡
			$('#tabs').tabs()
		script>
	body>
html>

官方示例


<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Pagetitle>
	<link href="jquery-ui.css" rel="stylesheet">
	<style>
	body{
		font: 62.5% "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	select {
		width: 200px;
	}
	style>
head>
<body>

<h1>Welcome to jQuery UI!h1>

<div class="ui-widget">
	<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.p>
div>

<h1>YOUR COMPONENTS:h1>



<h2 class="demoHeaders">Accordionh2>
<div id="accordion">
	<h3>Firsth3>
	<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.div>
	<h3>Secondh3>
	<div>Phasellus mattis tincidunt nibh.div>
	<h3>Thirdh3>
	<div>Nam dui erat, auctor a, dignissim quis.div>
div>




<h2 class="demoHeaders">Autocompleteh2>
<div>
	<input id="autocomplete" title="type "a"">
div>




<h2 class="demoHeaders">Buttonh2>
<button id="button">A button elementbutton>
<form style="margin-top: 1em;">
	<div id="radioset">
		<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1label>
		<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2label>
		<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3label>
	div>
form>




<h2 class="demoHeaders">Tabsh2>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Firsta>li>
		<li><a href="#tabs-2">Seconda>li>
		<li><a href="#tabs-3">Thirda>li>
	ul>
	<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.div>
	<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.div>
	<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.div>
div>




<h2 class="demoHeaders">Dialogh2>
<p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin">span>Open Dialoga>p>

<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)em>h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
	<p>Lorem ipsum dolor sit amet,  Nulla nec tortor. Donec id elit quis purus consectetur consequat. p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. p>

	
	<div class="ui-overlay"><div class="ui-widget-overlay">div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;">div>div>
	<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
		<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.p>
		div>
	div>

div>


<div id="dialog" title="Dialog Title">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.p>
div>



<h2 class="demoHeaders">Framework Icons (content color preview)h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2">span>li>
	<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3">span>li>
	<li class=

你可能感兴趣的:(javascript日常总结,jquery)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
JavaScript中秋快乐！ Q_w7742 javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
C# 开发教程-入门基础天马3798 教程系列整理 c#开发语言
1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
了解 UNPKG：前端开发者的包管理利器小于负无穷前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
2019-05-29 vue-router的两种模式的区别 Kason晨
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
electron多标签页模式更像客户端 diygwcom electron javascript 前端
Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
外卖霸王餐返利外卖会员卡小程序开发闹小艾 good506070 微信小程序小程序
外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
Axure设计之全屏与退出全屏交互实现招风的黑耳 Axure axure 交互
在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
全面指南：用户行为从前端数据采集到实时处理的最佳实践数字沉思营销流量运营系统架构前端内容运营大数据
引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
EcmaScript和JavaScript的区别每天吃八顿前端 ecmascript
ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
javascript添加p元素，html添加文字，appendChild 游勇一 javascript html添加p appendChild
javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制 SteveJi666 WebGL cesium EarthSDK SuperMap 3d javascript 前端 arcgis
版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
html 删除事件,html 事件的添加和删除列蒂齐亚 html 删除事件
jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi
html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示睿理
html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
如何在 Python 中声明一个静态属性? 潮易 python 开发语言
在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
ASM系列五利用TreeApi 解析生成Class lijingyao8206 ASM 字节码动态生成 ClassNode TreeAPI
前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。在介绍前，先要知道一点， Tree工程的接口基本可以完
链表树——复合数据结构应用实例 bardo 数据结构树型结构表结构设计链表菜单排序
我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。需求简介：经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
为啥要用位运算代替取模呢 chenchao051 位运算哈希汇编
在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧， JDK6中的HashMap中的indexFor方法： /** * Returns index for hash code h. */ static int indexFor(int h, int length) {
最近的情况麦田的设计者生活感悟计划软考想
今天是2015年4月27号整理一下最近的思绪以及要完成的任务 1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为
PHP去掉字符串中最后一个字符的方法 IT独行者 PHP 字符串
今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： $str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr;
hadoop在linux上单机安装过程 _wy_ linux hadoop
1、安装JDK jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行： export JAVA_HOME=/usr/java/jdk1.7.0_25
JAVA进阶----分布式事务的一种简单处理方法无量多系统交互分布式事务
每个方法都是原子操作：提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 A系统调用B,C,D系统完成分布式事务 =========执行开始======== A.aa(); try { B.bb(); } catch(Exception e) { A.rollbackAa(); } try { C.cc(); } catch(Excep
安墨移动广告：移动DSP厚积薄发引领未来广告业发展命脉矮蛋蛋 hadoop 互联网
　　“谁掌握了强大的DSP技术，谁将引领未来的广告行业发展命脉。”2014年，移动广告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广告联盟风起云涌，竞相推出专属移动DSP产品。　　到底什么是移动DSP呢? 　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广告主投放的各种需求，真正实现人群定位的精准广
myelipse设置 alafqq IP
在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。注释模板导入步骤安装方法：打开eclipse/myeclipse 选择 window-->Preferences-->JAVA-->Code-->Code
java数组百合不是茶 java数组
java数组的声明创建初始化； java支持C语言数组中的每个数都有唯一的一个下标一维数组的定义声明： int[] a = new int[3];声明数组中有三个数int[3] int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数
javascript读取表单数据 bijian1013 JavaScript
利用javascript读取表单数据，可以利用以下三种方法获取： 1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 2、通过表单名称属性：var b = document.getElementsByName("name"); 3、直接通过表单名字获取：var c = form.content.
探索JUnit4扩展：使用Theory bijian1013 java JUnit Theory
理论机制（Theory）一.为什么要引用理论机制（Theory）当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 TDD 的优点： &nb
[Spring Data Mongo一]Spring Mongo Template操作MongoDB bit1129 template
什么是Spring Data Mongo Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 1. 封装客户端跟MongoDB的链接管理 2. 文档-对象映射，通过注解:@Document(collectio
【Kafka八】Zookeeper上关于Kafka的配置信息 bit1129 zookeeper
问题： 1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 4. Producer跟Zookeeper究竟有没有关系？没有关系！！！ //consumers、config、brokers、cont
java OOM内存异常的四种类型及异常与解决方案 ronin47 java OOM 内存异常
　OOM异常的四种类型：　　　　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。　二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx
java-实现链表反转-递归和非递归实现 bylijinnan java
20120422更新：对链表中部分节点进行反转操作，这些节点相隔k个： 0->1->2->3->4->5->6->7->8->9 k=2 8->1->6->3->4->5->2->7->0->9 注意1 3 5 7 9 位置是不变的。解法：将链表拆成两部分： a.0-&
Netty源码学习-DelimiterBasedFrameDecoder bylijinnan java netty
看DelimiterBasedFrameDecoder的API，有举例：接收到的ChannelBuffer如下： +--------------+ | ABC\nDEF\r\n | +--------------+ 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： +-----+----
linux的一些命令 -查看cc攻击-网口ip统计等 hotsunshine linux
Linux判断CC攻击命令详解 2011年12月23日 ⁄ 安全 ⁄ 暂无评论查看所有80端口的连接数 netstat -nat|grep -i '80'|wc -l 对连接的IP按连接数量进行排序 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看TCP连接状态 n
Spring获取SessionFactory ctrain sessionFactory
String sql = "select sysdate from dual"; WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); String[] names = wac.getBeanDefinitionNames(); for(int i=0; i&
Hive几种导出数据方式 daizj hive 数据导出
Hive几种导出数据方式 1.拷贝文件如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 hadoop fs –cp source_path target_path 2.导出到本地文件系统 --不能使用insert into local directory来导出数据，会报错 --只能使用
编程之美 dcj3sjt126com 编程 PHP 重构
我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解 header("Content-type: text/plain"); function static_function () { static $i = 0; if ($i++ < 1
Android保存用户名和密码 dcj3sjt126com android
转自：http://www.2cto.com/kf/201401/272336.html 我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 1、通过普通的txt文本存储 2、通过properties属性文件进行存
Oracle 复习笔记之同义词 eksliang Oracle 同义词 Oracle synonym
转载请出自出处：http://eksliang.iteye.com/blog/2098861 1.什么是同义词同义词是现有模式对象的一个别名。概念性的东西，什么是模式呢？创建一个用户，就相应的创建了一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
Ajax案例 gongmeitao Ajax jsp
数据库采用Sql Server2005 项目名称为:Ajax_Demo 1.com.demo.conn包 package com.demo.conn; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; //获取数据库连接的类public class DBConnec
ASP.NET中Request.RawUrl、Request.Url的区别 hvt .net Web C#asp.net hovertree
如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
SVG 教程（七）SVG 实例，SVG 参考手册天梯梦 svg
SVG 实例在线实例下面的例子是把SVG代码直接嵌入到HTML代码中。谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。 SVG 实例 SVG基本形状一个圆矩形不透明矩形一个矩形不透明2 一个带圆角矩
事务管理 luyulong java spring 编程事务
事物管理 spring事物的好处为不同的事物API提供了一致的编程模型支持声明式事务管理提供比大多数事务API更简单更易于使用的编程式事务管理API 整合spring的各种数据访问抽象 TransactionDefinition 定义了事务策略 int getIsolationLevel()得到当前事务的隔离级别 READ_COMMITTED
基础数据结构和算法十一：Red-black binary search tree sunwinner Algorithm Red-black
The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
centos同步时间 stunizhengjia linux 集群同步时间
做了集群，时间的同步就显得非常必要了。以下是查到的如何做时间同步。在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o
ITeye 9月技术图书有奖试读获奖名单公布 ITeye管理员 ITeye
ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：《NFC：Arduino、Andro

jQuery学习笔记

jQuery学习笔记

一、初识jQuery

1、是什么？

2、为什么使用？

3、如何使用

二、jQuery的使用

1、jQuery函数 ：$ / jQuery

2、jQuery函数的使用

1、核心函数

2、核心对象

3、选择器

4、基本选择器

5、层次选择器

6、过滤选择器

7、常见效果-表格隔行变色

8、表单选择器

9、工具方法

10、常见效果-多Tab点击切换

11、属性

mmmmmmmmm

mmmmmmmmm

mmmmmmmmm

12、css

13、位置offset和position

14、scroll

15、常见效果-回到顶部

16、元素的尺寸

17、对象的筛选-过滤

18、筛选-对象的查找

19、一个小案例-选择复选框

1、jQuery方式

2、原生js方式

20、文档处理-增删改

21、例子-添加删除记录

1、jQuery方式

2、jQuery方式2-改进（使用了事件委托）

3、js原生方式

22、事件处理

23、区别mouseover与mouseenter

24、事件委托

25、轮播图

1、原生

2、jQuery

26、淡入淡出效果

27、滑动

28、显示与隐藏

29、自定义动画

30、导航动态显示效果

三、多库并存

四、onload与ready

五、扩展插件

六、jQuery插件-jQueryValidate

七、jQuery插件-jQueryUI

你可能感兴趣的:(javascript日常总结,jquery)

1、jQuery函数：$ / jQuery