前端开发_2.jQuery学习总结

系列文章目录

---

前言

把重要的知识记录在案!

---

学习链接
1.菜鸟教程

JQuery动态效果

一、jQuery是什么？

jQuery 是一个 JavaScript 库。

二、jQuery简单使用

1.jQuery下载

1.第一种，在html直接引用
jQuery官网下载

<script src="jquery-1.10.2.min.js"></script>

2.第二种，使用CDN内容分发网络）在html直接引用

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">#Staticfile CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">#百度 CDN
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">#又拍云 CDN
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">#新浪 CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>#Google CDN
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>#Microsoft CDN

3.—$(selector).action()
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
入口文件

$(document).ready(function(){ #第一种
   // 开始写 jQuery 代码... 
});
$(function(){ #第二种
   // 开始写 jQuery 代码... 
});

---

2. jQuery 选择器，遍历

选择器

#元素选择器
$("p")#选取所有 <p> 元素
$("h1,div,p")#所有 <h1>、<div> 和 <p> 元素
$(this)#选取当前 HTML 元素
$("p.test")#选取 class 为 test的 <p> 元素

#first，last，even,odd,nth-child(n),only-child
$("p:first")	#选取第一个 <p> 元素
$("ul li:first-child")	#选取每个 <ul> 元素的第一个 <li> 元素	
$("p:first-of-type")#属于其父元素的第一个 <p> 元素的所有 <p> 元素
$("tr:even")#选取偶数位置的 <tr> 元素	
$("tr:odd")	#选取奇数位置的 <tr> 元素
$("p:nth-child(2)")#属于其父元素的第二个子元素的所有 <p> 元素
$("p:nth-last-child(2)")#从最后一个子元素开始计数
$("p:nth-of-type(2)")#属于其父元素的第二个 <p> 元素的所有 <p> 元素
$("p:nth-last-of-type(2)")#从最后一个子元素开始计数
$("p:only-child")#属于其父元素的唯一子元素的所有 <p> 元素
$("p:only-of-type")#属于其父元素的特定类型的唯一子元素的所有 <p> 元素
#----------------------------------
$("div > p")#div> 元素的直接子元素的所有 <p> 元素
$("div p")#<div> 元素同级的所有 <p> 元素
$("div + p")#每个 <div> 元素相邻的下一个 <p> 元素
$("div ~ p")#<div> 元素同级的所有 <p> 元素
#----------------------------------
$("li:first")    #第一个li
$("li:last")    #最后一个li
$("li:even")     #挑选下标为偶数的li
$("li:odd")     #挑选下标为奇数的li
$("li:eq(4)")    #下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    #下标大于 2 的li
$("li:lt(2)")    #/下标小于 2 的li
$("li:not(#runoob)") #挑选除 id="runoob" 以外的所有li

$(":input")	#所有 input 元素
$(":text")	#所有带有 type="text" 的 input 元素
$(":password")	#所有带有 type="password" 的 input 元素
$(":radio")	#所有带有 type="radio" 的 input 元素
$(":checkbox")	#所有带有 type="checkbox" 的 input 元素
$(":submit")	#所有带有 type="submit" 的 input 元素
$(":reset")	#所有带有 type="reset" 的 input 元素
$(":button")	#所有带有 type="button" 的 input 元素
$(":image")	#所有带有 type="image" 的 input 元素
$(":file")	#所有带有 type="file" 的 input 元素
$(":enabled")	#所有启用的元素
$(":disabled")	#所有禁用的元素
#----------------------------------
$("[href]")	#选取带有 href 属性的元素	
$("a[target='_blank']")	#选取所有 target 属性值等于 "_blank" 的 <a> 元素	
$("a[target!='_blank']")#选取所有 target 属性值不等于 "_blank" 的 <a> 元素	
$(":button")#选取所有 type="button" 的 <input> 元素 和 <button> 元素	
#----------------------------------
#----------------------------------
#id 选择器
$("#test")#根据id选取元素
#----------------------------------
#----------------------------------
#类选择器
$(".test")#class="test" 的所有元素
$(".test,.demo")#class 为 "test" 或 "demo" 的所有元素

#实例
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

