前端开发_2.jQuery学习总结
目录
前言
把重要的知识记录在案!
学习链接
1.菜鸟教程
一、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 仍然在工作!");
});
});
总结
不可言喻的重要
