jQuery（一个JavaScript库）

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>

jQuery（一个JavaScript库）相关推荐

jQuery是一个JavaScript库极大的简化JavaScript编程
jQuery是一个JavaScript库极大的简化JavaScript编程 1.jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScr ...
jQuery 是一个 JavaScript 库。
JQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库可以通过一行简单的标记被添加到网页中. jQuery是一个JavaScrip ...
jQuery ：一个 JavaScript 库
1.jQuery 其中整个框架库只有一个对象叫做jquery,别名叫做$这个符号 jQuery 是一个 JavaScript 库 jQuery 极大地简化了 JavaScript 编程,基于java ...
优雅的创建一个JavaScript库
这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库. 在我们深入之前,我做了两点假设: 你知道简单的JavaScript或C语言. 你不 ...
三十五、jQuery（JavaScript 库）
文章目录 jQuery 概述 jQuery 的使用入口函数了解 jQuery 的 $ 符号 jQuery对象与DOM对象之间的转换(难点) jQuery选择器(重点) jQuery基本选择器层级 ...
十二步创建你的第一个JavaScript库
是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...
jQuery与javascript库
[jquery-javascript库] 为了简化javascript的开发,诞生了javascript程序库,他封装了很多预定的对象和实用函数.下面是几种流行的javascript程序库:proto ...
最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
路由器web网页管理界面goahead和Lighttpd、jQuery（JavaScript(js)众多框架中的比较老的一个）、超文本标记语言html
一.路由器web网页管理界面goahead 1.开源的轻量级WEB Server很多,比如GoAhead.Shttpd.Thttpd.Lighttpd.BOA.mathopd.minihttpd.ap ...
jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

jQuery（一个JavaScript库）

1.什么是 jQuery

2.代码风格

3.jQuery的入门案例

4.jQuery的对象

5.链式编程

6.加载模式

7.对象的互换

8.jQuery选择元素的方式

9.html()和text()方法

10.操作属性的方法

11.CSS样式的操作

12.内部插入节点操作

13.外部插入节点操作

14.包裹节点

15.删除节点

16.事件的绑定

17.绑定多个事件

18.解绑多个相同的事件

19.事件的简写方式

20.事件对象

21.事件的自动触发

22.推荐使用的绑定事件的方法

23.显示隐藏动画

24.上卷下拉动画

25.淡入淡出动画

jQuery（一个JavaScript库）相关推荐

最新文章

热门文章