遍历

#向上遍历
#parent()#返回被选元素的直接父元素
#parents()#返回被选元素的所有祖先元素
#parentsUntil()#返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
  $("span").parent();
});
$(document).ready(function(){
  $("span").parents();
});
#返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
  $("span").parents("ul");
});
$(document).ready(function(){
  $("span").parentsUntil("div");
});

#向下遍历
#children()#返回被选元素的所有直接子元素
#find()#返回被选元素的后代元素，一路向下直到最后一个后代
$(document).ready(function(){
  $("div").children();
});
$(document).ready(function(){
  $("div").children("p.test");
});
#返回属于 <div> 后代的所有 <span> 元素
$(document).ready(function(){
  $("div").find("span");
});
$(document).ready(function(){
  $("div").find("*");
});

#同胞(siblings)
#siblings()#返回被选元素的所有同胞元素
#next()#返回被选元素的下一个同胞元素
#nextAll()#返回被选元素的所有跟随的同胞元素
#nextUntil()#返回介于两个给定参数之间的所有跟随的同胞元素
#prev()#返回被选元素的上一个同胞元素
#prevAll()#返回被选元素的所有跟随的同胞元素
#prevUntil()#返回介于两个给定参数之间的所有跟随的同胞元素
$(document).ready(function(){
  $("h2").siblings();
});
$(document).ready(function(){
  $("h2").siblings("p");
});
$(document).ready(function(){
  $("h2").next();
});
$(document).ready(function(){
  $("h2").nextAll();
});

#过滤
#first()#返回被选元素的首个元素
#last()#返回被选元素的最后一个元素
#eq()#返回被选元素中带有指定索引号的元素
#filter()#返回匹配的元素
#not() #返回不匹配标准的所有元素
$(document).ready(function(){
  $("div p").first();
});
$(document).ready(function(){
  $("div p").last();
});
$(document).ready(function(){
  $("p").eq(1);
});
$(document).ready(function(){
  $("p").filter(".url");
});
$(document).ready(function(){
  $("p").not(".url");
});

3. jQuery 事件,效果

1.事件方法

• 鼠标事件（click,dblclick ,mouseenter,mouseleave,mousedown ,mouseup,hover）
• 键盘事件（keypress,keydown,keyup）
• 表单事件（submit,change,focus,blur）
• 文档/窗口事件（load,resize,scroll,unload）

---

2.效果方法

• 隐藏，显示（hide,show,toggle）
• 淡入，淡出（fadeIn,fadeOut,fadeToggle,fadeTo）
• 滑动（slideDown,slideUp,slideToggle）
• 动画（animate）

鼠标事件

#单击事件
$("p").click(function(){
    $(this).hide();
});
#双击事件
$("p").dblclick (function(){
    alert('双击事件');
});
#当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("p").mouseenter(function(){
    alert('mouseenter 事件');
});
#当鼠标指针离开元素时，会发生 mouseleave 事件。
$("p").mouseleave(function(){
    alert('mouseleave 事件');
});
#当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
$("p").mousedown (function(){
    alert('mousedown 事件');
});
#当在元素上松开鼠标按钮时，会发生 mouseup 事件。
$("p").mouseup (function(){
    alert('mouseup 事件');
});
#hover()方法用于模拟光标悬停事件。
#当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("p").hover(
    function(){
        alert("你进入");
    },
    function(){
        alert("你离开了");
    }
);

表单事件

#当元素获得焦点时，发生 focus 事件。
#当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
#当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){
 $(this).css("background-color","#ffffff");
});
#当 <input> 字段改变时警报文本
$("input").change(function(){
    alert("文本已被修改");
});

• hide() 和 show()#隐藏，显示
• toggle() 方法来切换 hide() 和 show()

#$(selector).hide(speed,callback);#"slow"、"fast" 或毫秒。
#$(selector).show(speed,callback);
#$(selector).toggle(speed,callback);
$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});
$(".hidebtn").click(function(){
  $("div").hide(1000,"linear",function(){#缓动函数liner
     alert("hide() 方法已完成!");
   });
 });
$("button").click(function(){
 $("p").toggle();
});

