jQuery
来源：互联网 发布：淘宝天猫运营外包 编辑：程序博客网 时间：2024/05/21 03:59
jQuery
jQuery Ajax 操作函数
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
$.ajax({ url:"url", type:"get", dataType:"json/jsonp", data:{ userID:"1" }, processData: false/true， // 告诉jQuer要不要去处理发送的数据 contentType: false ， // 告诉jQuery要不要去设置Content-Type请求头 Content-Type： success:function(response){ }, error:function() { } }); contentType: 默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送） $.get( "url", {userID:"123"}, function(response) { } ) $.post( "url", {userID:"123"}, function(response) { } ) $('#btn_regist').click(function () { if(checkTelephone()&&checkPassword()&&checkPasswordConfirm()){ $.ajax( { url:'http://127.0.0.1:8090/user/regist', //规定发送请求的 URL。默认是当前页面。 type:'post', //规定请求的类型（GET 或 POST）。 data:$('#regist_form').serialize(), //serialize()序列化，规定要发送到服务器的数据。 dataType:'text', //预期的服务器响应的数据类型。 success:function(state_code){ //当请求成功时运行的函数。 if(state_code==6){ sessionStorage.setItem('userId',$('#telephone').val()); location.href='./../index.html' }else if(state_code==7){ mo03() ; }else if(state_code==5){ mo04() ; }else { location.href='./404.html' } }, error:function (err) { //如果请求失败要运行的函数。 } } ) } })JSON 和 JSONP
如果在同一个域下，$.ajax()方法只要设置dataType 属性即可加载 JSON 文件。而在非同域下，可以使用 JSONP
如果想跨域操作文件的话，我们就必须使用 JSONP
$.getJSON()方法跨域获取 JSON$.getJSON('http://www.li.cc/test.php?callback=?', function (response) { console.log(response);});$.ajax()方法跨域获取 JSON$.ajax({ 3 url : 'http://www.li.cc/test.php?callback=?', 5 dataType : 'jsonp', //这儿设置为jsonp那么上面一行可以不要 "?callback=?" 了 ! 7 success : function (response, status, xhr) { 9 console.log(response);11 alert(response.a);13 }15 });html()和text() 的区别如下：
操作连缀书写
基本选择器
元素选择器
$(
"元素名")
id选择器
$("#id名")class选择器
$(".类名"）群组选择器
$("选择器1 , 选择器2 ,……,选择器n")对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效群组选择器，就是同时对几个选择器进行相同的操作*选择器
*选择器，也成为“全选选择器<script type="text/javascript"> $(function () { $("#list *").css("color","red"); //$("#list *")表示选择id为list的元素下面的所有元素。 }) </script><body> <h3>前端核心技术</h3> <div id="list"> <div>（1）HTML</div> <p>（2）CSS</p> <span>（3）JavaScript</span> </div></body>层次选择器
属性选择器
选择含有class属性的div元素。
$("div[class]")选择type属性值为checkbox的input元素（也就是选择所有复选框元素）：
$("input[type = 'checkbox']")选择type属性值不是checkbox的input元素：
$("input[type != 'checkbox']")选择class属性包含nav的div元素（因为class属性可以包含多个值）：
$("div[class *= 'nav']")选择name属性以group开始的input元素，例如：
$("input[name ^= 'group']")选择name属性以group结尾的input元素，例如：
$("input[name $= 'group']")选择具有id属性并且class属性是以nav开头的div元素，例如
$("div[id][class ^='lvye']") <script type="text/javascript"> $(function () { $("input[type='checkbox']").attr("checked", "checked"); }) </script>伪类选择器
<script type="text/javascript"> $(function () { $("li:not(#myLi)").css("color", "red"); }) </script><script type="text/javascript"> $(function () { $("li:first,li:last").css("color", "red"); }) </script><script type="text/javascript"> $(function () { $(":header").css("color", "red"); }) </script><script type="text/javascript"> $(function () { $("ul li:first").css("background-color", "red"); $("ul li:nth-child(2)").css("background-color", "orange"); $("ul li:nth-child(3)").css("background-color", "yellow"); $("ul li:nth-child(4)").css("background-color", "green"); $("ul li:last").css("background-color", "blue"); }) </script></head><body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body>1、:first-child和:first-of-type
<div> <h1></h1> <p></p> <span></span> <span></span></div>（1）:first-child
h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。
p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。
span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；
（2）:first-of-type
h1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素。
p: first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素。
span: first-of-type:选择的是id=”first”的span元素，因为在div元素中有2个span元素，这里我们选择的是两个span中的第1个。
总结：
①“:first-child”是选择父元素下的第1个子元素（不区分元素类型），而“:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）；
②“:last-child”和“:last-of-type”、“nth-child（n）”和“:nth-of-type（n）”的使用原理跟“:first-child”和“:first-of-type”是一样的，大家试着想一下另外几个用在这个例子上的区别。
2、:only-child和:only-of-child
在“:only-child选择器”中，父元素是只有一个子元素的。但是在“:only-of-type选择器”中，却可以有多个子元素。“:only-of-type”相对“:only-child”来说，只是多了一个type（元素类型）的限制
<script type="text/javascript"> $(function () { $("div p:only-child").css("background-color", "red"); }) </script></head><body> <div> <p>这是一个段落</p> //只选中这一个 </div> <div> <p>这是一个段落</p> <span>这是一个span</span> </div></body>可见性伪类选择器，就是根据元素的“可见”与“不可见”这2种状态来选取元素。
在jQuery中，可见性伪类选择器只有2种：
“:hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。
内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
$("p:contains(jQuery)")表示选择包含“jQuery”这一个文本内容的p元素。$("div:has(span)")表示选择内部含有span元素的div元素。$("td:empty")表示选择内部没有文本内容页没有子元素的td元素。jQuery表单伪类选择器
属性操作
获取元素属性
$().attr("属性名")$("img").attr("src")设置元素属性
$().attr("属性","属性值")删除元素属性
$("a").removeAttr("title")内容操作
在jQuery中，关于元素内容操作共有2组方法：
- （1）html()和text();
- （2）val();
其中html()和text()用于操作普通标签，而val()用于操作表单标签。
$().html() //获取HTML内容$().html("HTML内容"); //设置HTML内容$().text() //获取文本内容$().text("文本内容") //设置文本内容$().val() //获取表单元素的值$().val("表单元素的值") //设置表单元素的值CSS属性操作
在jQuery中，关于元素的样式操作方法共有2种：
（1）CSS属性操作；
（2）CSS类名操作；
获取CSS属性值
$().css("属性")$(function () { $("#btn").click(function () { var str = $("p").css("color"); alert("p元素的color属性值是：" + str); }) })设置CSS属性值
设置某个元素的CSS属性值，分为2种情况：（1）设置单个CSS属性；（2）设置多个CSS属性
$().css("属性","属性值") $(function () { $("#btn").click(function () { $("ul li:nth-child(odd)").css("color","red"); }) })$().css({"属性1":"属性值1","属性2":"属性值2",……})CSS类名操作
添加类名
在jQuery中，我们可以使用addClass()方法为元素添加类名
$().addClass("类名")$(function () { $("#btn").click(function () { $("ul li:nth-child(odd)").addClass("myLi"); }) })在jQuery中，我们可以使用removeClass()为元素删除类名
$().removeClass("类名") $(function () { $("#add").click(function () { $("ul li:nth-child(odd)").addClass("myLi"); }); $("#remove").click(function () { $("ul li:nth-child(odd)").removeClass("myLi"); }); })在jQuery中，我们可以使用toggleClass()方法为元素切换类名
$().toggleClass("类名")<script type="text/javascript"> $(function () { $("#add").click(function () { $("ul li:nth-child(odd)").toggleClass("myLi"); }); }) </script>这里使用toggleClass()方法来切换类名，使得元素可以在“默认样式”以及“class样式”之间来回切换。我们点击一次“切换”按钮，元素就会切换到类名为myLi的样式，然后再点击一次“切换”按钮，元素又会切换到默认样式。
元素的宽度高度width()和height()
在jQuery中，如果我们想要“获取”或者“设置”元素的宽度，共有3种方法：
- （1）width();
- （2）innerWidth();
- （3）outerWidth();
$().width() //获取元素的宽度$().width(n) //设置元素的宽度，n是一个整数，表示npx$().width(); //返回数字，例如100$().css("width"); //返回字符串，例如“100px”元素的位置offset()和position()
在jQuery中，如果我们想要获取元素的位置，有2种方法：
- （1）offset()；
- （2）position()；
在jQuery中，我们可以使用offset()方法用于“获取”或“设置”元素相对于“当前文档”（也就是浏览器窗口）的偏移距离。
$().offset().top;$().offset().left$().offset()返回的是一个坐标对象，该对象有2个属性：top和left。
$().offset().top表示获取元素相对于当前文档“顶部”的距离。
$().offset().left表示获取元素相对于当前文档“左部”的距离。
这两种方法返回的都是一个数字（不带单位）。
$("#btn").click(function () { //获取box2距离顶部的距离 var top = $("#box2").offset().top; //获取box2距离左部的距离 var left = $("#box2").offset().left; })在jQuery中，我们可以使用position()方法来“获取”或“设置”当前元素相对于“其被定位的祖辈元素”的偏移距离。
$().position().top$().position().left$().position()返回的是一个坐标对象，该对象有2个属性：top和left。$().position().top表示元素相对于被定位的祖辈元素的顶部的垂直距离。$().position().left表示元素相对于被定位的祖辈元素的左部的水平距离。这两种方法返回的都是一个数字（不带单位）。滚动条的距离scrollTop()和scrollLeft()
在jQuery中，我们可以使用scrollTop()来获取或设置元素相对于垂直滚动条顶部的距离，可以使用scrollLeft()来获取或设置元素相对于水平滚动条左部的距离。
$().scrollTop() //获取滚动距离$().scrollTop(value) //设置滚动距离scrollLeft()方法的用法跟scrollTop()方法一样。
scrollTop()和scrollLeft()获取的值是一个数字（不带单位），这个跟height()、width()是一样的。
$(function () { //获取box2距离顶部的距离 var top = $("#box2").offset().top; //根据滚动距离判断定位 $(window).scroll(function () { //当滚动条距离大于box2距离顶部的距离时，设置固定定位 if ($(this).scrollTop() > top) { $("#box2").css({ "position": "fixed", "top": "0" }); } //当滚动条距离小于于box2距离顶部的距离时，设置相对定位 else { $("#box2").css({ "position": "relative" }); } }); })DOM操作
创建节点
在jQuery中，对于创建节点，我们都是先用“$()方法”来创建一个节点，然后再通过append()、before()等方法把新创建的节点插入现有的节点中。
var $li = "<li></li>"; $("ul").append($li);我们使用一个变量
//注意对于复杂节点本身的属性就有双引号，所以我们这里使用单引号括起来 var $li = '<li><a href="http://www.lvyestudy.com" target="_blank" title="欢迎来到绿叶学习网">绿叶学习网</a></li>'; $("ul").append($li);插入节点
在jQuery中，常见插入节点的方法共有4组：
- （1）append()和appendTo()；
- （2）prepend()和prependTo()；
- （3）before()和insertBefore()；
- （4）after()和insertAfter()；
$(A).append(B)$(A).append(B)表示在A内部的“末尾”插入B。
appendTo()跟append()类似，作用都是在所选元素内部的“末尾”插入内容。但是两者的“使用方式”却是颠倒操作。$(A).appendTo(B)$(A).appendTo(B)表示将A插入B内部的“末尾”。
1、prepend()
prepend()表示向所选元素内部的“开始”插入节点。
$(A).prepend(B)$(A).prepend(B)表示在A内部的“开始”插入B。
prependTo()跟prepend()类似，作用都是在所选元素内部的“开始”插入内容。但是两者的“使用方式”却是颠倒操作。
$(A).prependTo(B)before()
before()表示在所选元素外部“之前”插入节点。
$(A).before(B)$(A).before(B)表示在A外部“之前”插入B。
insertBefore()跟before()类似，作用也是在某个元素外部“之前”插入内容。但是两者的“使用方式”却是颠倒操作。
$(A).insertBefore(B)$(A).insertBefore(B)表示将A插入B外部“之前”。
after()
after()表示在所选元素外部“之后”插入节点。
$(A).after(B)$(A).after(B)表示在A外部“之后”插入B。
insertAfter()跟after()作用类似，作用都是在某个元素外部“之前”插入内容。但是两者的“使用方式”却是颠倒操作。
删除节点
在jQuery中，对于删除节点，我们有3种方法：
- （1）remove()；
- （2）detach()；
- （3）empty()；
在jQuery中，我们可以使用remove()方法将某个节点删除。
$("ul li:eq(3)").remove()表示选择ul元素下的第4个li元素。对于eq()选择器，下标是从0开始的在jQuery中，除了remove()方法之外，我们还可以使用detach()方法来将某个元素删除。
$(A).detach()
detach()方法和remove()方法作用相似，但是两者却有着本质上的区别。
remove()方法是“彻底”地删除元素。也就是说使用remove()方法，不仅元素会被删除，所绑定的事件都会被删除。
detach()方法是“半彻底”地删除元素，也就是说使用detach()方法，只有元素被删除，所绑定的事件并不会删除。
empty()
remove()和detach()都是将某个元素删除。如果我们想要“清空”某个节点，则可以用到empty()方法。
在jQuery中，我们可以使用empty()方法清空元素内部的所有节点。
复制节点
在jQuery中，如果我们想要复制某个节点，可以使用clone()方法。
$(A).clone()
其中clone()方法有一个布尔参数，默认值为false。
$(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。
$(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。
替换节点
- （1）replaceWith()；
- （2）replaceAll()；
replaceWith()方法可以将所选元素被替换成其他元素。
$(A).replaceWith(B)
$(A).replaceWith(B)表示用B来替换A。
replaceAll()跟replaceWith()相似，作用都是用来替换节点的。不过这两者的“使用方式”是颠倒操作。
$(A).replaceAll(B)
$(A).replaceAll(B)表示用A来替换B。
包裹节点
在jQuery中，如果我们想要将某个节点用其他标签包裹起来，共有3种方法：
- （1）wrap()；
- （2）wrapAll()；
- （3）wrapInner()；
wrap()
wrap()方法表示将所选元素使用某个标签包裹起来。
$(A).wrap(B)
$(A).wrap(B)表示将A元素使用B元素包裹起来。
wrapAll()跟wrap()这两种方法的作用是不等价的。wrap()方法是将所有元素进行单独的包裹，但是wrapAll()会将所有匹配的元素用一个元素来包裹！。
$("p").wrapAll('<div style="background-color:orange;"></div>');wrapInner()方法
wrap()方法表示将所选元素使用某个标签包裹起来，wrapInner()方法表示将所选元素“所有内部元素”使用某个标签包裹起来。
遍历节点
在DOM操作中，有时候我们需要对同一个标签的全部元素进行统一操作。在JavaScript中，我们往往都是先获取元素的长度，然后使用循环语句来访问每一个元素，代码相对复杂。而在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。
$().each(callback)参数callback是一个function函数。该函数可以接受一个形参index，此形参为遍历元素的序号（从0开始）。如果需要访问元素中的属性，可以借助形参index，然后配合this关键字来实现元素属性的获取和设置。
$().each(function(index){ ……}) $(function () { $("#btn").click(function () { $("li").each(function (index) { var txt = "这是第" + (index + 1) + "个li元素"; $(this).text(txt); //$(this),是把DOM转化为jQuery }); }); })在each()方法中，index是一个形参。小伙伴们就会问了，为什么这个function函数有形参，却没有对应实参呢？其实index可以说是一个系统形参，你只需要调用即可，不需要用相应的实参来一一对应，这个有点类似于JavaScript的事件对象event。况且在JavaScript中，形参个数和实参个数是可以不相等的。
$(function () { $("#btn").click(function () { //定义一个数组 var arr = new Array("HTML", "CSS", "JavaScript", "jQuery", "canvas"); //使用each()将数组元素内容一一赋值给对应的li元素 $("li").each(function (index) { var txt = arr[index]; $(this).text(txt); //$(this)表示当前对象，即li }); }); })window.onload与$(document).ready()
JavaScript的window.onload方法
window.onload方法：在页面所有DOM元素（包括图片等外部文件）加载完成之后才执行，此时我们才可以操作DOM。也就是说，除了元素加载完成（说白了就是HTML代码），元素所关联的文件（如img元素就关联了图片）也必须加载完成之后，才会执行window.onload方法。
window.onload = function () { var e = document.getElementById("btn"); e.onclick = function () { alert("JavaScript"); } }jQuery的$(document).ready()方法
$(document).ready()方法：在页面所有DOM元素（不包括图片等外部文件）加载完成就可以执行，此时我们就可以操作DOM。
$(document).ready()仅仅是DOM元素加载完成就可以执行，而window.onload除了DOM元素加载完成外还需要等待所有外部文件加载完成才可以执行。
ready()方法的4种写法
在jQuery中，对于ready()方法，共有4种写法：
$(document).ready(functin(){ //代码部分})jQuery(document).ready(function(){ //代码部分})jQuery(function(){ //代码部分})$(function(){ //代码部分})在JS代码中，如果存在多个window.onload，则只会执行最后一个window.onload。
但是在jQuery中，$(document).ready()却可以多次执行。这里再一次深刻地体现了jQuery近乎完美的兼容性。
鼠标事件
$(function () { $("#btn").click(function () { alert("表单提交成功！"); }); })键盘事件
在jQuery中，常用的键盘事件有3种：
- （1）keypress事件；
- （2）keydown事件；
- （3）keyup事件；
keypress事件
在jQuery中，keypress事件是在键盘上的某个键被按下到松开“整个过程”中触发的事件。
keydown事件
keydown跟keypress非常相似，也是在键盘的按键被按下时触发。但是这2个事件有一下2大区别：
- （1）keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；
- （2）按下“字符键”会同时触发keydown和keypress这2个事件，但是这2个事件有一定顺序：keydown>keypress；
keyup事件
在jQuery中，keyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件。
keyup在实际开发也常常用到，比如在用户注册登录中，判断密码强度、判断两次输入密码是否一致等地方就用到keyup事件。
表单事件
在jQuery中，常用的表单事件有4种：
- （1）focus()事件；
- （2）blur()事件；
- （3）change()事件；
- （4）select()事件；
focus()和blur()
在jQuery中，focus()和blur()这2个事件往往都是配合使用。例如。在用户在文本框输入信息时，将光标放在文本框中，文本框会获取焦点。当文本框失去光标时，文本框失去焦点。
onfocus表示获取焦点触发的事件，onblur表示失去焦点触发的事件。
具有获得焦点和失去焦点事件的元素有3个（一定要记住啊）：
- （1）单行文本框text；
- （2）多行文本框textarea；
- （3）下拉列表select；
change()
在jQuery中，当用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。此外，在下拉列表select中一个选项的状态改变后也会触发onchange事件。
具有获得onchange事件的元素有3个：
- （1）单行文本框text；
- （2）多行文本框textarea；
- （3）下拉列表select；
select()
在jQuery中，当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。select事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。
新手很容易把select和change这2个事件搞混，误以为下拉列表列表项的选中触发的事件是select。这一点大家要搞清楚：下拉列表列表项的选中触发的事件是change而不是select。
滚动事件
滚动事件，指的是当滚动条位置发生改变时触发的事件。
$().scroll(fn)
参数fn表示事件处理函数，也就是function(){}。
scroll()滚动事件常常和scrollTop()和scrollLeft()这两个方法结合使用。
$(function () { //获取box2距离顶部的距离 var top = $("#box2").offset().top; //根据滚动距离判断定位 $(window).scroll(function () { //当滚动条距离大于box2距离顶部的距离时，设置固定定位 if ($(this).scrollTop() > top) { $("#box2").css({ "position": "fixed", "top": "0" }); } //当滚动条距离小于于box2距离顶部的距离时，设置相对定位 else { $("#box2").css({ "position": "relative" }); } }); })$(function () { /*根据滚动距离判断按钮是否显示或隐藏*/ $(window).scroll(function () { if ($(this).scrollTop() > 300) { $("#back-to-top").css("display","inline-block"); } else { $("#back-to-top").css("display","none"); } }); /*实现点击滚动回顶部*/ $("#back-to-top").click(function () { $("html,body").scrollTop(0); }); })当我们拖动滚动一段距离（300px）之后，“回到顶部”按钮会出现，然后点击按钮之后，我们就实现了回到顶部效果，此时按钮也会消失。
这就是我们常见的“回顶部特效”
绑定事件
一、on()方法
在文档加载完成后，如果我们想要为元素绑定某个事件来完成某些操作，可以使用on()方法来实现。在jQuery中，我们可以使用on()方法为某些元素绑定一个事件或者多个事件。
$().on(type , fn)
$(function () { $("#btn").on("click", function () { alert("绿叶学习网jQuery入门教程！"); }) }) </script>为“未来创建的元素”绑定事件
在jQuery中，on()方法不仅可以为“已经存在的元素”添加绑定事件，还可以为“未来创建的元素”添加绑定事件。所谓的“未来创建的元素”指的是使用jQuery创建的元素。
$(function () { var $btn = $('<input id="btn" type="button" value="按钮"/>'); $($btn).appendTo("body"); $("#btn").on("click", function () { alert("绿叶学习网jQuery入门教程！"); }); })但是在jQuery中，如果我们想要绑定事件，仅仅使用on()方法就可以完美兼容各大浏览器，而不需要像JavaScript那样写上一大堆兼容代码。这里再次展示了jQuery完美的兼容性。
在jQuery中绑定事件不是还有bind()和live()
从jQuery1.7开始（我们现在用的是jQuery1.12.0），对于绑定事件，jQuery官方都建议使用on()方法来统一取代以前的bind()、live()和delegate()；对于解绑事件，jQuery官方也建议使用off()方法来统一取代以前的unbind()、die()和undelegate()
解绑事件
在jQuery中，既然存在绑定事件，那肯定也存在对应的解绑事件。“绑定”与“解绑”是相反的关系。在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。
$().off(type)
$(function () { //为btn添加click事件 $("#btn").click(function () { alert("绿叶学习网jQuery入门教程！"); }) //点击btn-off后，为btn解除click事件 $("#btn-off").click(function () { $("#btn").off("click"); }) })合成事件
鼠标移入和鼠标移出这2个事件往往都是同时使用的，因此我们必须分别对“鼠标移入”和“鼠标移出”这2个事件分别定义。但是在jQuery中，我们可以使用hover()方法一次性地定义这2个事件，这就是所谓的合成事件。
$().hover(fn1,fn2)
参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。
$(function () { $("h3").hover(function () { $("#content").css("display","block"); }, function () { $("#content").css("display", "none"); }); })一次事件one()
在jQuery中，我们可以使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
$().one(type , fn) $(function () { $("#btn").one("click", function () { alert("只能弹出一次！"); }); })jQuery动画
对于前端开发中的动画效果，我们优先使用CSS3动画，其次再考虑jQuery动画。
jQuery动画具有CSS3动画所不具备的以下几个特点：
（1）“控制”动画的执行；（2）实现更复杂的动画；
（3）在动画执行之后返回一个回调函数；
在实际开发过程中，对于动画效果，我们优先使用CSS3来实现，其次再考虑jQuery。如果一个动画效果实在没办法使用CSS3来实现，或者说这个动画效果需要传递一些参数，或者使用回调函数进行其他操作，这时我们再使用jQuery。
显示和隐藏
在jQuery中，如果我们想要实现元素的显示和隐藏，可以使用2组方法：
- （1）show()和hide()；
- （2）toggle()；
一、show()和hide()
在jQuery中，我们可以使用show()方法来显示元素，使用hide()方法来隐藏元素。
$().hide()$().show()hide()方法就是把所选元素的display属性设置为none。
show()方法就是把所选元素的display属性还原为隐藏之前的显示状态（block、inline或者inline-block等）。
$(function () { $("#btn_hide").click(function () { $("img").hide(); }); $("#btn_show").click(function () { $("img").show(); }); })动画的show()和hide()
在jQuery中，我们可以通过在show()和hide()方法中加入相应的参数来实现带有“动画效果”的显示和隐藏。
$().hide(speed,callback)$(),show(speed,callback)参数speed为必选参数，表示动画执行的速度，单位是毫秒；
参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。在这里，所谓的回调函数，说白了就是在动画执行完成立刻执行的一个函数。
$(function () { $("#btn_hide").click(function () { $("img").hide(500); }); $("#btn_show").click(function () { $("img").show(500); }); }) </script>toggle()方法
在jQuery中，我们还可以使用toggle()方法来“切换”元素的“显示状态”。也就是说，如果元素是显示状态，则变成隐藏状态；如果元素是隐藏状态，则变成显示状态。
使用toggle()来显示和隐藏元素，也有2种使用方式：（1）简单的toggle()；（2）动画的toggle()。
$().toggle() //简单的toggle()$().toggle(speed , callback); //动画的toggle()淡入和淡出
在jQuery中，如果我们想要实现元素的淡入淡出这种渐变效果，有3组方法：
- （1）fadeIn()和fadeOut()；
- （2）fadeToggle()；
- （3）fadeTo()；
淡入和淡出效果，本质上其实都是通过改变元素的“透明度”（opacity属性）来实现的。
一、fadeIn()和fadeOut()
在jQuery中，我们可以使用fadeIn()方法来实现元素的淡入效果，使用fadeOut()方法来实现元素的淡出效果。fadeIn()和fadeOut()这2个方法都是配合使用的。
$().fadeIn(speed , callback)$().fadeOut(speed , callback)speed为可选参数，表示动画执行的速度，单位为毫秒，默认为200毫秒。如果speed参数省略，则采用默认速度。
callback为可选参数，表示动画执行完成之后的回调函数。
- （1）show()和hide()，是通过改变height、width、opacity来实现动画的显示与隐藏；
- （2）fadeIn()和fadeOut()，只通过opacity来实现动画的显示与隐藏；
不过这2组方法在动画显示与隐藏完成之后，都会设置display:none或者display:block。
三、fadeTo()
在jQuery中，fadeIn()和fadeOut()这2种方法都是通过改变元素的透明度来实现淡入淡出的动画效果。其中在淡入效果中，透明度（opacity）从0.0变化到1.0；在淡出效果中，透明度（opacity）从1.0变化到0.0。
如果我们想要将元素透明度指定到某一个值，则可以使用fadeTo()方法。
$().fadeTo(speed , opacity , callback)speed为可选参数，表示动画执行的速度，单位为毫秒，默认为500毫秒。如果speed参数省略，则采用默认速度。
opacity为必选参数，表示元素指定的透明度，取值范围为0.0~1.0。
callback为可选参数，表示动画执行完成之后的回调函数。
滑上和滑下
在jQuery中，如果我们想要实现元素的滑动效果，也有2组方法：
- （1）slideUp()和slideDown()；
- （2）slideToggle()；
slideup()和slideDown()
在jQuery中，我们可以使用slideUp()实现元素的滑上效果，使用slideDown()方法来实现元素的滑下效果。
$().slideDown(speed , callback)$().slideUp(speed , callback)//设置一个变量flag用于标记元素状态，是“滑下”还是“滑上” var flag = 0; $(function () { $("h3").click(function () { if (flag == 0) { $("p").slideDown(); flag = 1; } else{ $("p").slideUp(); flag = 0; } }); })slideToggle()
在jQuery中，我们还有一种实现滑动效果的简单方法，那就是slideToggle()。我们可以使用slideToggle()方法来切换元素的“滑动状态”。也就是说，如果元素是滑下状态，则变成滑上状态；如果元素是滑上状态，则变成滑下状态。这个跟toggle()、fadeToggle()这两个方法是类似的。
slideToggle(speed , callback)
speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。
callback为可选参数，表示动画执行完成之后的回调函数。
$(function () { $("h3").click(function () { $("p").slideToggle(); }); })自定义动画
在jQuery中，对于自定义动画，我们可以使用animate()方法来实现。
jQuery动画其实就是通过将元素的某一个属性从“一个属性值”在指定时间内平滑地过渡到“另外一个属性值”来实现动画效果
$().animate(params,speed,callback)
params，必选参数，表示“属性:值”列表，也就是元素在动画中变化的属性列表
speed，可选参数，表示动画的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度；callback，可选参数，表示动画完成之后执行的函数（即回调函数）。
$(function () { $("#lvye").click(function () { $(this).animate({ "width": "100px","height":"100px"}, 1000); }) })jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性。
累积动画
在上面的代码中，我们设置了{“width”:”100px”}作为动画参数。如果我们在100px之前加上“+=”，这种形式则表示以元素本身的width为基点进行“累加”；如果我们在100px之前加上“-=”则表示以元素本身的width为基点进行“累减”。
$(function () { $("#btn-simple").click(function () { $("#simple").animate({ "width": "100px", "height": "100px" }, 1000); }) $("#btn-sum").click(function () { $("#sum").animate({ "width": "+=100px", "height": "+=100px" }, 1000); }) })回调函数
回调函数不仅适用于animate()方法，也适用于jQuery所有的动画效果方法。回调函数在jQuery中大量存在，在之前我们也有过接触。所谓的回调函数说白了，就是在某个方法执行完成之后的“附加操作”。
$(function () { $("#lvye").click(function () { $(this).animate({ "width": "100px", "height": "100px" }, 1000, function () { $(this).css("border", "5px solid red"); }); }) })队列动画
在jQuery中，队列动画指的是在元素中按照一定的顺序执行多个动画效果，即有多个animate()方法在元素中执行，然后根据这些animate()方法执行的先后顺序，形成了动画队列，然后按照这个动画队列的顺序来进行显示。这个跟我们在饭堂排队打饭是一样的道理……
$().animate().animte()…….animte()
队列动画，就是按照animate()方法调用的先后顺序来实现的，原理很简单。
$(function () { $("#lvye").click(function () { $(this).animate({"width":"100px"},1000).animate({"height":"100px"},1000); }) })动画的停止
在jQuery中，很多时候我们需要停止当前元素上正在执行的动画效果，可以使用stop()方法来实现
$().stop(clearQueue,gotoEnd)
参数clearQueue和参数gotoEnd都是可选参数，取值都为布尔值。两个参数默认值都为false。
参数clearQueue表示是否要清空“未执行”的“动画队列”。这里大家要看准了，清空的是整个“动画队列”，而不仅仅是某一个动画。
参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态。
默认情况下，没有参数值的stop()方法只会停止“当前正在执行”的动画。如果你使用animate()方法为当前元素设置了A、B、C这3个动画。如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止B和C的执行。如果我们想停止所有的动画，可以使用设置参数clearQueue为true来实现。
$(function () { $("#btn-start").click(function () { $("#lvye").animate({ "width": "200px" }, 3000).animate({ "background-color": "red" }, 3000).animate({ "height": "200px" }, 3000).animate({ "background-color": "blue" }, 3000); }); $("#btn-stop").click(function () { $("#lvye").stop(); }) })动画的延迟
$().delay(speed)
参数speed，表示动画的速度，单位为毫秒。
$(function () { $("#lvye").click(function () { $(this).animate({ "width": "200px" }, 1000).delay(1000).animate({ "height": "200px" }, 1000); }); })这里使用2个animate()方法定义了一个队列动画，这个队列动画共有2段动画。然后在第1段动画之后使用了delay()方法来延迟2秒（2000毫秒），然后再执行第2段动画。
- （1）显示和隐藏；
- （2）淡入和淡出；
- （3）滑上和滑下；
- （4）自定义动画；
其实所有jQuery动画效果，从本质上来说，都是通过改变元素的CSS属性来实现的，也就是说：jQuery动画就是通过将元素的属性从“一个属性值”在一定时间内平滑地过渡到“另一个属性值”，从而实现动画效果。
此外在jQuery中，对于“显示和隐藏、淡入和淡出、滑上和滑下”这3种动画，实现的原理如下：
- （1）显示和隐藏：通过改变width、height、opacity、display来实现动画的显示和隐藏；
- （2）淡入和淡出：通过改变opacity、display来实现动画的淡入和淡出；
- （3）滑上和滑下：通过改变height、display来实现动画的滑上和滑下；
通过深入剖析这3种动画形式的本质，我们得出一个道理：对于这几个动画，我们完全可以使用animate()方法来实现。其实，这3种动画形式本身就是使用animate()方法来实现的，只不过jQuery把它们封装得更为简单罢了！
每一组中的2句代码都是等价的：
$().hide(500);$().animate({"width":"0","height":"0","opacity":"0.0","display":"none"},500);$().fadeOut(500);$().animate({"opacity":"0.0","display":"none"},500);$().slideUp(500);$().animate({"height":"0,""opacity":"0.0","display":"none"},500);判断动画状态
除了stop()方法，在jQuery中我们还可以使用is()方法来判断所选元素是否正处于动画状态，如果元素不处于动画状态，则添加新的动画；如果元素处于动画状态，则不添加新的动画。
if(!$().is(":animated")){ //如果当前没有进行动画，则添加新动画}$(function () { $("#wrapper").hover(function () { if(!$(" #content", this).is(":animated")) { $(" #content", this).animate({ "bottom": "0px" }, 200); } }, function () { if(!$(" #content", this).is(":animated")) { $(" #content", this).animate({ "bottom": "-28px" }, 200); } }) })带有动画效果的回顶部特效
$(function () { /*根据滚动距离判断按钮是否显示或隐藏*/ $(window).scroll(function () { if ($(this).scrollTop() > 300) { $("#back-to-top").fadeIn(200); } else { $("#back-to-top").fadeOut(200); } }); /*实现点击滚动回顶部*/ $("#back-to-top").click(function () { $("html,body").animate({ scrollTop: 0 }, 500); }); })jQuery过滤方法简介
这些过滤方法跟选择器功能类似，也是起到选择元素的作用。但是过滤方法却是以“方法”的形式表现，而不是以选择器形式表现。
jQuery查找方法
查找方法，主要以“当前所选元素”为基点，查找它的父元素、子元素或者兄弟元素等。
查找祖先元素
在jQuery中，为我们提供3种查找祖先元素的方法：
- （1）parent()；
- （2）parents()；
- （3）parentsUntil()；
一、parent()方法
在jQuery中，我们可以使用parent()方法来查找当前元素的“父元素”。记住，元素只有一个父元素。
parent(expression)
参数expression表示jQuery选择器表达式，用来过滤父元素。当参数省略时，则选择所有的父元素。如果参数不省略，则选择符合条件的父元素。
<script type="text/javascript"> $(function () { $("p").parent(".lvye").css("color", "red"); }) </script></head><body> <div><p>绿叶学习网jQuery入门教程</p></div> <div class="lvye"><p>绿叶学习网jQuery入门教程</p></div> <div><p>绿叶学习网jQuery入门教程</p></div></body>$(“p”).parent(“.lvye”)表示选择p元素的父元素，并且这个父元素必须含有类名lvye，不然不会被选中。
二、parents()方法
parents()方法和parent()方法相似，都是用来查找所选元素的祖先元素。但是这两个方法也有着本质的区别。
其实这2个方法也很好区分，parent是单数形式，查找的祖先元素只有1个，那就是父元素。而parents是复数形式，查找的祖先元素当然是所有的祖先元素。
parents(expression)
$(function () { $("#btn").click(function () { var parents = $("span").parents() .map(function () { return this.tagName; }) .get().join(","); alert("span元素的所有祖先元素为：" + parents.toLowerCase()); }); }) </script>查找后代元素
在jQuery中，提供了3种查找后代元素的方法：
- （1）children()；
- （2）contents()；
- （3）find()；
一、children()方法
在jQuery中，我们可以使用children()方法来查找当前元素的“所有子元素”或“部分子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。
children(expression)
$(function () { $(".wrapper").hover(function () { $(this).children(".test").css("color", "red"); }, function () { $(this).children(".test").css("color", "black"); }) })$(this).children(“.test”)表示选择当前元素下class为test的“子元素”。在这里我们会发现，虽然也有class为test的“孙元素”，但是使用children()方法却不会将“孙元素”选中。
二、contents()方法
与children()方法相似，contents()方法也是用来查找子内容的，但它不仅获取子元素，还可以获取文本节点、注释节点等
三、find()方法
find()方法和children()方法相似，都是用来查找所选元素的后代元素，但是find()方法能够查找所有后代元素，而children()方法仅能够查找子元素。
向前查找兄弟元素
所谓的“向前查找兄弟元素”，就是找到某个元素之前的兄弟元素。在jQuery中，为我们提供了3种向前查找兄弟元素的方法：
- （1）prev()；
- （2）prevAll()；
- （3）prevUntil()；
兄弟元素，指的是该元素在同一个父元素下的“同级”元素。
一、prev()方法
在jQuery中，我们可以使用prev()方法来查找某个元素的前一个“相邻”的兄弟元素。
$().prev()
二、prevAll()方法
prevAll()方法跟prev()方法相似，都是用来向前查找所选元素的兄弟元素。不过prev()方法只能查找所选元素前一个“相邻”的兄弟元素，而prevAll()可以查找所选元素前面“所有”同级的兄弟元素。
向后查找兄弟元素
所谓的“向后查找兄弟元素”，就是找到某个元素之后的兄弟元素。在jQuery中，提供了3种为我们向后查找兄弟元素的方法：
- （1）next()；
- （2）nextAll()；
- （3）nextUntil()；
兄弟元素，指的是该元素在同一个父元素下的“同级”元素。
在jQuery中，我们可以使用next()方法来查找某个元素的后一个“相邻”的兄弟元素。
nextAll()方法跟next()方法相似，都是用来向后查找所选元素的兄弟元素，但是next()方法只能查找所选元素后一个“相邻”的兄弟元素，而nextAll()可以查找所选元素后面“所有”同级的兄弟元素。
nextAll(expression)查找所有兄弟元素siblings()
siblings(expression)
参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素“所有”同级元素（不分前后）；当参数不省略时，则查找所选元素前面“符合条件”的兄弟元素。
大家要记住这一点，使用siblings()方法来查找兄弟元素，这是不分前后的，
$(function () { $("#lvye").siblings().css("color", "red"); })$(“#lvye”).siblings()表示选择id为lvye元素的所有兄弟元素，这里的兄弟元素不分前面和后面。此外还要注意一下，siblings()方法选择的兄弟元素，不包括元素本身（难道你跟你自己是兄弟关系？）。
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQUERY
- jquery
- jQuery
- jquery
- jquery
- html
- 利用反射获取java类属性并赋值
- 面试经典
- Lua源码揭秘（四）一个不算难的string库扩展
- 数据类型和作用域链
- jQuery
- Socket之TCP与UDP的编程实现
- Android 6.0以上的权限申请的问题
- Java控制台小程序：随机生成双色球
- 转载数据库书总结
- Android 获取系统版本
- 加速度传感器切换歌曲
- Backward Digit Sums POJ
- hypermesh中带有孔洞的长方体的网格划分
