什么是JQ
Js的升级版,写的代码越来越少,做越多的事
学习JQ基础
HTML CSS Javascript 后台（了解）
JQ官网
http://jquery.com/
如何使用JQ
官网下载jquery.js文件
引入JQuery
<script src="jquery/jquery.js"></script>
选择元素
$()★★★★★
css() ★★★★★
JQ的$()选择符和css()
//document.getElementById('div1').style.color= 'red';
//document.getElementsByTagName('div')[0].style. color = 'red';
//document.getElementsByClassName('box')[0].style. color = 'red';
//JQ选择元素的风格跟CSS风格特别类似
$("#div1").css("color","red");
$("div").css("color","red");
$(".box").css("color","red");
省略原生的循环操作
JQ省略循环
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
var aLi = document.getElementsByTagName('li');
/*
for(){
aLi[i].style...
}
*/
//$('li').css('background', 'red'); //JQ省略原生当中的循环的操作
jQuery('li').css('background', 'red'); //$ == jQuery 一个大名一个小名
$==jQuery
事件click()
click() ★★★★★ 点击事件
内容
.html() ★★★★★ 等到内容
例子:选择颜色填充方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择颜色填充方块</title>
<style>
div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
</style>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>blue</span>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var color = '';
$('span').click(function(){
color = $(this).html()
});
$('div').click(function(){
$(this).css('background', color);
});
</script>
</body>
</html>
取值与赋值的关系
通过参数决定
取值与赋值的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取值与赋值的关系</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="div1" class="box">aaaaa</div>
<script>
// oDiv.innerHTML; //获取
// oDiv.innerHTML = 'bbbbb'; //赋值
//$('#div1').html(); //获取
//$('#div1').html('bbbbbb'); //赋值
$('#div1').css('color', 'red'); //赋值
alert($('#div1').css('color')); //获取div的color属性的属性值
</script>
</body>
</html>
属性attr()
attr() ★★★★★ 修改属性
值 val()
val() ★★★ 修改值
attr()和val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取值与赋值的关系</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="div1" class="box" miaov="miaov">aaaaa</div>
<input type="text" value="123">
<input type="text" value="456">
<script>
//操作属性attr()
$('#div1').attr('class', 'box2'); //用attr改class属性
$('#div1').attr('title', 'hello'); //添加原本没有的属性
alert($('#div1').attr('class')); //获取属性值
alert($('#div1').attr('miaov')); //也可以获取自定义的属性
//val()
//alert($('input').val()); //获取
//$('input').val('7777'); //针对多个input的value值进行设置
alert($('input').val()); // 针对集合进行获取操作，只获取第一个
</script>
</body>
</html>
强大的$()
加载
$(function(){}); ★★★★★
属性选择
[=] ★★★★★
[^=] 以……起始 ★★★★★
[$=] 以……结束 ★★★★★
[*=] 包含……的 ★★★★★
引号的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载和通配符选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('input[value]').css('background', 'red'); //input有value属性的才背景变红
//$('input[value=123]').css('background', 'red'); //value必须等于123的input才背景变红
//$('input[value^=123]').css('background', 'red'); //value以123为起始的input元素
//$('input[value$=444]').css('background', 'red'); //value以123为结束的input元素
//$('input[value*=3]').css('background', 'red'); //value中有3的input元素
$('div[class="box box2"]).css('color', 'red'); //这种情况下，box box2必须要用引号引起来
});
</script>
</head>
<body>
<div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
<input type="text" value="123_444">
<input type="text" value="123_555">
<input type="text" value="777_888">
</body>
</html>
用$(function(){});来加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载</title>
<script src="jquery-1.11.1.js"></script>
<script>
/*
window.onload = function(){
};
*/
$(function(){
});
</script>
</head>
<body>
...
</body>
</html>
JQ的链式操作
$().css().html().click();
针对设置的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链式操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
/*
var oDiv = $('#div1');
oDiv.html('bbbbb');
oDiv.css('color', 'red');
oDiv.click(function(){
alert(123);
});
*/
$('#div1').html('bbbbb').css('color', 'red').click(function(){alert(123)});
})
</script>
</head>
<body>
<div id="div1">aaaaaaa</div>
</body>
</html>
集合的长度
length ★★★★★
$()获取到的都是一个集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>集合的长度</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//alert($('div').length); //3 注意没有括号，获得集合的长度
alert($('#div1').length); //1 用$()获取到的都是元素的集合
})
</script>
</head>
<body>
<div id="div1" class="box box2" miaov="妙味">aaaaaaa</div>
<div></div>
<div></div>
</body>
</html>
JQ实战小技巧
利用length判断元素是否存在
例子：删除指定颜色的方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过length来纠错，发现页面中没有的元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var $span = $('#span1'); //这个span并不存在
console.log($span.length); //0 说明页面中没有$span这个元素
$span.html('bbbbb');
})
</script>
</head>
<body>
<div id="div1">aaaaaaa</div>
</body>
</html>
删除指定颜色方块的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除指定颜色的方块</title>
<style>
div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
</style>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>blue</span>
<br>
<input type="button" value="清空红色">
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var color = '';
$('span').click(function(){
color = $(this).html();
});
$('div').click(function(){
$(this).css('background', color);
});
$('input').click(function(){
$('div[style*=red]').css('background', '');
});
</script>
</body>
</html>
class的操作
addClass()★★★ 添加
removeClass()★★★ 删除
toggleClass()★★★ 切换
class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#div1').addClass('box2 box4'); //添加多个class，可以用空格隔开；重复的class不会添加进去（JQ自动去重了）
$('#div1').removeClass('box2 box4'); //找到的class会被删掉，没有找到的class被JQ自动忽略了
$('#div1').toggleClass('box3'); //如果没有该class，就自动加上；如果有了，就自动删去
})
</script>
</head>
<body>
<div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
</body>
</html>
显示隐藏
show()/hide()★★★★★
与CSS()的区别
例子：点击弹出菜单（1）
show()、hide()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var bBtn = true;
$('input').click(function(){
if(bBtn){
$('div').hide();
} else {
$('div').show();
}
bBtn = !bBtn;
});
})
</script>
</head>
<body>
<input type="button" value="点击">
<div>div</div>
</body>
</html>
点击弹出菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击弹出菜单</title>
<style>
ul { display: none; }
.box { display: block; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('input').click(function(){
$('ul').toggleClass('box');
});
})
</script>
</head>
<body>
<input type="button" value="点击">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
节点的选择
prev() next() ★★★★★ 前一个/下一个
prevAll() nextAll() ★★★ 前面所有/后面所有
siblings() ★★★ 除自己所有的
参数的筛选功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('span').next().css('background', 'red'); //p, h1
//$('span').prev().css('background', 'red'); //div, p
//$('p').nextAll().css('background', 'red'); //p标签下面的所有标签
//$('p').prevAll().css('background', 'red'); //p标签之前的所有标签
//$('p').siblings().css('background', 'red'); //找p标签所有的兄弟节点
//参数筛选功能
//$('p').siblings('h2').css('background', 'red'); //找p标签所有的兄弟节点中的h2节点
//$('span').next('h1').css('background', 'red');
//$('span').next('h2').css('background', 'red'); //两个span的下一个都没有h2的，所以就没有
});
</script>
</head>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
<h2>h2</h2>
<h3>h3</h3>
<em>em</em>
</body>
</html>
JQ实战小技巧
例子：点击弹出菜单（2）
点击弹出菜单（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击弹出菜单</title>
<style>
ul { display: none; }
.box { display: block; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('input[type=button]').click(function(){
//$(this).next().toggleClass('box');
$(this).nextAll('ul').toggleClass('box');
});
})
</script>
</head>
<body>
<input type="button" value="点击">
<input type="hidden">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
下标
eq() ★★★★★
eq()的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下标eq()的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('li').eq(1).css('background', 'red');
})
</script>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
本课练习
抽奖效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul{ width:328px;}
li {
width: 100px;
height: 100px;
border: 1px #000 solid;
float: left;
margin-left: 5px;
list-style: none;
}
.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
var index = 0;
$('input').click(function () {
//确定要走的步数（随机数 20-39）
//每个0.3秒，要走一步（将当前div的下一个div背景色变红，当前的div的背景清空）,总步数减一
//如果步数变为0，停止，看此时落到哪个div，就输出对应的文本，显示获得了几等奖
var step = parseInt(Math.random() * 20) + 20;
var timerID = setInterval(function () {
$('li').eq(index).addClass('active').siblings().removeClass('active');
index++;
step--;
if(index == 9)
{
index = 0;
}
if(step == 0)
{
clearInterval(timerID);
$('div').html('恭喜您中了' + $('.active').html())
}
},100)
})
})
</script>
</head>
<body>
<input type="button" value="抽奖">
<ul>
<li>1等奖</li>
<li>2等奖</li>
<li>3等奖</li>
<li>4等奖</li>
<li>5等奖</li>
<li>6等奖</li>
<li>7等奖</li>
<li>8等奖</li>
<li>9等奖</li>
</ul>
<div></div>
</body>
</html>
节点的选择
first() ★★★ 第一个
last() ★★★ 最后一个
slice() ★ 切片(从第几个开始到底几个结束)
children() ★★★ 找到所有的子节点,找不到孙子节点
find() ★★★★★ 找到所有的节点
children和find区别
节点的选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
// eq(0) == first();
$(function(){
// $('li').first().css('background', 'red'); //选择第一个
// $('li').last().css('background', 'red'); //选择最后一个
// $('li').slice(1, 3).css('background', 'red'); //得到的其实是从eq(1)开始到eq(2)结束
// $('li').slice(1).css('background', 'red'); //如果在slice里面只写起始位置不写结束位置，那么就是从起始位置开始，一直到最后一个元素
//$('ul').children().css('background', 'red'); //找到ul的所有子节点，但是孙子节点是找不到的
// $('ul').children('div').css('background', 'red'); //children()可以过滤筛选
// $('ul').find('p').css('background', 'red'); //可以用find找ul之下的所有节点中匹配的节点，find查找的范围比children更加广泛
})
</script>
</head>
<body>
<ul>
<li>
1111
<p>pppp</p>
</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<div>div</div>
</ul>
</body>
</html>
JQ实战小技巧
避免复杂的选择器操作，而采用find操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
// $('ul p').css('background', 'red');
$('ul').find('p').css('background', 'red'); //用下面这种find的方式性能会更高一些
})
</script>
</head>
<body>
<ul>
<li>
1111
<p>pppp</p>
</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<div>div</div>
</ul>
</body>
</html>
节点的选择
parent() ★★★ 找到父级
parents() ★ 找到所有的祖先元素
closest() ★★★★★ 找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素
精准的查找能力，实战开发之王
找的是最近的唯一一个元素
例子：点击查找指定节点
parent()和parents()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('#div2').parent().css('border', '1px solid red'); //parent()找父级
//parents() 获取当前元素的所有祖先节点
//$('#div2').parents().css('border', '1px solid red'); //div1, body, html都加上了边框
// $('#div2').parents('body').css('border', '1px solid red'); //parents()也有筛选的功能
})
</script>
</head>
<body>
<div id="div1">aaa
<div id="div2">bbb</div>
</div>
</body>
</html>
closest()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
//closest()：找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素
$(function(){
// $('#div2').closest().css('border', '1px solid red'); //这样写不对，因为closest函数没有参数
$('#div2').closest('.box').css('border', '1px solid red'); //只加在了div1上
//如果给div2添加上class为box，那么上面的语句找到的就是div2了
})
</script>
</head>
<body class="box">
<div id="div1" class="box">aaa
<div id="div2">bbb</div>
</div>
</body>
</html>
点击查找指定节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的选择</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//点击span，让其对应的li变红
$('span').click(function(){
$(this).closest('li').css('background', 'red');
});
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
</ul>
</body>
</html>
节点的操作
创建节点
$(<>) ★★★★★
比原生JS更强大的创建方式
添加节点
insertBefore() before() ★★★★★
insertAfter() after() ★★★★★
appendTo() append() ★★★★★
prependTo() prepend() ★★★★★
两种写法的区别
创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
// document.createElement('div');
// $('<div>'); //这样就创建了一个div标签
// var oDiv = document.createElemenet('div');
// oDiv.innerHTML = 'hello';
// oDiv.id = 'div1';
$("body").append($('<div id="div1">hello</div>')) //直接创建了一个具备多种设置的div标签
})
</script>
</head>
<body>
</body>
</html>
append() 把元素添加到指定的节点的里面的最后
prepend() 把元素添加到指定的节点的里面的最前面
before() 把元素添加到指定的节点的前面
after() 把元素添加到指定的节点的后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//append()：把元素添加到指定的节点的里面的最后
var $li = $('<li>hello</li>');
// $('ul').append($li);
//prepend()：把元素添加到指定的节点的里面的最前面
// $('ul').prepend($li);
//before()：把元素添加到指定的节点的前面
// $('ul').before($li);
//after()：把元素添加到指定的节点的后面
$('ul').after($li);
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
appendTo() 把元素添加到指定的节点的里面的最后
prependTo() 把元素添加到指定的节点的里面的最前面
insertBefore() 把元素添加到指定的节点的前面
insertAfter() 把元素添加到指定的节点的后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>')
//$('ul').append($li);
//$li.appendTo($('ul'));
$li.prependTo($('ul'));
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
两种写法的区别，会影响到链式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>')
//$('ul').append($li).css('background', 'red'); //整个ul背景变红
$li.appendTo($('ul')).css('background', 'red'); //仅指定li背景变红
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
JQ实战小技巧
添加html形式的操作与元素形式的操作
节点的操作
remove() ★★★★★ 删除
remove()操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//原生的删除元素的方式
// document.body.removeChild(oDiv);
//jQuery的方法
$('div').remove();
})
</script>
</head>
<body>
<div>div</div>
</body>
</html>
clone() ★★★ 克隆
默认的剪切操作
如何克隆事件(clone函数添加参数true)
例子：节点上移下移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
// $('div').appendTo($('span')); //默认是剪切操作
$('div').click(function(){
alert(123);
});
var $div = $('div').clone();
$div.appendTo($('span')); //克隆过来的div默认没有原来div的click事件。
//clone()默认是克隆元素结构，而不克隆行为事件。
//clone(true)，参数true就是可以复制之前的操作行为
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
例子：节点的上移下移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('input[value="上移"]').click(function(){
var $nowLi = $(this).closest('li');
var $prevLi = $nowLi.prev();
if($prevLi.length == 0){
alert('到头了');
} else {
$nowLi.insertBefore($prevLi);
}
});
$('input[value="下移"]').click(function(){
var $nowLi = $(this).closest('li');
var $nextLi = $nowLi.next();
if($nextLi.length == 0){
alert('到尾了');
} else {
$nowLi.insertAfter($nextLi);
}
});
})
</script>
</head>
<body>
<ul>
<li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>5.<input type="button" value="上移"><input type="button" value="下移"></li>
</ul>
</body>
</html>
JQ中的索引
index() ★★★★★ 索引值，代表的就是当前元素在所有兄弟节点中排第几。如果不添加参数，索引值与标签类型是无关的。
第一种用法，兄弟中的排行
第二种用法，筛选后的排行
善于利用索引做实际开发
例子：选项卡
兄弟中的排行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div1').index());
//index()：索引值，代表的就是当前元素在所有兄弟节点中排第几。如果不添加参数，索引值与标签类型是无关的。
})
</script>
</head>
<body>
<div></div>
<p>p</p>
<div id="div1">div</div>
<div>div</div>
</body>
</html>
注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>索引</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#span1').index()); //弹出0
})
</script>
</head>
<body>
<div><span>span</span></div>
<div><span id="span1">span</span></div>
<div><span>span</span></div>
</body>
</html>
筛选后的排行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>索引</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#span1').index('span')); //2
//添加了参数span，现在的index就与div没有关系了，而是看#span1在所有span中的排行
//第二种写法也可以
alert($('span').index($('#span1')));
//代表在所有span获取之后进行排行，看#span1排行老几
})
</script>
</head>
<body>
<div>
<span>span</span>
</div>
<span>span</span>
<div>
<span id="span1">span</span>
</div>
<div>
<span>span</span>
</div>
</body>
</html>
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<style>
#div1 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("input").click(function () {
$(this).addClass("active").siblings("input").removeClass("active");
var index = $(this).index("input");
$("#div1").find("div").eq(index).show().siblings("div").hide()
})
})
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
JQ中的遍历
each() ★★★★★
回调函数的两个参数
this指向
用return false跳出each()循环;
回调函数的两个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<style>
#div1 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//each() => for
//$('li').html('hello'); //相同操作的，不用each就可以
/*
$('li').each(function(i, elem){
alert(i);
});
//each中的第一个形参i就是for循环中的i
*/
/*
$('li').each(function(i, elem){
//elem.style.background = 'red';
$(elem).css('background', 'red');
});
//each中的第二个参数elem就是每个元素
//elem返回的是原生的元素，要转成jQuery对象要用$()括起来
*/
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
each的回调函数中this的指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<style>
#div1 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$('li').each(function (i, elem) {
//this == elem jQuery中的each循环中的this与elem是一回事；而且这个this也是原生的
$(this).html(i);
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
each()循环中用return false跳出循环
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
<style>
#div1 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$('li').each(function (i, elem) {
//原生跳出循环用break
//jQuery中跳出循环用return false;
$(this).html(i);
if (i == 2) {
return false;
}
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
本课练习
左右切换数据
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#ul1, #ul2 {
width: 200px;
height: 200px;
border: 1px #000 solid;
float: left;
}
li {
cursor: pointer;
}
.active {
background: red;
}
input {
float: left;
margin-top: 100px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#ul1").find('li').dblclick(function () {
$(this).appendTo($("#ul2"))
})
$("#ul2").find('li').dblclick(function () {
$(this).appendTo($("#ul1"))
})
})
</script>
</head>
<body>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<ul id="ul2">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#ul1, #ul2 {
width: 200px;
height: 200px;
border: 1px #000 solid;
float: left;
}
li{ cursor:pointer;}
.active{ background:red;}
input {
float: left;
margin-top: 100px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("li").click(function () {
$(this).toggleClass("active")
})
$("input").eq(0).click(function () {
$("#ul1").find(".active").appendTo($("#ul2")).removeClass("active")
})
$("input").eq(1).click(function () {
$("#ul2").find(".active").appendTo($("#ul1")).removeClass("active")
})
})
</script>
</head>
<body>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<input type="button" value="→">
<input type="button" value="←">
<ul id="ul2">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</body>
</html>
评分效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li {
float: left;
width: 50px;
height: 50px;
background: red;
margin: 5px;
list-style: none;
text-align: center;
line-height: 50px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
var isClick=false;
$("li").mouseover(function () {
if(!isClick){
$(this).css("background","blue")
$(this).prevAll().css("background","blue")
}
})
$("li").mouseout(function () {
if(!isClick) {
$(this).css("background", "red")
$(this).prevAll().css("background","red")
}
})
$("li").click(function () {
isClick=true
})
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
元素的尺寸
width() height() ★★★★★
innerWidth() innerHeight() ★★★★★
outerWidth() outerHeight() ★★★★★
参数的作用
与原生JS的区别
元素尺寸的获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的尺寸的获取</title>
<style>
#div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div1').width()); //100 不带单位
//width() => width
alert($('#div1').innerWidth()); //120
//innerWidth() => width + padding
alert($('#div1').outerWidth()); //122
//outerWidth() => width + padding + border
alert($('#div1').outerWidth(true)); //132
//outerWidth(true) => width + padding + border + margin
})
</script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>
元素尺寸的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的尺寸的设置</title>
<style>
#div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000; margin: 5px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('#div1').width(200); //设置了style中的width
//$('#div1').innerWidth(200); //padding左右是20；然后总共是200，那么style中的width就是180 => width: 200 - padding
//$('#div1').outerWidth(200); //padding左右是20；border左右是2；总共200，那么width就是178 => width: 200 - padding - border
$('#div1').outerWidth(200, true);
//width: 200 - padding - border - margin为168
})
</script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>
实战小技巧
可视区的尺寸
页面的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可视区的尺寸</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 100px; height: 100px; background: red; display: none; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($(window).height()); //可视区的高
alert($(document).height()); //页面的高
//如果没有给body清margin和padding，得到的是2016；如果清掉了，得到的就是2000
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">div</div>
</body>
</html>
滚动距离
scrollTop() ★★★★★
scrollLeft() ★
滚动距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可视区的尺寸</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 100px; height: 100px; background: red; display: none; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$(document).click(function(){
//alert($(document).scrollTop()); //获取滚动距离
//当滚动条滚到最底部的时候 $(document).scrollTop() == $(document).height() - $(window).height()
$(document).scrollTop(300); //设置滚动距离
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">div</div>
</body>
</html>
元素距离
offset() ★★★★★
left top
position() ★★★
left top
不认margin值
offset()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>到达页面的距离：offset()</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin-left: 200px; position: relative; }
#div2 {width: 100px; height: 100px; margin-left: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//offset()的距离值都是相对于整个页面的
alert($('#div1').offset().left); //元素距离整个页面左边的距离是offset().left，top就是距离整个页面上边的距离。注意left和top后面都不加括号。
alert($('#div2').offset().left); //不论怎样嵌套，定位父级是谁，都是到达页面边缘的距离。这个与原生的offsetLeft和offsetTop不同。原生的相对于定位的祖先节点的距离。
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>到达页面的距离：offset()</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
#div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div2').position().left); //0
//position()就是到有定位的祖先节点的距离
//position()方法默认是不认margin值的。所以上面的代码弹出0
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>到达定位祖先元素的距离position()</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
#div2 {width: 100px; height: 100px; position: relative; left: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div2').position().left); //50
//position()就是到有定位的祖先节点的距离
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
实战小技巧
• 利用计算原理，得到相应值
• offsetParent() ★
• 例子：懒加载页面中的图片
计算出到有定位的祖先节点的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
#div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div2').offset().left - $('#div2').offsetParent().offset().left); //50
//通过计算的方法获得到达有定位的祖先元素的距离，不管是不是由margin产生的，因此规避了position()不认margin的问题
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
懒加载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
div {
margin-top: 300px;
width: 470px;
height: 150px;
border: 1px #000 solid;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
function chang() {
$("div").each(function (index,item) {
if($(window).height()+$(document).scrollTop()>=$(item).offset().top )
{
var url=$(item).find("img").attr("_src")
$(item).find("img").attr("src",url)
}
})
}
$(function () {
chang()
$(window).scroll(function () {
chang()
})
})
</script>
</head>
<body>
<div><img _src="http://127.0.0.1:8080/mysite/1.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/2.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/3.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/4.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/5.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/6.jpg" alt=""></div>
</body>
</html>
JQ的事件
on() ★★★★★
off() ★★★★★
• JQ中都是绑定的形式
• 支持多事件写法
• click()写法，也是采用off()取消
用on()的形式绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的事件</title>
<script src="jquery-1.11.1.js"></script>
<script>
//在JQ中的事件操作都是绑定的形式
$(function(){
//原生中有的事件都可以像下面这么用（去掉on）
//$('#div1').click(function(){alert(123);});
//$('#div1').mouseover(function(){alert(123);});
//$('#div1').mousedown(function(){alert(123);});
//$('#div1').scroll(function(){alert(123);})
//$('#div1').on('click', function(){alert(123);}) //这就相当于$('#div1').click(function(){alert(123);})
//$('#div1').on('click mouseover', function(){alert(123);}); //通过空格分隔多个事件名称，可以同时绑定
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
用off()取消事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的事件</title>
<script src="jquery-1.11.1.js"></script>
<script>
//无论是用on()还是用click()形式绑定的事件，都是用off()取消的
$(function(){
/*
$('#div1').on('click mouseover', function(){
alert(123);
$(this).off(); //删除所有的事件操作
})
*/
$('#div1').on('click mouseover', function(){
alert(123);
$(this).off('mouseover'); //取消指定的事件
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
Event对象 ★★★★★
pageX, pageY
• 与cient的区别
which
target
stopPropagation()
preventDefault()
return false
pageX和pageY；clientX和clientY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件对象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#div1').click(function(ev){
alert(ev.pageY); //鼠标的y坐标
//ev.pageX和ev.pageY始终是相对于整个页面的
alert(ev.clientY); //鼠标的y坐标
//ev.clientX和ev.clientY始终是相对于可视区的
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
which键盘键值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件对象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//ev.which是键盘的键值
$(function(){
$(document).keydown(function(ev){
alert(ev.which); //页面上按下按键，弹出键盘键值
//alert(ev.keyCode); //也可以弹出键盘键值
//alert(ev.ctrlKey); //可以检测是否ctrl键是按下的
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
ev.target事件源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件对象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//ev.target 当前目标元素，也就是事件源
$(function(){
$(document).click(function(ev){
//alert(this); //这个this总是指向document
alert(ev.target); //如果点击到a上，那么弹出的就是#div1这个元素
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
ev.stopPropagation() 阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件对象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//stopPropagation()：阻止冒泡
$(function(){
$(document).click(function(){
alert(123);
})
$('#div1').click(function(ev){
ev.stopPropagation(); //阻止了#div1的事件冒泡，那么点击#div1就不会再弹出123了
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
ev.preventDefault() 阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件对象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//ev.preventDefault()：阻止默认事件
$(function(){
$(document).contextmenu(function(ev){ //点击右键就不会弹出默认右键菜单了
ev.preventDefault();
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
return false 既阻止默认事件又阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件对象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//在事件函数中写return false代表：既阻止默认事件又阻止冒泡
$(function(){
$(document).contextmenu(function(ev){
//代码
return false;
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
JQ实战小技巧
• 例子：拖拽效果
用jQuery实现拖拽效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用JQ实现拖拽</title>
<meta charset="utf-8">
<style type="text/css">
body
{
background-repeat: no-repeat;
background-position: 50% 400px;
background-image: url(img/h.jpg);
}
img
{
position: absolute;
width: 150px;
height: 150px;
}
img:nth-child(1)
{
left:200px;
}
img:nth-child(2)
{
left:400px;
}
img:nth-child(3)
{
left:600px;
}
img:nth-child(4)
{
left:800px;
}
img:nth-child(5)
{
left:1000px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("body").css("background-image","url(img/h2.jpg)")
});
var X=0;
var Y=0;
$("img").mousedown(function (ev) {
var that=this;
X=ev.pageX-$(this).offset().left;
Y=ev.pageY-$(this).offset().top;
$(document).mousemove(function (ev) {
$(that).css("left",ev.pageX-X);
$(that).css("top",ev.pageY-Y);
})
$(document).mouseup(function () {
$(this).off("mousemove");
})
return false
})
})
</script>
</head>
<body>
<img src="img/1.png">
<img src="img/2.gif">
<img src="img/3.gif">
<img src="img/4.png">
<img src="img/5.png">
<button>变花瓶</button>
</body>
trigger() ★★★★★
• 比click()形式更强大
• 例子：主动触发的添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的命名空间</title>
<style>
</style>
<script src="jquery-1.11.1.js"></script>
<script>
// trigger(): 主动触发
$(function(){
$('#input1').click(function(){
var $li = $('<li>'+ $('#input2').val() +'</li>');
$('ul').append($li);
})
$('#input2').keydown(function(ev){
if(ev.which == 13){
$('#input1').trigger('click'); //点击回车的时候，就主动触发#input1的click事件
//$('#input1').click(); 这种写法就相当于上面的那种写法
}
})
})
</script>
</head>
<body style="height: 2000px;">
<input id="input1" type="button" value="添加"><input id="input2" type="text">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</body>
</html>
本课练习
• 登录弹窗效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#login {
width: 300px;
height: 300px;
background: white;
border: 1px #000 solid;
position: absolute;
display:none;
}
#close {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#input1').click(function () {
$('#login').css('left',$(window).width()/2 - $('#login').outerWidth()/2);
$('#login').css('top',$(window).height()/2 - $('#login').outerHeight()/2);
$('#login').css('display','block');
})
$('#close').click(function () {
$(this).parent().hide();
})
$(window).scroll(function () {
$('#login').css('top',$(window).height()/2 - $('#login').outerHeight()/2 + $(window).scrollTop());
})
});
</script>
</head>
<body style="height:2000px">
<input id="input1" type="button" value="登录" />
<div id="login">
<p>用户名:<input type="text" /></p>
<p>密码:<input type="text" /></p>
<div id="close">X</div>
</div>
</body>
</html>
$.ajax() ★★★★★
• 什么是ajax
• 提交数据、查询数据
• url
• success
• type
• data
• error
• dataType
• async
• 例子：ajax版本的选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style>
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#input1').on('input', function(){
//console.log(1);
$.ajax({
url: 'user.do', //不写data数据，通过在url中添加'user.php?user='+ $(this).val() 也可以以get的方式传输数据
type: 'post', //默认的type为get方式，还有一种提交方式是post方式
data: {user: $(this).val()}, //可以写成json，也可以写成拼接字符串 'user='+ $(this).val()
dataType: 'json', //这里可以设置返回数据转化成什么类型。这里写了类型，在success里面就不需要再解析。有json、html和xml
success: function(data){ //返回1的时候可以注册；返回0的时候不可以注册
//var dataJson = $.parseJSON(data); //如果没有写dataType的话，这里要把返回的data先解析成想要的形式
if(data == 1){
$('#div1').html('可以注册');
} else if(data == 0){
$('#div1').html('已经注册过了，不能注册');
}
},
error: function(err){ //请求不成功的时候走error这里
console.log(err); //404 500以上服务器错误
}
async: false//操作是否异步。默认情况下ajax都是异步操作。如果async为false，即为同步的。同步形势下，ajax执行完毕之后，ajax后面的console.log(123);才会执行
});
console.log(123);
})
});
</script>
</head>
<form action="reg.php">
<input type="text" name="user" id="input1">
<input type="submit" value="注册">
</form>
<div id="div1"></div>
<body>
</body>
</html>
用ajax实现选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#div1').find('input').click(function(){
var index = $(this).index();
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( index ).css('display','block');
loadData(index,function(data){
$('#div1').find('div').eq(index).html(data);
});
});
loadData(0,function(data){
$('#div1').find('div').eq(0).html(data);
});
function loadData(num,fn){
$.ajax({
url : 'data.do?num=' + num,
success : function(data){
fn(data);
}
});
}
});
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">正在加载...</div>
<div>正在加载...</div>
<div>正在加载...</div>
</div>
</body>
</html>
$.get() ★★★★★
• 参数的作用
$.post() ★★★★★
• 参数的作用
//第一个参数url，第二个是data，第三个是回调函数，第四个函数是datatype。基本上$.post()也是这种写法。如果获取失败了，可以调用error()这个方法。
$.get('user3.do', {name: "hello"}, function(data){
console.log(data);
}, 'json').error(function(err){
console.log(err);
});
ajax扩展
辅助
serialize() ★★★
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//serialize()是针对form表单的实例方法
var a = $('form').serialize(); //注意：一定是针对form中的name和value的形式
console.log(a); //a就处理为字符串："a=1&b=2&c=3"
$.ajax({
data: a //通过以上操作，在调用ajax的时候就可以直接调用这个a了
})
})
</script>
</head>
<body>
<form action="">
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
<input type="text" name="c" value="3">
</form>
</body>
</html>
网友评论