DOM增删改查
document.getElementByID('header'); --> $('#header')
getElementsByTagName('p'); --> $('p')
ajax --> $.ajax('xxx.php')
new XMLHttpRequest();
onreadystatechange = function(){
}
open();
send();
大量重复操作
第 第2章、认识 章、认识JQuery
jQuery是什么?
是封装了常用JS操作函数的一个库文件 库文件
有没有其他开源库？
Prototype.js 历史比较早,是SamStephenson写的一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax ，国内外有
多个基于此类库开发的子项目.
Ext.js ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。功能丰富，无人能出其右。
强势在UI操作上,可以很方便帮我们创建一个表格/表单,漂浮的窗口,ajax等等.大而全.但确定需求上做的不好.
YUI:Yahoo! UI, 雅虎开源发布的一款js库.
JQuery 名称解释
JQuery = Javascript + Query (查询)
Jquery意思即指: 强大的DOM节点查询
为什么要学习jquery?
1: 市场占有率, 工作用到的可能性大.
2: jquery相比其他的js库,有其鲜明的特点.
Jquery从2006开始发布,但发布后迅速占据市场,成为后起之秀.
2.1: 查询DOM节点特别强大,像prototype.js则把很大一部分功能花在Array,String的原型功能的扩充上.
2.2: 封装的DOM操作 (比如想修改innerHTML=>html(),比如想操作css,DOMN ode.style.backgroundColor='red' , $(node).css('background' ,'red' );)
2.3: 动画操作非常方便
2.4: 高低版本兼容性好. 像dojo,高低版本兼容性不如jquery,影响了市场.
官方网站: http://jquery.com/
官方手册: http://api.jquery.com
版本说明 :
1.x 系列
2.x 系列
mobile系列 : 针对移动设备1.x ,2.x API 都是一样的.
但是2.x 不再兼容低版本IE,必须是IE9及以上
下载注意 下载注意
从官方网站下载时, jquery的文件名格式如下:
Jquery-1.x.x-min.js
或者jquery-1.x.x.js
2者功能没有区别,只在大小上有区别,min是压缩后的代码.
即把空行,空白等压缩掉,把变量名字变短.
而文件比较大的没压缩的源文件.
所以,当学习时,使用没压缩的源文件,但是在线网站,使用压缩版,可以提高下载速度
第 第3章、基本选择器 章、基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<script type="text/javascript" src="./jq.js"></script>
</head>
<body>
<div id="test1">id test1</div>
<div class="test2">class test2</div>
<div class="test2">class test2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
<script type="text/javascript">
//id 选择器
$('#test1').css('background','gray');
//标签选择器
$('p').css('background','blue');
//类选择器
$('.test2').css('background','green');
//*
$('*').css('background','pink');
</script>
</html>
第 第4章、层次选择器 章、层次选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<p>
<input type="text" />
<span>1</span>
<span>2</span>
</p>
<p>
<input type="text" />
<span>3</span>
<span>4</span>
</p> <p>
<input type="text" />
<span>5</span>
<span>6</span>
</p>
<div><span>7</span></div>
</body>
<script type="text/javascript">
//div下的span
$('div span').css('background','blue')
//紧挨着的下一个元素,每一个元素之后的1个next元素被选中
//$('input + span').css('background','gray');
//紧挨着的所有同辈元素,每一个元素之后的所有同辈元素
$('input ~ span').css('background','gray');
</script>
</html>
第 第5章、属性选择器 章、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<p>Email:<input type="text" name="email" /></p>
<p>密码:<input type="text" name="password" /></p>
<p>重复密码:<input type="text" name="repassword" /></p>
<p>学号:<input type="text" name="stunum" /></p>
<p>学分:<input type="text" name="stuscore" /></p>
<p>秘密:<input type="password" ></p>
</body>
<script type="text/javascript">
//type选择
$('input[type=password]').css('background','gray');
//name 选择
$('input[name=email]').css('background','green');
//name不等于email
$('input[name!=email]').css('background','red');
//正则选择
$('input[name$=password]').css('background','orange');//都用password结尾的
$('input[name^=stu]').css('background','blue');//开头是stu
$('input[name*=pass]').css('background','orange');//含有pass
</script>
</html>
第 第6章、自定义属性行不行 章、自定义属性行不行?
<p>Email:<input type="text" aa='s' name="email" /></p>
$('input[aa=s]').css('background','green');
第 第7章、基础过滤器 章、基础过滤器如果选择器选出的结果仍不够细,可以用过滤器,进一步筛选.
过滤器一般写在"选择器"之后,如"选择器:过滤器"
基础过滤器是根据对象的"索引"值来查找
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
</body>
<script type="text/javascript">
//第一个
$('li:first').css('background','gray');
//最后一个
$('li:last').css('background','gray');
//奇数
$('li:odd').css('background','green');
//偶数
$('li:even').css('background','orange');
//具体第几个 从0开始
$('li:eq(3)').css('background','purple');
</script>
</html>
第 第8章、内容过滤器 章、内容过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<style media="screen">
p{
height: 20px;
border: 1px solid blue;
}
</style>
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>马云</td>
<td>男</td>
<td>26</td>
</tr>
<tr> <td>奶茶妹</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>强东</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>金星</td>
<td></td>
<td><span>22</span></td>
</tr>
</table>
<p><br /></p>
<p>a</p>
<p></p>
</body>
<script type="text/javascript">
//找td中含有‘女’字的
$('td:contains(女)').css('background','red');
//找td为空的
$('td:empty').css('background','yellow');
//找出不为空的P标签(P标签下没有内容的)-->找到当爹的标签p
$('p:parent').css('background','orange');
//找出td下，含有span标签的-->标签下有标签的
$('td:has(span)').css('background','blue');
</script>
</html>
第 第9章、表单类型过滤器 章、表单类型过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<p><input type="text" /></p>
<p><input type="password" /></p>
<p><input type="checkbox" /></p>
<p><input type="radio" /></p>
</body>
<script type="text/javascript">
//旧版
$('input[type=text]').css('background','red');
//表单类型选择
$('input:password').css('background','gray');
</script>
</html>
第 第10章、可见性过滤器 章、可见性过滤器
可见性过滤器:
:hidden
匹配所有不可见元素，如果使用css的visibility属性让元素不显示但是占位，则不属于hidden了查找display:none的tr元素，$("tr:hidden")
:visible
匹配所有可见元素
查找所有display不为none的元素，$("tr:visible")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<input type="button" value="一起分享" onclick="share();" />
<div style="display:none">我是隐藏内容</div>
<div>我是显示内容</div>
</body>
<script type="text/javascript">
function share(){
//div:hidden找到隐藏的部分
$('div:hidden').css('display','block')
}
</script>
</html>
第 第11章、子元素过滤器 章、子元素过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<div>
<p>a</p>
<p>b</p>
</div>
<div>
<p>c</p>
<p>d</p>
</div>
<ul>
<li><a href="">导航</a></li>
<li><span>s</span><a href="">导航</a></li>
</ul>
</body>
<script type="text/javascript">
//同一层次下，最后一个P标签
$('p:last-of-type').css('background','gray');
//匹配li下的独生a标签
$('li a:only-child').css('background','blue');
</script>
</html>
第 第12章、操作节点的普通属性 章、操作节点的普通属性
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<img src="../JS/off.png" alt="" onclick="kai()"/>
</body>
<script type="text/javascript">
function kai(){
//判断 attr可以获取元素的普通属性
if( $('img').attr('src').indexOf('off') >= 0 ){
//此处注意:如果你写第二个参数就是改变值,不写就是获取
$('img').attr('src' , '../JS/on.png');
}else{
$('img').attr('src','../JS/off.png');
}
}
</script>
</html>
第 第13章、操作节点的 章、操作节点的CSS属性 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<style media="screen">
div{
300px;
height: 300px;
border: 1px solid blue;
}
</style>
<body>
<div onclick="bian()"></div>
</body>
<script type="text/javascript">
function bian(){
var w = parseInt($('div').css('width'));
var h = parseInt($('div').css('height'));
var b = parseInt($('div').css('borderBottomWidth'));
$('div').css('width', w+10+'px');
$('div').css('height', h+10+'px');
$('div').css('borderBottomWidth', b+1+'px');
}
/*
function bian(){
var w = $('div').width();
var h = $('div').height();
var b = parseInt($('div').css('borderBottomWidth'));
$('div').css('width' , w+10+'px');
$('div').css('height' , h+10+'px');
$('div').css('borderBottomWidth' , b+10+'px');
}
*/ </script>
</html>
第 第14章、操作节点的布尔属性 章、操作节点的布尔属性
全选、全不选问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jquery.js">
</script>
</head>
<body>
<input type="button" name="name" value="全选" onclick="quan()">
<input type="button" name="name" value="不选" onclick="bu()">
<p>
<input type="checkbox" name="name" value="">
</p>
<p>
<input type="checkbox" name="name" value="">
</p>
<p>
<input type="checkbox" name="name" value="">
</p>
<p>
<input type="checkbox" name="name" value="">
</p>
</body>
<script type="text/javascript">
/*
*在DOM中，布尔属性就是有或者没有两种情况，网上说的checked='checked'这种
*方式并不准确，只写checked就行了；
*********************************
*猜测：attr的方式，虽然修改了DOM中的属性值，但是
*并不一定每次都写入内存，这个取决于浏览器在加载DOM树时，如何操作内存中的数据；
*因此，JQuery 的作者专门封装了prop，来直接通过浏览器操作内存数据，使浏览器改
*变DOM中的布尔属性
function quan(){
$("input:checkbox").attr('checked',true);
}
function bu(){
$("input:checkbox").attr('checked',false);
}
*/
//对于HTML的布尔属性，JQ用prop操作
function quan(){
$("input:checkbox").prop('checked',true);
}
function bu(){
$("input:checkbox").prop('checked',false);
}
</script>
</html>
一道题目:http://www.zixue.it/thread-15687-1-1.html
第 第15章、删除 章、删除DOM节点 节点
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./jq.js">
</script>
</head>
<body>
<input type="button" name="name" value="删除" onclick="quan()">
<input type="button" name="name" value="清空" onclick="bu()">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航3</li>
</ul>
</body>
<script type="text/javascript">
//观察两种方式的不同
function quan(){
$('ul').remove();//删除此节点
}
function bu(){
$('ul').empty();//清空节点下的内容
}
</script>
</html>
第 第16章、增加节点 章、增加节点
接上节代码
....
<input type="button" value="增加li" onclick="zheng();">
...
function zeng() {
//添加标签到ul的最下方
$('<li>导航5</li>').appendTo($('ul'));
//为ul添加一个标签到最下方
$('ul').append('<li>导航6</li>');
//为ul添加一个标签到最上方
$('ul').prepend('<li>导航6</li>');
}
第 第17章、节点包裹 章、节点包裹
<body>
<h1>jQuery包结点</h1>
<input type="button" value="用p标签包住每个input" onclick="wp()" />
<input type="button" value="用p标签包住所有input" onclick="wpa()" />
<input type="button" value="li中的文字加粗" onclick="cu()" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
<script>
//用P标签包含住每一个input:textfunction wp() {
$('input:text').wrap('<p></p>');
}
//用一个P标签包含住所有input:text
function wpa() {
$('input:text').wrapAll('<p></p>');
}
//为li标签里的内容添加b标签
function cu() {
$('li').wrapInner('<b></b>');
}
</script>
第 第18章、 章、jQuery对象与 对象与DOM对象的关系与转换 对象的关系与转换
<body>
<h1>jQuery对象与DOM对象的关系与转换</h1>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
<p id="test">test</p>
</body>
<script>
//没有效果并且报错，充分证明$(选择器)返回值不是一个DOM 对象
//$('#test').style.background = 'blue';
//没有效果并报错，证明DOM 对象也不是$()的返回值
//var test = document.getElementById('test');
//test.css('background','blue');
//$()返回的到底是什么？
//是对象，但不是DOM 对象，而是JQuery对象
/*
* jQuery对象与DOM对象是什么关系？
* jQuery对象按选择器，选中1个或者多个DOM对象，
* 把这些DOM对象，放在jQuery对象上，
* 索引从0 开始
* */
//console.log($('li'));
//jQuery对象转化为DOM对象，直接[索引]取值即可
//$('li')[2].style.background = 'blue';
//找手册.也可以用get(索引)方法
//$('li').get(3).style.background = 'blue';
//DOM对象转化为jQuery对象，直接把DOM对象当作值或者参数传给$()
var test = document.getElementById('test')[0];
$(test).css('background','green');
</script>
第 第19章、 章、jQuery对象的遍历 对象的遍历
<body>
<h1>遍历jQuery对象的内部的DOM对象</h1>
<input type="button" value="反选" onclick="fan()" />
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
</body><script>
/*
//面向过程的思路
function fan(){
var cbs = $('input:checkbox');
for(var i=0;i<cbs.length;i++){
if($(cbs[i]).prop('checked')){
$(cbs[i]).prop('checked',false);
}else{
$(cbs[i]).prop('checked',true);
}
}
}
*/
/*
//面向函数式的思路，回调函数
//系统函数 each() ->每一个，一个一个往下走，
//只带着往下走，每走一步的具体操作，你说了算
//在这个回调中,this是谁?
//在循环过程中，循环到那个DOM对象，回调函数中的this就是指向哪个DOM对象
*/
/*function fan() {
$('input:checkbox').each(function(){
//alert('当');
//this -> 走到谁哪里，this就是谁 此时的this是DOM对象
//console.log(this);
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}*/
//更简化的方式，直接对自己取反
function fan() {
$('input:checkbox').each(function(){
this.checked = !this.checked;
});
}
</script>
第 第20章、 章、jQuery处理事件的特点 处理事件的特点
1:和原生事件的语法区别
原生绑定: xxDOMNode.onclick=function(){} , xx.onmousever = function();
原生触发: xxDOMNode.click(), xx.submit(); xx.focus();
jQuery绑定: $(selector).click(function(){});
jQuery触发: $(selector).click();
2:和xx.onclick等的绑定次数的区别
xx.onclick = function(){},是给onclick属性赋值,赋多个值,前面的被覆盖,只有最后一个函数被调用
$(selector).click(函数1);
$(selector).click(函数2);
$(selector).click(函数3); --> 会按绑定的顺序,逐个执行
....
<body>
<h1>jquery事件与原生事件的比较</h1>
<p><input type="text" name="form111" value="email..."></p>
<p><input type="text" name="form222" value="email..."></p>
<p><input type="button" name="" value="test1"></p> <p><input type="button" name="" value="test2"></p>
</body>
<script>
// 原生JS 绑定事件与触发事件的区别
var inps = document.getElementsByTagName('input');
//1.鼠标过来,用的是onmouseover
inps[0].onmouseover = function () { //原生绑定
this.value = ''; //2.内容设置为空
this.focus(); // 原生触发 //3.设置焦点
}
// jQuery 绑定事件与触发事件
$('input[name=form222]').mouseover(function(){
$(this).val(); // jq封装val('')，传参则设置对象的value,不传参则获取对象的value
$(this).focus();
});
// 绑定次数上的区别
var inps = document.getElementsByTagName('input');
//原生绑定
inps[2].onclick = function() {
alert('你');
}
inps[2].onclick = function() {
alert('是');
}
inps[2].onclick = function() {
alert('谁');
}
//jq绑定
$(inps[3]).click(function(){
alert('你');
});
$(inps[3]).click(function(){
alert('是');
});
$(inps[3]).click(function(){
alert('谁');
});
</script>
第 第21章、独特的 章、独特的ready事件 事件
什么是 什么是ready事件 事件:回忆我们之前学的 回忆我们之前学的load事件 事件,是等所有的资源都加载完毕以后触发的函数 是等所有的资源都加载完毕以后触发的函数,jq也为此封装的 也为此封装的ready事件 事件,并且在此基础上做了改 并且在此基础上做了改
进和加强 进和加强.ready事件跟 事件跟onload解析的地点不同 解析的地点不同,load事件要等所有的页面资源都加载完毕以后触发 事件要等所有的页面资源都加载完毕以后触发load事件 事件,而 而ready事件是在解析 事件是在解析DOM模型的 模型的
时候就可以触发 时候就可以触发ready,只要检测到 只要检测到DOM树加载完毕后就是加载完毕了 树加载完毕后就是加载完毕了,同样 同样,它也可以检测你到底加载到哪一步了 它也可以检测你到底加载到哪一步了,从而实现 从而实现
以下是DOM文档加载过程:
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load
x.php
header('Content-type:image/png');
sleep(3);//等待3秒钟后做...$img = imagecreatetruecolor(100,100);
imagepng($img);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="x.php" alt="">
</body>
<script>
window.onload = function(){
alert('23');
}
// $(document).ready(function(){alert('DOM已加载完毕,不等图片')});
//直接将函数放到$(),默认是dom加载完毕
//简化写法
$(function(){
alert('DOM已加载完毕');
});
</script>
</html>
第 第22章、 章、jQuery特有的绑定函数 特有的绑定函数
bind(): 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数 --> 说白了就是为你帮你 说白了就是为你帮你,想在的元素上绑定一个事件 想在的元素上绑定一个事件
unbind(): 将以上绑定的事件移除 将以上绑定的事件移除
<body>
<input type="button" value="给div加点击事件" onclick="jia();"/>
<input type="button" value="给div取消点击事件" onclick="jie();"/>
<div style="200px;height:200px;background:gray;"></div>
</body>
<script>
function ding() {
alert('丁');
}
//添加绑定事件
function jia(){
$('div').bind('click',function(){alert('123')});
$('div').bind('click',ding);//为div绑定一个ding函数
}
//解除事件绑定
function jie(){
$('div').unbind('click',ding);
}
</script>
第 第23章、一次性绑定 章、一次性绑定 one()
<body>
....
<input type="button" value="有些话对你说">
....
</body>
<script><script>
//为所有input绑定事件
$('input').one('click' , function(){
alert('今晚操场见');//很多游戏网站就这么做的
});
</script>
第 第24章、事件委托 章、事件委托
事件委托:回忆js中的事件委托,逻辑:是将你想触发的事件委托给父元素解决.
<body>
<input type="button" value="添加li" />
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
</ul>
</body>
<script>
$('ul').on('click' , 'li' , function(){
//alert('duang');
alert($(this).html());
});
$('input').click(function() {
$('ul').append('<li>冬</li>');
});
</script>
off() 是on()的反向操作,类似bind与unbind的效果
第 第25章、事件对象 章、事件对象
<body>
<div>点击</div>
</body>
<script>
$('div').click(function(ev){
//console.log(ev);
alert(ev.type + ':' +ev.which);
});
</script>
第 第26章、动画 章、动画
2秒钟消失的 秒钟消失的div
<style>
div {
400px;
height: 400px;
background: blue;
}
</style>
<body>
<div></div>
</body>
<script>
$('div').click(function(){
//hide不同参数，效果不一样
$(this).hide(2000,function(){alert('走了')});//参数1:多长时间(毫秒),参数2:然后干什么事儿
});</script>
向上收起的广告图、图片淡入淡出 向上收起的广告图、图片淡入淡出
<body>
<div id="ad">
<img src="./sm.jpg" alt="" />
</div>
</body>
<script>
//slideUp（执行时间--毫秒）收起
//slideDown（执行时间--毫秒） 放下
//fadeIn （执行时间--毫秒）淡入
//fadeOut（执行时间--毫秒）淡出
//delay （毫秒）延时执行
$('#ad').delay(3000).slideUp(2000).delay(1000).slideDown(1000);
$('#ad').delay(3000).fadeOut(2000).delay(1000).fadeIn(1000);
</script>
第 第27章、 章、ajax之 之GET请求 请求
ajax验证用户名 验证用户名
想一下js中的ajax需要几步?
$un = $_GET['un'];
echo in_array($un,array('zhangsan','lisi','laoliu'))?1:0;
<body>
用户名: <input type="text" name="username" /><span id="reg"></span>
</body>
<script>
$('input:text').blur(function(){
var url = 'x.php?u=' + this.value;
$.get(url , function(res){//如果获取后台相应的值,jq写了一个封装,你只需要写一个回调函数,并且写一个参数,会自动的把结果返回给你写的回调函数的第
if(res == '1') {
$('#reg').html('<font color="red">已被占用</font>');
} else {
$('#reg').html('<font color="green">可以使用</font>');
}
});
});
</script>
第 第28章、 章、Ajax之 之POST
注册用户 注册用户
<body>
<h1>jquery 发送POST ajax查询</h1>
<form action="">
<p>用户名:<input type="text" name="u" /></p>
<p>密码:<input type="text" name="p" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<script>
$('form').submit(function(){
var data = {
'u' : $('input[name="u"]').val(),
'p' : $('input[name="p"]').val()
};
$.post('31.php' , data , function(res){
alert(res);
});
return false;
});
</script>
第 第29章、 章、json格式返回值 格式返回值
php
$news = array(
'小泽玛丽亚',
'藏木马一',
'有力妹子'
);
echo json_encode($news);
<body>
<h1>jquery处理ajax的json返回值</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
$('ul').click(function(){
//如果PHP里的数组是关联数组,则JSON处理时，msg的返回值是对象
//如果PHP里的数组是索引数组,则JSON处理时，msg的返回值是数组
//$.get('6.php',function(msg){console.log(msg)},'json');
$.get('6.php',function(msg){
//console.log(msg);
//console.log(JSON.parse(msg));
//面向过程的方式
//for(var i=0;i<msg.length;i++){
//$('li')[i].innerHTML = msg[i];
//}
//面向函数式的编程
var i=0;
$('li').each(function(){
this.innerHTML = msg[i++];
});
},'json');
});
</script>
第 第30章、 章、ajax事件监听函数 事件监听函数
<body>
<h1>$.ajax()</h1>
<form action="">
<input type="submit" value="提交" />
</form>
</body>
<script>
$('form').submit(function(){
var params = {
'type' : 'post', 'data' : 'u=玛丽亚&email=qq@qq',
'success':function(msg){
alert(msg);
}
};
$.ajax('6.php',params); //$.ajax是$.get、$.post的底层函数
/*
* $('input:submit').prop('disabled',true);
* 为什么不用这种方式？
* 页面大，用到ajax的地方很多，这个是单独监听，下面是全部监听，
* 只要是ajax被触发，用统一的方式去处理,方便高效;
* */
return false;
});
//监听document对象，一旦有ajax开始执行，则触发函数
$(document).ajaxStart(function(){
$('input:submit').prop('disabled',true);
});
</script>
注意 注意:
ajaxStart()这个函数,只能绑定$(document)结点上.(from jQuery1.8+)
第 第31章、特效只是 章、特效只是:DOM操作 操作+想像力 想像力
小小的图片切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#ad {
1024px;
height: 768px;
overflow: hidden;
position: relative; <!--相对定位,为了123 -->
}
ul { <!--ul样式 -->
position: absolute;
bottom: 0px;
right:0px;
}
li { <!--li样式 -->
float: left;
20px;
height: 20px;
border:1px solid blue;
list-style: none;
margin: 0 10px;
}
.active {
background: blue;
}
</style>
<body>
<div id="ad">
<img src="a.jpg" alt="">
<img src="b.jpg" alt="">
<img src="c.jpg" alt=""> <img src="c.jpg" alt="">
<ul>
<li class='active'>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script src="jquery.js"></script>
<script>
var i = 0;
setInterval(function(){
$('img:first').fadeOut(1000 , function(){
$('img:first').appendTo('#ad');
$('img:last').show();
//应该是2的带active
//1.先删除所有的class,再计算一下
$('li').removeClass();
//$($('li').get(++i%3)).addClass('active');
$('li').get(++i%3).className = 'active';
});
} , 2000);
</script>
</html>