• fadeIn() 用于淡入已隐藏的元素
• fadeOut() 方法用于淡出可见元素
• fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
• fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

#$(selector).fadeIn(speed,callback);#"slow"、"fast" 或毫秒。
#$(selector).fadeOut(speed,callback);
#$(selector).fadeToggle(speed,callback);
#$(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

• slideDown() 方法用于向下滑动元素
• slideUp() 方法用于向上滑动元素
• slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

#$(selector).slideDown(speed,callback);#"slow"、"fast" 或毫秒。
#$(selector).fadeOut(speed,callback);
#$(selector).slideToggle(speed,callback);
$("#flip").click(function(){
  $("#panel").slideDown();
});
$("#flip").click(function(){
  $("#panel").slideUp();
});
$("#flip").click(function(){
  $("#panel").slideToggle();
});

• animate() 方法用于创建自定义动画
• stop() 方法用于在动画或效果完成前对它们进行停止

#$(selector).animate({params},speed,callback);#1.params 参数定义形成动画的 CSS 属性2."slow"、"fast" 或毫秒。
#$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。

#默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
$("button").click(function(){
  $("div").animate({left:'250px'});
});
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
$("button").click(function(){
  $("div").animate({
    height:'toggle'#高度切换
  });
});
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

4. 链式调用

$("#test").slideUp().fadeIn()
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

三、jQuery HTML

1.获得，设置内容 - text()、html() 以及 val()

#text() - 设置或返回所选元素的文本内容
#html() - 设置或返回所选元素的内容（包括 HTML 标记）
#val() - 设置或返回表单字段的值

#获取值
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>


$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>显示值</button>

#设置值
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

#回调函数
#两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

2.获取，设置属性 - attr()

• 对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
• 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

#获取值
$("button").click(function(){
  alert($("#runoob").attr("href"));
});
$("button").click(function(){
#设置值
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});
#回调函数
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

3.添加元素，删除元素

• append() 方法在被选元素的结尾插入内容
• prepend() 方法在被选元素的开头插入内容
• after() 方法在被选元素之后插入内容
• before() 方法在被选元素之前插入内容
• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

$("p").append("追加文本");
$("p").prepend("在开头追加文本");

function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

#删除元素
$("#div1").remove();
$("#div1").empty();
$("p").remove(".test");#删除 class="test" 的所有 <p> 元素

4.获取并设置 CSS 类

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

#addClass('c1 c2 ...' | function(i, c)) -- 添加一个或多个类。
#removerClass('c1 c2 ...' | function(i, c)) -- 删除一个或多个类。
#toggleClass('c1 c2 ...' | function(i, c), switch?) -- 切换一个或多个类的添加和删除。
.important{font-weight:bold; font-size:xx-large;} 
.blue{color:blue;}
#addClass() 
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
$("button").click(function(){
  $("body div:first").addClass("important blue");
});
#removeClass()
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});
#toggleClass()
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

5.css() 方法

#获取css("propertyname");
#设置css("propertyname","value");
#设置多css({"propertyname":"value","propertyname":"value",...})
#获取值
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

6.元素的宽高

width()#方法设置或返回元素的宽度
height()#方法设置或返回元素的高度
innerWidth()#方法返回元素的宽度
innerHeight()#方法返回元素的高度
outerWidth()#元素包括边框
outerHeight()#元素包括边框

四、jQuery - AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

1.jQuery load() 方法

#$(selector).load(URL,data,callback);
#必需的 URL 参数规定您希望加载的 URL。
#可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
#可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #p1");

$("button").click(function(){
# responseTxt - 包含调用成功时的结果内容
#statusTXT - 包含调用的状态
#xhr - 包含 XMLHttpRequest 对象
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

2.AJAX get() 和 post() 方法

#$.get(URL,callback);
#$.post(URL,data,callback);
#必需的 URL 参数规定您希望请求的 URL。
#可选的 callback 参数是请求成功后所执行的函数名。
<?php
echo '这是个从PHP文件中读取的数据。';
?>
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

五、其余模块

1.noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

#仍然可以通过全名替代简写的方式来使用 jQuery
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});
#做为变量使用
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
#在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

总结

不可言喻的重要