1.什么是 jQuery
jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方 法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入， jQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码， 完成更多复杂而困难的功能，从而得到了开发者的青睐。
2.代码风格
在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起 始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元 素选择或执行功能函数的时候可以这么写：
$(function () {}); //执行一个匿名函数
$(‘#box’); //进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’); //执行功能函数
由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下 形式：
jQuery(function () {});
jQuery(‘#box’);
jQuery(‘#box’).css(‘color’, ‘red’);
jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//...” ， 多行使用“/* ... */” 。
3.jQuery的入门案例
引入Jquery库文件
你可以不用把库文件，下到本地，直接引用网络版的
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入Jquery库文件 -->
<!-- <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> -->
<!--你可以不用把库文件，下到本地，直接引用网络版的 -->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button type="button">一个按钮</button>
<script type="text/javascript">
$('button').click(function() {
alert("hello Jquery");
})
</script>
</body>
</html>4.jQuery的对象
美元符号，就是 jQuery 对象的缩写形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" id="btn">按钮</button>
<script type="text/javascript">
//$ 美元符号，就是 jQuery 对象的缩写形式
var btn=$('#btn');
btn.click(function(){
alert("点击了")
})
var btn2=jQuery('#btn');
alert($==jQuery);
</script>
</body>
</html>5.链式编程
执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就 是说，jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。
$('#box').css('color', 'red').css('font-size', '50px'); //连缀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
</div>
<script type="text/javascript">
/* var obj=$('#d1');
//返回的jquery对象
var obj2=obj.css('height','200px');
var obj3=obj2.css('width','200px');
obj3.css('background-color','red'); */
//上面的我们链式编程
$('#d1').css('height','200px').css('width','200px').css('background-color','yellow');
</script>
</body>
</html>6.加载模式
我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹，那么为什么必须 要包裹这段代码呢？原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所 有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。 在延迟等待加载，JavaScript提供了一个事件为load，方法如下：
window.onload = function () {}; //JavaScript等待加载
$(document).ready(function () {}); //jQuery等待加载$(document).ready(function(){
});
加载的优点 只需要等待网页中的DOM结构 加载完毕，就能执行包裹的代码
简写方案: $(function () {alert(“加载了”);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* window.onload=function(){
$('#btn').css('background','red');
} */
//Jquery也有自己的加载的事件 ready()
/* $(document).ready(function(){
$('#btn').css('background','red');
})
*/
//简写方式 只需要等待网页中的DOM结构加载完成执行
$(function(){
$('#btn').css('background','red');
})
</script>
</head>
<body>
<button type="button" id="btn">一个按钮</button>
</body>
</html>7.对象的互换
jQuery 对象虽然是 jQuery 库独有的对象，但它也是通过 JavaScript 进行封装而来的。 我 们可以直接输出来得到它的信息。
alert($); //jQuery 对象方法内部
alert($()); //jQuery 对象返回的对象，还是 jQuery
alert($('#box')); //包裹 ID 元素返回对象，还是 jQuery从上面三组代码我们发现：只要使用了包裹后，最终返回的都是 jQuery 对象。这样的 好处显而易见，就是可以连缀处理。但有时，我们也需要返回原生的 DOM 对象，比如：
alert(document.getElementById('box')); //[object HTMLDivElement]
var JqueryObj=$(原生DOM对象); 我们使用$() 包裹一下原生DOM对象，就会转换成Jquery对象了 jQuery 想要达到获取原生的 DOM 对象，可以这么处理：
alert($('#box').get(0)); //ID 元素的第一个原生 DOM
从上面 get(0)，这里的索引看出，jQuery 是可以进行批量处理 DOM 的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" id="btn">一个按钮</button>
<h1 id="myh1">奥德赛发送到发发</h1>
<h2 id="my2">碍事法师打发士大夫撒旦法萨芬</h2>
</body>
<script type="text/javascript">
//原生DOM对象
var btn=document.getElementById('btn');
//alert(btn);
//如果你用的是原生DOM对象，那你就调用原生JS的方法和属性，不要去调用jQuery提供的方法和属性，当然你也 调用不到
btn.style.backgroundColor="red";
//使用jQuery来获取 返回的是Jquery对象
// 如果你用的是Jquery对象，你也不要去调用原生JS的属性和方法。当然你也调用不到
var obj=$('#btn');
obj.css('','20px');
//alert(obj);
//console.log(obj);
//原生DOM对象 和 Jquery对象的互转
var myh=document.getElementById("myh1");
//把原生DOM对象，转换成Jquery 对象 方式 $(原生DOM对象)
$(myh).css('color','red');
var jqueryObj=$('#my2');
//把 Jquery 对象 转换成 原生DOM对象 使用jQuery提供的get()方法
var ysDom=jqueryObj.get(0);
ysDom.style.color="blue";
</script>
</html>8.jQuery选择元素的方式
常规选择器：
选择器 | CSS模式 | jQuery模式 | 描述 |
标签选择器 | div{} | $(‘div’) | 获取所有 div 元素的 DOM 对象 |
ID选择器 | #box{} | $(‘#box’) | 获取一个 ID 为 box 元素的 DOM 对象 |
类选择器(class) | .box{} | $(‘.box’) | 获取所有 class 为 box 的所有 DOM 对象 |
进阶选择器：
选择器 | CSS模式 | jQuery模式 | 描述 |
群组选择器 | span,em,.box {} | $('span,em,.box') | 获取多个选择器的 DOM 对象 |
后代选择器 | ul li a {} | $('ul li a') | 获取追溯到的多个 DOM 对象 |
通配选择器 | * {} | $('*') | 获取所有元素标签的 DOM 对象 |
高级选择器：
选择器 | CSS 模式 | jQuery 模式 | jQuery 等价方法 | 描述 |
后代选择器 | ul li a {} | $('ul li a') | find('p') | 获取追溯到的多个 DOM 对象 |
子选择器 | div > p {} | $('div >p') | children() | 只获取子类节点的多个 DOM 对象 |
next 选择器 | div + p {} | $('div + p') | next() | 只获取某节点后一个同级 DOM对象 |
nextAll 选择器 | div ~ p {} | $('div ~ p') | nextAll() | 获取某节点后面所有同级 DOM对象 |
属性选择器：
CSS 模式 | jQuery 模式 | 描述 |
a[title] | $('a[title]') | 获取具有这个属性的 DOM 对象 |
a[title=num1] | $('a[title=num1]') | 获取具有这个属性=这个属性值的 DOM对象 |
a[title^=num] | $('a[title^=num]') | 获取具有这个属性且开头属性值匹配的DOM 对象 |
a[title$=num] | $('a[title$=num]') | 获取具有这个属性且结尾属性值匹配的DOM 对象 |
a[title*=num] | $('a[title*=num]') | 获取具有这个属性且属性值含有一个指定字串的 DOM 对象 |
a[title!=num] | $('a[title!=num]') | 获取具有这个属性且不等于属性值的DOM 对象 |
过滤选择器：
过滤器名 | jQuery 语法 | jQuery对应的方法 | 说明 | 返回 |
:first | $('li:first') | first() | 选取第一个元素 | 单个元素 |
:last | $('li:last') | last() | 选取最后一个元素 | 单个元素 |
:eq(index) | $('li:eq(2)') | eq(2) | 选择索引(0 开始)等于 index 的元素 | 单个元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<h1 class="myh1">aaaaaaaaaaaaaaaaaaaaa</h1>
<script type="text/javascript">
//使用 css选择器语法
var obj=$('.myh1'); //选中了多个，返回的是jQuery对象，不是js的数组
console.log(obj);
console.log(obj.length);
//你要设置他们的样式，直接设置，不需要遍历，除非你单独设置那个，你遍历判断
obj.css('color','red');
$(obj[0]).css('background-color','yellow');
//可以使用一个get方法
obj.get(1).style.background="green";
//可以使用 eq(索引) 返回的还是jQuery对象
obj.eq(3).css('background','pink');
//如果你要遍历，你要用jQuery提供的遍历方法
obj.each(function(index,ele){ //ele 原生DOM对象
//alert(index+"==="+ele);
ele.style.backgroundColor="blue";
$(ele).css('font-size',"50px");
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<h1>
<span id="">
aaaaaaaaaaaaaaaaaaa
</span>
</h1>
<ul>
<li>asfsdf</li>
<li>asfsdf</li>
<li>asfsdf</li>
<li>asfsdf</li>
<li>asfsdf</li>
<li>asfsdf</li>
<h1>阿斯顿发顺丰</h1>
</ul>
<h2>asdfadsfdasfdsaf</h2>
<h3>阿是发是的发送到发送到</h3>
</div>
<script type="text/javascript">
// $('div h1 span')
//使用 find方法层层往里找的方法
var sp = $('div').find('h1').find('span');
sp.css('color', 'red');
//选择子元素的方法
var li=$('ul').children('li');
li.css('background','pink');
$('h2').next().css('background','green');
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
<h1>asdfasdfasdfs</h1>
</body>
<script type="text/javascript">
var obj=$('h1');
obj.first().css('color','pink');
obj.last().css('color','red');
//你用get方法，转换成原生DOM对象
obj.get(2).style.background="red";
//用eq方法，返回的还是jQuery对象
obj.eq(5).css('background','yellow');
</script>
</html>9.html()和text()方法
方法名 | 描述 |
html() | 获取元素中 HTML 内容 |
html(value) | 设置元素中 HTML 内容 |
text() | 获取元素中文本内容 |
text(value) | 设置原生中文本内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="myh1">这是一行标题</h1>
<div id="">
</div>
</body>
<script type="text/javascript">
// innerHTML innerText
//var text=$('#myh1').text();
//alert(text);
//$('#myh1').text("HEllO");
$('#myh1').text($('#myh1').text()+"HEllO");
$('div').html('<h1>这是一行标题22222</h1>')
</script>
</html>10.操作属性的方法
方法名 | 描述 |
attr(key) | 获取某个元素 key 属性的属性值 |
attr(key, value) | 设置某个元素 key 属性的属性值 |
attr({key1:value2, key2:value2...}) | 设置某个元素多个 key 属性的属性值 |
attr(key, function (index, value) {}) | 设置某个元素 key 通过 fn 来设置 |
removerAttr(属性名称) 根据属性名称移除某个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>阿斯顿发送到发送到</h1>
</body>
<script type="text/javascript">
var obj=document.getElementsByTagName("h1")[0];
// obj.setAttribute("align","center");
// obj.removeAttribute("align");
// $(obj).attr("align","center");
// $(obj).removeAttr("align");
var attrObj={
'align':'center',
'id':'myh1',
'class':'myclass'
}
$(obj).attr(attrObj);
</script>
</html>11.CSS样式的操作
方法名 | 描述 |
css(name) | 获取某个元素行内的 CSS 样式 |
css([name1, name2, name3]) | 获取某个元素行内多个 CSS 样式 注意返回的是JSON对象 键是属性名值是属性值 |
css(name, value) | 设置某个元素行内的 CSS 样式 |
css(name, function (index, value) ) | 设置某个元素行内的 CSS 样式 |
css({name1 : value1, name2 : value2}) | 设置某个元素行内多个 CSS 样式 |
addClass(class) | 给某个元素添加一个 CSS 类 |
addClass(‘class1 class2 class3...’) | 给某个元素添加多个 CSS 类 |
removeClass(class) | 删除某个元素的一个 CSS 类 |
removeClass(‘class1 class2 class3...’) | 删除某个元素的多个 CSS 类 |
toggleClass(class) | 来回切换默认样式和指定样式 |
toggleClass(class1 class2 class3...) | 同上 |
toggleClass(class, switch) | 来回切换样式的时候设置切换频率 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a {
font-size: 50px;
color: blue;
}
.b {
font-size: 50px;
color: red;
background: yellow;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
<h1 class="a">asdfasdfasdfasdf</h1>
<button type="button">切换</button>
</body>
<script type="text/javascript">
// $('div').css('width','100px').css('height','100px').css('background','red');
var cssObj = {
'width': '200px',
'height': '200px',
'background': 'red'
}
$('div').css(cssObj);
//添加 class属性
//$('h1').addClass('a');
$('button').click(function() {
//切换class
$('h1').toggleClass('b');
})
var w = $('div').width();
var h = $('div').height();
alert(w)
alert(h)
</script>
</html>12.内部插入节点操作
DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M” 。页面中的元 素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、 插入、替换、克隆、删除等等一些列的元素操作。
方法名 | 描述 |
append(content) | 向指定元素内部后面插入节点 content |
append(function (index, html) {}) | 使用匿名函数向指定元素内部后面插入节点 |
appendTo(content) | 将指定元素移入到指定元素 content 内部后面 |
prepend(content) | 向指定元素 content 内部的前面插入节点 |
prepend(function (index, html) {}) | 使用匿名函数向指定元素内部的前面插入节点 |
prependTo(content) | 将指定元素移入到指定元素 content 内部前面 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>111111111111111111111111</h1>
<div id="d1">
<h2>22222222222222222</h2>
</div>
<h5>44444444444444444444444444444444444</h5>
<div id="d2">
<h3>333333333333333333333333333333333</h3>
</div>
</body>
<script type="text/javascript">
// var btn=document.createElement("button");
// btn.innerText="一个按钮";
// document.body.appendChild(btn);
//创建一个标签
var btn=$('<button>一个按钮</button>');
//添加子元素
$('body').append(btn);
//把h1 移动到 div里面的原来子元素的后面
$('h1').appendTo('#d1');
var btn2=$('<button>一个按钮222222</button>');
$('#d2').prepend(btn2);
//把h5移动到div里面在原来子元素的前面
$('h5').prependTo('#d2');
</script>
</html>13.外部插入节点操作
方法名 | 描述 |
after(content) | 向指定元素的外部后面插入节点 content |
after(function (index, html) {}) | 使用匿名函数向指定元素的外部后面插入节点 |
before(content) | 向指定元素的外部前面插入节点 content |
before(function (index, html) {}) | 使用匿名函数向指定元素的外部前面插入节点 |
insertAfter(content) | 将指定节点移到指定元素 content 外部的后面 |
insertBefore(content) | 将指定节点移到指定元素 content 外部的前面 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>11111111111111111111111111111</h1>
<div id="d1">
阿帆发送到发送到发算法算法
</div>
<h4>4444444444444444444444444444444444444444444</h4>
</body>
<script type="text/javascript">
//在h1的下面添加一个h2
$('h1').after('<h2>22222222222222222222222</h2>')
//在h1的上面添加换一个h3
$('h1').before('<h3>3333333333333333333333333333333</h3>')
//把h4移动到 div的前面
$('h4').insertBefore('#d1');
//insertAfter(content)
//把h4移动到 div的下面
$('h4').insertAfter('#d1');
</script>
</html>14.包裹节点
方法名 | 描述 |
wrap(html) | 向指定元素包裹一层 html 代码 |
wrap(element) | 向指定元素包裹一层 DOM 对象节点 |
wrap(function (index) {}) | 使用匿名函数向指定元素包裹一层自定义内容 |
unwrap() | 移除一层指定元素包裹的内容 |
wrapAll(html) | 用 html 将所有元素包裹到一起 |
wrapAll(element) | 用 DOM 对象将所有元素包裹在一起 |
wrapInner(html) | 向指定元素的子内容包裹一层 html |
wrapInner(element) | 向指定元素的子内容包裹一层 DOM 对象节点 |
wrapInner(function (index) {}) | 用匿名函数向指定元素的子内容包裹一层 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>11111</h1>
<h1>11111</h1>
<h1>11111</h1>
<h1>11111</h1>
<h1>11111</h1>
<h2>2222222222222</h2>
<h2>2222222222222</h2>
<h2>2222222222222</h2>
<h2>2222222222222</h2>
<h2>2222222222222</h2>
</body>
<script type="text/javascript">
//给每一个h1外面套一个div
$('h1').wrap('<div></div>');
//给所有的h2看做一个整体，外面套一个div
$('h2').wrapAll('<div></div>');
//去除包裹
//$('h2').unwrap();
</script>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
</div>
<script type="text/javascript">
// 给div里面所有的h1子元素整体外面包裹一个div
$('#d1').wrapInner('<div></div>');
</script>
</body>
</html>15.删除节点
删除子元素,可以认为是清空子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="myh1">asfffffffffffffffffffffffffff</h1>
<div id="d2">
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
<h2>222222</h2>
</div>
</body>
<script type="text/javascript">
//删除节点
$('#myh1').remove();
//删除子元素,可以认为是清空子元素。
$('#d2').empty();
</script>
</html>16.事件的绑定
jQuery 通过.bind()方法来为元素绑定这些事件。
$('input').bind('click', function () {
//点击按钮后执行匿名函数 alert('点击！');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
<script type="text/javascript">
//bind(事件名，事件处理函数)
$('button').bind('click',function(){
//alert("hello");
//$('button').css('background','red');
//注意把this 转换成JQuery对象
$(this).css('background','red');
})
//解绑
//$('button').unbind('click');
</script>
</html>17.绑定多个事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
<script type="text/javascript">
//bind(事件名，事件处理函数)
/* $('button').bind('click',function(){
//注意把this 转换成JQuery对象
$(this).css('background','red');
})
$('button').bind('mouseover',function(){
$(this).css('background','yellow');
}) */
//连缀绑定多个事件
$('button').bind('click',function(){
//注意把this 转换成JQuery对象
$(this).css('background','red');
}).bind('mouseover',function(){
$(this).css('background','yellow');
}).bind('mouseout',function(){
$(this).css('background','pink');
})
//解绑某个事件
$('button').unbind('click');
//可以一次解绑所有事件，不传参即可
$('button').unbind();
</script>
</html>18.解绑多个相同的事件
//绑定了两个事件函数
$('input').bind('click', fn1);
$('input').bind('click', fn2);
$('input').unbind('click', fn1); //只删除 fn1 处理函数的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
<script type="text/javascript">
var a=function(){
//注意把this 转换成JQuery对象
alert("11111")
$(this).css('background','red');
};
var b=function(){
alert("22222")
$(this).css('background','yellow');
}
//连缀绑定多个事件
$('button').bind('click',a).bind('click',b)
//解绑某个事件
$('button').unbind('click',b); //第二个参数是事件处理函数
</script>
</html>19.事件的简写方式
复合事件：
方法名 | 描述 |
ready(fn) | 当 DOM 加载完毕触发事件 |
hover([fn1,]fn2) | 当鼠标移入触发第一个 fn1，移出触发 fn2 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
//常用的事件类型，都提供了对应的方法。
$('button').click(function() {
alert("abc");
})
/*
$('button').mouseover(function(){
$(this).css('background','red')
}).mouseout(function(){
$(this).css('background','blue')
})
*/
//移上移出，综合成一个方法
$('button').hover(function(){
//处理鼠标移上
$(this).css('background','red')
},function(){
//处理鼠标移出
$(this).css('background','blue')
})
})
</script>
</html>20.事件对象
事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象，event 对象有很多可用的属性和方法，
//通过处理函数传递事件对象
$(‘input’).bind(‘click’, function (e) { //接受事件对象参数
alert(e);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
<script type="text/javascript">
//event 事件对象，Jquery 对事件对象，没有做任何处理，我们还是事件对象的属性和方法
//事件对象，你直接在处理函数上接收就行。
$('button').click(function(e){
//alert(e.type);
$(e.target).css('background','red');
//e.preventDefault()
//e.stopPropagation()
})
</script>
</html>21.事件的自动触发
浏览器一打开自动触发我们绑定的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
<script type="text/javascript">
$('button').click(function(){
alert("点击了");
}).trigger('click');
//$(‘button’).trigger(‘click’); //浏览器一打开自动触发该点击事件
</script>
</html>22.推荐使用的绑定事件的方法
目前绑定事件和解绑的方法 在 jQuery1.7 以后推出了.on()和.off()方法彻底摒弃bind()和unbind()。 老方式 绑定事件 bind() 新方式 on()
老方式 解绑事件 unbind() 新方式 off()
以后推荐使用新方式来绑定和解绑事件One 表示事件执行一次
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按钮</button>
<ul>
<li>asdfasdfasdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdfasdf</li>
</ul>
</body>
<script type="text/javascript">
// bind() unbind() 方法 在3.0新版中已经废弃了
// 新版本推荐使用 on() off() 来绑定和解绑事件。
/* $('button').on('click',function(){
alert("hello")
}) */
//$('button').off('click');
//事件只执行一次
$('button').one('click',function(){
alert("hello")
})
</script>
</html>23.显示隐藏动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
<button type="button">显示</button>
<button type="button">隐藏</button>
<button type="button">切换</button>
</body>
<script type="text/javascript">
$('button').first().click(function(){
$('div').show(2000);
})
$('button').eq(1).click(function(){
$('div').hide(2000);
})
$('button').last().click(function(){
$('div').toggle(2000);
})
</script>
</html>24.上卷下拉动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
<button type="button">上卷</button>
<button type="button">下拉</button>
<button type="button">切换</button>
</body>
<script type="text/javascript">
$('button').first().click(function(){
$('div').slideUp(1000);
})
$('button').eq(1).click(function(){
$('div').slideDown(1000);
})
$('button').last().click(function(){
$('div').slideToggle(1000)
})
</script>
</html>25.淡入淡出动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
<button type="button">淡入</button>
<button type="button">淡出</button>
<button type="button">切换</button>
</body>
<script type="text/javascript">
$('button').first().click(function(){
$('div').fadeIn(1000);
})
$('button').eq(1).click(function(){
$('div').fadeOut(1000);
})
$('button').last().click(function(){
$('div').fadeToggle(1000);
})
</script>
</html>
