Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用原生DOM -->
<script type="text/javascript">
window.onload = function() {
var btn1 = document.getElementById("btn01");
btn1.onclick = function() {
var username = document.getElementById("username").value;
alert(username);
}
}
</script>
<!--使用jQuery-->
<!-- 引用jQuery，本地引入jQuery -->
<!-- <script type="text/javascript" src="js/jquery-1.12.4.js"></script> -->
<!-- 也可以使用类似于BootCDN进行远程引入 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
//绑定文档加载完成的监听
$(function() {
$('#btn2').click(function() { //#btn2绑定点击监听
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>
函数与对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>测试</button>
<!--
1. jQuery核心函数
* 简称: jQuery函数($/jQuery)
* jQuery库向外直接暴露的就是$/jQuery
* 引入jQuery库后, 直接使用$即可
* 当函数用: $(xxx)
* 当对象用: $.xxx()
2. jQuery核心对象
* 简称: jQuery对象
* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
* 使用jQuery对象: $obj.xxx()
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
//1. jQuery函数: 直接可用
console.log($, typeof $)
console.log(jQuery===$) // 输出true
//2. jQuery对象: 执行jQuery函数得到jQuery对象
console.log($() instanceof Object) // 输出true
/*
(function (window) {
var jQuery = function () {
return new xxx()
}
window.$ = window.jQuery = jQuery
})(window)
*/
</script>
</body>
</html>
函数的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. jQuery作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将DOM对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. jQuery作为对象使用: $.xxx()
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉字符串两端的空格
*/
/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
//1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
$(function () { //绑定文档加载完成的监听
//1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
$('#btn').click(function () { //绑定点击事件监听
//this是什么？发生事件的DOM元素(<button>)
//console.log(this.innerHTML); //输出 测试
//1.3). 参数为DOM对象: 将DOM对象封装成jQuery对象
console.log($(this).html()); //输出 测试
//1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3"/><br/>').appendTo("div");
})
})
/*需求2. 遍历输出数组中所有元素值*/
var arr = [2, 4, 7];
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
console.log(index, item)
})
/*需求3. 去掉字符串两端的空格*/
var str = ' stone box '
// console.log('---'+str.trim()+'---')
console.log('---'+$.trim(str)+'---')
</script>
</head>
<body>
<div>
<button id="btn">测试</button>
<br/>
<input type="text" name="msg1"/><br/>
<input type="text" name="msg2"/><br/>
</div>
</body>
</html>
对象的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. jQuery对象是一个包含所有匹配的任意多个DOM元素的伪数组对象
2. 基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//需求1. 统计一共有多少个按钮
var $buttons = $('button');
console.log($buttons.size(), $buttons.length); //输出 4 4
//需求2. 取出第2个button的文本
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML); //输出 测试二 测试二
//需求3. 输出所有button标签的文本
$buttons.each(function (index, domEle) {
console.log(index, domEle.innerHTML, this);
});
$buttons.each(function () {
console.log(this.innerHTML);
});
//需求4. 输出'测试三'按钮是所有按钮中的第几个
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] = 'stone';
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>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
</body>
</html>
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
选择器：
1. 是什么?
- 有特定格式的字符串
2. 作用
- 用来查找特定页面元素
3. 基本选择器
- #id : id选择器
- element : 元素选择器
- .class : 属性选择器
- * : 任意标签
- selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
- selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//1. 选择id为div1的元素
//$('#div1').css({background:'red'});
//2. 选择所有的div元素
//$('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');
//6.选择所有
$('*').css('background','red');
})
</script>
</head>
<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB(title="hello")</li>
<li class="box">CCCCC(class="box")</li>
<li title="hello">DDDDDD(title="hello")</li>
</ul>
</body>
</html>
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
在给定的祖先元素下匹配所有的后代元素
2. parent>child
在给定的父元素下匹配所有的子元素
3. prev+next
匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
匹配 prev 元素之后的所有 siblings 元素
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//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>
</head>
<body>
<ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span class="box">DDDD</span></li>
<span>EEEEE</span>
</ul>
</body>
</html>
过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
在原有选择器匹配的元素中进一步进行过滤的选择器
* 基本
* 内容
* 可见性
* 属性
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//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>
</head>
<body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display:none">我本来是隐藏的</li>
</ul>
</body>
</html>
表格隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//$('#data>tbody>tr:odd').css('background','#ccccff');
//$('#data>tbody>tr:odd').addClass('odd');
$('#data>tbody>tr:odd').attr('class','odd');
})
</script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>姓名</th>
<th>工资</th>
<th>入职时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>$3500</td>
<td>2010-10-25</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Mary</td>
<td>$3400</td>
<td>2010-12-1</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>King</td>
<td>$5900</td>
<td>2009-08-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Scott</td>
<td>$3800</td>
<td>2012-11-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Smith</td>
<td>$3100</td>
<td>2014-01-27</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Allen</td>
<td>$3700</td>
<td>2011-12-05</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
表单选择器
1). 表单
2). 表单对象属性
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 1. 选择不可用的文本输入框
//$(':text:disabled').css('background','red');
// 2. 显示选择爱好的个数
console.log($(':checkbox:checked').length);
// 3. 显示选择的城市名称
$(':submit').click(function () {
alert($('select>option:selected').html()); //选择的option的的标签文本
alert($('select').val()); //选择的option的value属性值
})
})
</script>
</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>
</body>
</html>
$工具方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 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)); //输出 {name: "tom", age: 12}
json = '[{"name":"tom","age":12}, {"name":"jerry","age":11}]'; //json数组
//json数组 ===> JS数组
console.log($.parseJSON(json)); //输出 [{…}, {…}]
/**
* JSON.parse(jsonString) json字符串 ---> js对象/数组
* JSON.stringify(jsObj/jsArr) js对象/数组 ---> json字符串
*/
})
</script>
</head>
<body>
</body>
</html>
多TAB点击切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
var $contents = $('#container>div');
//第一种方式，先隐藏所有内容，再显示点击的内容
//给3个li加监听
/*$('#tab>li').click(function () { //隐式遍历
//隐藏所有内容
$contents.css('display','none');
//显示对应的内容div
//得到当前点击的li在兄弟中下标
var index = $(this).index();
//找到对应的内容div，并显示
$contents[index].style.display = 'block'; //原生方式
//$($contents[index]).css('display','block'); //jQuery方式
})*/
//第二种方式，只需要隐藏当前显示的，性能更好
var currIndex = 0; //当前显示的内容div的下标
$('#tab>li').click(function () { //隐式遍历
//隐藏当前已经显示的内容div
$contents[currIndex].style.display = 'none';
//显示对应的内容div
//得到当前点击的li在兄弟中下标
var index = $(this).index();
//找到对应的内容div，并显示
$contents[index].style.display = 'block'; //原生方式
//$($contents[index]).css('display','block'); //jQuery方式
//更新下标
currIndex = index;
})
})
</script>
</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>
</body>
</html>
属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. 操作任意属性
attr()
removeAttr()
prop()
2. 操作class属性
addClass()
removeClass()
3. 操作HTML代码/文本/值
html()
val()
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 1. 读取第一个div的title属性
console.log($('div:first').attr('title'));
// 2. 给所有的div设置name属性(value为stone)
$('div').attr('name','stone');
// 3. 移除所有div的title属性
$('div').removeAttr('title');
// 4. 给所有的div设置class='stoneClass'
$('div').attr('class','stoneClass');
// 5. 给所有的div添加class='abc'
$('div').addClass('abc');
// 6. 移除所有div的stoneClass的class
$('div').removeClass('stoneClass');
// 7. 得到最后一个li的标签体文本
console.log($('li:last').html());
// 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
$('li:first').html('<h1>mmmmmmmmm</h1>');
// 9. 得到输入框中的value值
console.log($(':text').val());
// 10. 将输入框的值设置为stone
$(':text').val('stone');
// 11. 点击'全选'按钮实现全选
//attr()：操作属性值为非布尔值的属性
//prop()：操作属性值为布尔值的属性
var $checkboxes = $(':checkbox');
$('button:first').click(function () {
$checkboxes.prop('checked',true);
})
// 12. 点击'全不选'按钮实现全不选
$('button:last').click(function () {
$checkboxes.prop('checked',false);
})
})
</script>
</head>
<body>
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<input type="text" name="username" value="stoneClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>
</body>
</html>
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
设置css样式/读取css值
css()
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//1. 得到第一个p标签的颜色
//console.log($('p:first').css('color')); //输出 rgb(0, 0, 255)
//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>
</head>
<body>
<p style="color: blue;">STONE的后裔</p>
<p style="color: green;">太阳的后裔</p>
</body>
</html>
offset和position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<!--
获取/设置标签的位置数据
* offset(): 相对页面左上角的坐标
* position(): 相对于父元素左上角的坐标
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 1. 点击 btn1
$('#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
})
// 2. 点击 btn2
$('#btn2').click(function () {
// 设置 div2 相对于页面的左上角的位置
$('.div2').offset({
left:50,
top:100
})
})
})
</script>
</head>
<body style="height: 2000px;">
<div class="div1">
<div class="div2">测试offset</div>
</div>
<div class='div3'>
<button id="btn1">读取offset和position</button>
<button id="btn2">设置offset</button>
</div>
</body>
</html>
scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. scrollTop():
读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
滚动到指定位置(兼容chrome和IE)
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//1. 得到div或页面滚动条的坐标
$('#btn1').click(function () {
console.log($('div').scrollTop());
//console.log($('html').scrollTop() + $('body').scrollTop());
console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop());
});
//2. 让div或页面的滚动条滚动到指定位置
$('#btn2').click(function () {
$('div').scrollTop(200);
$('html,body').scrollTop(300);
})
})
</script>
</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">得到scrollTop</button>
<button id="btn2">设置scrollTop</button>
</body>
</html>
回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#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>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
$(function () {
$('#to_top').click(function () {
//瞬间回到顶部
//$('html,body').scrollTop(0);
//平滑回到顶部
//总距离
var $page = $('html,body'); //只能用于设置
var distance = $('html').scrollTop() + $('body').scrollTop();
//console.log(distance);
//总时间
var time = 500;
//间隔时间
var intervalTime = 50;
var itemDistance = distance/(time/intervalTime);
//使用循环定时器不断滚动
var timer = setInterval(function () {
distance -= itemDistance;
//到达顶部，停止计时器
if(distance < 0){
distance = 0;
clearInterval(timer);
}
$page.scrollTop(distance);
},intervalTime);
/*console.log(getComputedStyle(document.body, null).height);
move(document.body,"height",itemDistance,0,function () {
});*/
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
</body>
</html>
元素尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 100px;
height: 150px;
background: red;
padding: 10px;
border: 10px #fbd850 solid;
margin: 10px;
}
</style>
<!--
1. 内容尺寸
height(): height
width(): width
2. 内部尺寸
innerHeight(): height+padding
innerWidth(): width+padding
3. 外部尺寸
outerHeight(false/true): height+padding+border 如果是true, 加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
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>
</head>
<body>
<div>div</div>
</body>
</html>
对象过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
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][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>
</head>
<body>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br>
</body>
</html>
对象查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
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');
var $li = $('#cc');
// 4. id为cc的li标签的前面的所有li标签
//$li.prevAll('li').css('background','red');
// 5. id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background','red');
})
</script>
</head>
<body>
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<div>
<ul>
<span>span文本1</span>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box" id='cc'>CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>span文本2</span></li>
<span>span文本3</span>
</ul>
<span>span文本444</span><br>
<li>eeeee</li>
<li>EEEEE</li>
<br>
</div>
</body>
</html>
爱好选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
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.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.not(':checked').length === 0);
})
})
</script>
</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>
</body>
</html>
增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<!--
1. 添加/替换元素
* append(content)
向当前匹配的所有元素内部的最后插入指定内容
* prepend(content)
向当前匹配的所有元素内部的最前面插入指定内容
* before(content)
将指定内容插入到当前所有匹配元素的前面
* after(content)
将指定内容插入到当前所有匹配元素的后面替换节点
* replaceWith(content)
用指定内容替换所有匹配的标签删除节点
2. 删除元素
* empty()
删除所有匹配元素的子元素
* remove()
删除所有匹配的元素
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 1. 向id为ul1的ul下添加一个span(最后)
var $ul1 = $('#ul1');
//$ul1.append('<span>append()添加的span</span>');
$('<span>appendTo()添加的span</span>').appendTo($ul1);
// 2. 向id为ul1的ul下添加一个span(最前)
//$ul1.prepend('<span>prepend()添加的span</span>');
$('<span>prependTo()添加的span</span>').prependTo($ul1);
// 3. 在id为ul1的ul下的li(title为hello)的前面添加span
$ul1.children('li[title=hello]').before('<span>before()添加的span</span>');
// 4. 在id为ul1的ul下的li(title为hello)的后面添加span
$ul1.children('li[title=hello]').after('<span>after()添加的span</span>');
// 5. 将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('<p>replaceWith()替换的p</p>');
// 6. 移除id为ul2的ul下的所有li
//$('#ul2').empty();
$('#ul2>li').remove();
})
</script>
</head>
<body>
<ul id="ul1">
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">EEEEE</li>
<li>FFFFF</li>
</ul>
<br>
<br>
<ul id="ul2">
<li>aaa</li>
<li title="hello">bbb</li>
<li class="box">ccc</li>
<li title="hello">ddd</li>
<li title="two">eee</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="练习/练习2_添加删除记录/css.css"/>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
//添加
$('#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.生成对应的<tr>标签结构，并插入到#employeeTable的tbody中
/*<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>*/
$('<tr></tr>')
.append('<td>'+empName+'</td>')
.append('<td>'+email+'</td>')
.append('<td>'+salary+'</td>')
.append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
.appendTo('#employeeTable>tbody')
.find('a')
.click(deleteTr);
//3.清除输入
$empName.val('');
$email.val('');
$salary.val('');
})
//删除
$('#employeeTable a').click(deleteTr);
function deleteTr() {
var $tr = $(this).parent().parent();
var name = $tr.children(':first').html();
if (confirm('确定删除'+name+'吗')) {
$tr.remove();
}
return false;
};
})
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></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>
</body>
</html>
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<!--
1. 事件绑定(2种)：
* eventName(function(){})
绑定对应事件名的监听, 例如：$('#div').click(function(){});
* on(eventName, funcion(){})
通用的绑定事件监听, 例如：$('#div').on('click', function(){})
* 优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
* off(eventName)
3. 事件的坐标
* event.clientX, event.clientY 相对于视口的左上角
* event.pageX, event.pageY 相对于页面的左上角
* event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
* 停止事件冒泡 : event.stopPropagation()
* 阻止事件默认行为 : event.preventDefault()
-->
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 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('enter');
});
$('.inner').mouseleave(function () { //离开
console.log('leave');
});*/
/*$('.inner').on('mouseenter',function () {
console.log('on enter');
});
$('.inner').on('mouseleave',function () {
console.log('on leave');
});*/
/*$('.inner').hover(function () {
console.log('hover enter');
},function () {
console.log('hover leave');
});*/
// 3. 点击btn1解除.inner上的所有事件监听
$('#btn1').click(function () {
$('.inner').off();
});
// 4. 点击btn2解除.inner上的mouseenter事件
$('#btn2').click(function () {
$('.inner').off('mouseenter');
});
// 5. 点击btn3得到事件坐标
$('#btn3').click(function (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>
</head>
<body style="height: 2000px;">
<div class="out">
外部DIV
<div class="inner">内部div</div>
</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>
</body>
</html>
mouseover与mouseenter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<!--
区别mouseover与mouseenter?
* mouseover: 在移入子元素时也会触发, 对应mouseout
* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()
区别on('eventName', fun)与eventName(fun)
* on('eventName', fun): 通用, 但编码麻烦
* eventName(fun): 编码简单, 但有的事件没有对应的方法
-->
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.div1')
.mouseover(function () {
console.log('mouseover 进入')
})
.mouseout(function () {
console.log('mouseout 离开')
})
$('.div3')
.mouseenter(function () {
console.log('mouseenter 进入')
})
.mouseleave(function () {
console.log('mouseleave 离开')
})
})
</script>
</head>
<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>
</body>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
绑定事件监听的问题: 新加的元素没有监听
-->
<!--
1. 事件委托(委派/代理):
* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
* 监听回调是加在了父辈元素上
* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
* 委托方: 业主 li
* 被委托方: 中介 ul
3. 使用事件委托的好处
* 添加新的子元素, 自动有事件响应处理
* 减少事件监听的数量: n==>1
4. jQuery的事件委托API
* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
* 移除事件委托: $(parentSelector).undelegate(eventName)
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
/*
需求：
1. 点击 li 背景就会变为红色
2. 点击 btn 就添加一个 li
*/
/*$('ul>li').click(function () {
this.style.background = 'red'
});*/
$('#btn').click(function () {
$('ul').append('<li>新增的li....</li>')
});
$('ul').delegate('li','click',function () {
this.style.background = 'red';
})
$('#btn2').click(function () {
$('ul').undelegate('click');
});
})
</script>
</head>
<body>
<ul>
<li>11111</li>
<li>1111111</li>
<li>111111111</li>
<li>11111111111</li>
</ul>
<li>22222</li>
<br>
<button id="btn">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>
<br>
</body>
</html>
平滑翻页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*去除内边距,没有链接下划线*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/*让<body有20px的内边距*/
body {
padding: 20px;
}
/*最外围的div*/
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*相对定位*/
margin: 0 auto;
}
/*包含所有图片的<div>*/
#list {
width: 4200px; /*7张图片的宽: 7*600 */
height: 400px;
position: absolute; /*绝对定位*/
z-index: 1;
}
/*所有的图片<img>*/
#list img {
float: left; /*浮在左侧*/
}
/*包含所有圆点按钮的<div>*/
#pointsDiv {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
/*所有的圆点<span>*/
#pointsDiv span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
/*第一个<span>*/
#pointsDiv .on {
background: orangered;
}
/*切换图标<a>*/
.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>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</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>
</body>
</html>
app.js文件：
/*
功能说明:
1. 点击向右(左)的图标, 平滑切换到下(上)一页
2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
3. 每隔3s自动滑动到下一页
4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
5. 切换页面时, 下面的圆点也同步更新
6. 点击圆点图标切换到对应的页
bug: 快速点击时, 翻页不正常
*/
$(function () {
var $container = $('#container');
var $list = $('#list');
var $points = $('#pointsDiv>span');
var $prev = $('#prev');
var v$next = $('#next');
var PAGE_WIDTH = 600; //一页的宽度
var TIME = 400; //翻页总的时间
var ITEM_TIME = 20; //单元移动的间隔时间
var imgCount = $points.length;
var index = 0; //当前下标
var moving = false; //标识是否正在翻页（默认没有）
//1. 点击向右(左)的图标, 平滑切换到下(上)一页
v$next.click(function () {
nextPage(true);
});
$prev.click(function () {
nextPage(false);
});
//3. 每隔3s自动滑动到下一页
var intervalId = setInterval(function () {
nextPage(true);
},3000);
//4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
$container.hover(function () {
//清除定时器
clearInterval(intervalId);
},function () {
intervalId = setInterval(function () {
nextPage(true);
},3000);
});
//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; //标识正在翻页
var offset = 0;
if (typeof next === 'boolean'){
offset = next ? -PAGE_WIDTH : PAGE_WIDTH;
} else {
offset = -(next-index)*PAGE_WIDTH;
}
var itemOffset = offset/(TIME/ITEM_TIME);
var currLeft = $list.position().left;
var targetLeft = currLeft + offset;
var intervalId = setInterval(function () {
currLeft += itemOffset;
if (currLeft === targetLeft){ //到达目标位置
clearInterval(intervalId); //清除定时器
//标识翻页停止
moving = false;
// 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
//如果到达了最右边的图片（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;
}
}
$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的<span>的class移除
$points.eq(index).removeClass('on');
//给目标圆点添加class='on'
$points.eq(targetIndex).addClass('on');
//将index更新为targetIndex
index = targetIndex;
}
})
淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
<!--
淡入淡出: 不断改变元素的透明度(opacity)来实现的
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
需求：
1. 点击btn1, 慢慢淡出
* 无参
* 有参
* 字符串参数
* 数字参数
2. 点击btn3, 慢慢淡入
3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
*/
$(function () {
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>
</head>
<body>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">淡出/淡入切换</button>
<div class="div1">
</div>
</body>
</html>
滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
<!--
滑动动画: 不断改变元素的高度实现
1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
需求：
1. 点击btn1, 向上滑动
2. 点击btn2, 向下滑动
3. 点击btn3, 向上/向下切换
*/
$(function () {
var $div1 = $('.div1');
$('#btn1').click(function () {
$div1.slideUp();
});
$('#btn2').click(function () {
$div1.slideDown();
});
$('#btn3').click(function () {
$div1.slideToggle();
});
})
</script>
</head>
<body>
<button id="btn1">慢慢收缩</button>
<button id="btn2">慢慢展开</button>
<button id="btn3">收缩/展开切换</button>
<div class="div1">
</div>
</body>
</html>
显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
display: none;
}
</style>
<!--
显示隐藏，默认没有动画, 动画(opacity/height/width)
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
需求:
1. 点击btn1, 立即显示
2. 点击btn2, 慢慢显示
3. 点击btn3, 慢慢隐藏
4. 点击btn4, 切换显示/隐藏
*/
$(function () {
var $div1 = $('.div1');
$('#btn1').click(function () {
$div1.show();
});
$('#btn2').click(function () {
$div1.show(1000);
});
$('#btn3').click(function () {
$div1.hide(1000);
});
$('#btn4').click(function () {
$div1.toggle();
});
})
</script>
</head>
<body>
<button id="btn1">瞬间显示</button>
<button id="btn2">慢慢显示</button>
<button id="btn3">慢慢隐藏</button>
<button id="btn4">显示隐藏切换</button>
<div class="div1">
</div>
</body>
</html>
自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 300px;
background: red;
}
</style>
<!--
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></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. 停止动画
*/
$(function () {
var $div1 = $('.div1');
$('#btn1').click(function () {
/*$div1.animate({
width: 200,
height: 200
},1000);*/
$div1.animate({width:200},1000).animate({height:200},1000);
});
$('#btn2').click(function () {
//$div1.animate({left:500,top:100},1000);
$div1.animate({left:100,top:20},1000);
});
$('#btn3').click(function () {
//$div1.animate({left:'+=100',top:'+=50'},1000);
$div1.animate({left:'-=100',top:'-=20'},1000);
});
$('#btn4').click(function () {
$div1.stop();
});
})
</script>
</head>
<body>
<button id="btn1">逐渐扩大</button>
<button id="btn2">移动到指定位置</button>
<button id="btn3">移动指定距离</button>
<button id="btn4">停止动画</button>
<div class="div1">
爱在西元前，学在尚硅谷
</div>
</body>
</html>
导航菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
$('#navigation>ul>li:has(ul)').hover(function () {
//动画展开
$(this).children('ul').stop().slideDown();
},function () {
//动画收缩
$(this).children('ul').stop().slideUp();
})
})
</script>
</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>
</body>
</html>
多库共存
myLib.js文件：
(function () {
window.$ = function () {
console.log('my lib $() ...');
}
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
<!--
问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()
-->
<script type="text/javascript" src="js/myLib.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
// 释放$的使用权
jQuery.noConflict();
// 调用myLib中的$
$();
// 要想使用jQuery的功能, 只能使用jQuery
jQuery(function () {
console.log('文档加载完成')
});
console.log('+++++');
</script>
</head>
<body>
</body>
</html>
onload与ready
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window.onload与$(document).ready()</title>
<!--
区别: window.onload与 $(document).ready()
* window.onload
* 包括页面的图片加载完后才会回调(晚)
* 只能有一个监听回调
* $(document).ready()
* 等同于: $(function(){})
* 页面加载完就回调(早)
* 可以有多个监听回调
-->
<script type="text/javascript" src="js/jquery-1.12.4.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());
})
</script>
</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">
</body>
</html>
自定义插件
jquery-plugin.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;
})
}
});
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
<!--
1. 扩展jQuery的工具方法
$.extend(object)
2. 扩展jQuery对象的方法
$.fn.extend(object)
-->
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/jquery-plugin.js"></script>
<script type="text/javascript">
/*
需求：
1. 给 $ 添加4个工具方法:
* min(a, b) : 返回较小的值
* max(c, d) : 返回较大的值
* leftTrim() : 去掉字符串左边的空格
* rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选
*/
$(function () {
console.log($.min(3, 5), $.max(3, 5));
var string = ' my stone ';
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>
</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="反选"/>
</body>
</html>
验证插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<!--
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
step: $.validator.format( "Please enter a multiple of {0}." )
-->
<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>
UI插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
<!-- Accordion: 手风琴-->
<h2>1. Accordion: 手风琴</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<!-- 2. Autocomplete: 自动搜索匹配 -->
<h2>Autocomplete</h2>
<div>
<input id="autocomplete" title="type "a"">
</div>
<!-- 3. Tabs: 选项卡 -->
<h2 >3. Tabs: 选项卡</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></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="jquery.js"></script>
<script type="text/javascript" src="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>
日期插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
<input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
<input class="laydate-icon" id="demo" value="2014-6-25更新">
<script type="text/javascript">
;!function(){
laydate.skin('molv');
laydate({
elem: '#demo'
})
}()
</script>
<div id="test1" class="laydate-icon"></div>
<script>
laydate({ // 配置对象
elem: '#test1',
format: 'YYYY/MM', // 分隔符可以任意定义，该例子表示只显示年月
festival: true, //显示节日
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas);
}
});
</script>
<div id="hello3" class="laydate-icon"></div>
<script>
laydate({
elem: '#hello3',
min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
});
</script>
</body>
</html>
AJAX
概述
AJAX：一种不用刷新整个页面便可以与服务器通讯的技术。
XMLHttpRequest：创建AJAX应用的最佳选择。
利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分：
- onreadystatechange事件处理函数，由服务器触发，在AJAX执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发readystatechange事件
- open方法
- send方法
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function () {
//1.获取a节点并对其添加onclick响应函数
document.getElementsByTagName('a')[0].onclick = function() {
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据：url
var url = this.href;
var method = "GET";
//5.调用XMLHttpRequest对象的open方法
request.open(method, url);
//6.调用XMLHttpRequest对象的send方法
request.send(null);
//7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function() {
//8.判断响应是否完成：XMLHttpRequest对象的readystate属性值为4的时候
if (request.readyState == 4) {
//9.再判断响应是否可用：XMLHttpRequest对象status属性值为200
if (request.status == 200 || request.status == 304) {
//10.打印响应结果：responseText
alert(request.responseText);
}
}
}
//2.取消a节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href="helloAjax.txt">Hello Ajax</a>
</body>
</html>
解析HTML
HTML由一些普通的文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。不必从responseText属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。插入HTML代码最简单的方式是更新这个元素的innerHTML。
- 优点：
- 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
- HTML 的可读性好。
- HTML 代码块与 innerHTML 属性搭配，效率高。
- 缺点：
- 若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适
- innerHTML 并非 DOM 标准。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload = function() {
var aNodes = document.getElementsByTagName('a');
for (var i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.html">Andy</a>
</li>
<li>
<a href="files/richard.html">Richard</a>
</li>
<li>
<a href="files/jeremy.html">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
解析XML
- 优点：
- XML 是一种通用的数据格式。
- 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
- 利用 DOM 可以完全掌控文档。
- 缺点：
- 如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。
- 当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload = function() {
var aNodes = document.getElementsByTagName('a');
for (var i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
//1.结果为XML格式，所以需要使用responseXML来获取
var result = request.responseXML;
//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中，目标格式为：
/*
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.xml">Andy</a>
</li>
<li>
<a href="files/richard.xml">Richard</a>
</li>
<li>
<a href="files/jeremy.xml">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
解析JSON
- JSON（JavaScript Object Notation）一种简单的数据格式，比XML更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
- JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
- JSON 用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
- 对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。
- JSON 只是一种文本字符串。它被存储在 responseText 属性中。
- 为了读取存储在 responseText 属性中的 JSON 数据，需要使用 JavaScript 的 eval 语句。函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的。
- 优点：
- 作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。
- JSON 不需要从服务器端发送含有特定内容类型的首部信息。
- 缺点：
- 语法过于严谨
- 代码不易读
- eval 函数存在风险
- 若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
- 如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势
- 当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 “世界语”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload = function() {
var aNodes = document.getElementsByTagName('a');
for (var i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
//1.结果为JSON格式，需要使用eval来解析
var result = request.responseText;
var object = eval("(" + result + ")");
//2.结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中，目标格式为：
/*
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
*/
var name = object.person.name;
var website = object.person.website;
var email = object.person.email;
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto:" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.js">Andy</a>
</li>
<li>
<a href="files/richard.js">Richard</a>
</li>
<li>
<a href="files/jeremy.js">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
使用jQuery实现AJAX
- jQuery 对 AJAX 操作进行了封装, 在 jQuery 中最底层的方法是 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()
- load() 方法是 jQuery 中最为简单和常用的 AJAX 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是:
load(url[, data][,callback]) - 程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 URL 做为参数传递给 load() 方法即可。
- 如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为
url selector(注意: url 和选择器之间有一个空格)。 - 传递方式: load() 方法的传递参数根据参数 data 来自动确定。如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式。
- 对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象。
$.get()方法使用 GET 方式来进行异步请求. 它的结构是:$.get(url[, data][, callback][, type])- $.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种。
- $.get() 和 $.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("a").click(function() {
//使用load方法处理AJAX
var url = this.href;
var args = {"time":new Date()};
$("#content").load(url, args);
return false;
})
})
</script>
</head>
<body>
<a href="helloAjax.txt">Hello Ajax</a>
<div id="content"></div>
</body>
</html>
使用jQuery改写前面的HTML解析：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("a").click(function() {
//" h2 a"为选择器
var url = this.href + " h2 a";
var args = {"time":new Date()};
//任何一个html节点都可以使用load方法来加载AJAX，结果将直接插入HTML节点中
$("#details").load(url, args);
return false;
})
})
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.html">Andy</a>
</li>
<li>
<a href="files/richard.html">Richard</a>
</li>
<li>
<a href="files/jeremy.html">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
使用jQuery改写前面的XML解析：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("a").click(function() {
var url = this.href; //AJAX请求的目标URL
var args = {"time":new Date()}; //需要是JSON格式
//function：回调函数，当响应结束时，回调函数被触发，响应结果在data中
$.get(url, args, function(data) {
var name = $(data).find("name").text();
var website = $(data).find("website").text();
var email = $(data).find("email").text();
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name + "</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
})
return false;
})
})
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.xml">Andy</a>
</li>
<li>
<a href="files/richard.xml">Richard</a>
</li>
<li>
<a href="files/jeremy.xml">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
使用jQuery改写前面的JSON解析：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
$("a").click(function() {
var url = this.href; //AJAX请求的目标U
var args = {"time":new Date()}; //需要是JSON格式
//function：回调函数，当响应结束时，回调函数被触发，响应结果在data中
$.getJSON(url, args, function(data) {
var name = data.person.name;
var website = data.person.website;
var email = data.person.email;
$("#details").empty()
.append("<h2><a href='mailto:" + email + "'>" + name + "</a></h2>")
.append("<a href='" + website + "'>" + website + "</a>");
})
return false;
})
})
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.js">Andy</a>
</li>
<li>
<a href="files/richard.js">Richard</a>
</li>
<li>
<a href="files/jeremy.js">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
扫一扫
4750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
