flyEn'blog

jquery菜鸟教程学习笔记

发表于 | 分类于

JQuery

一个JavaScript库。
可以下载JQuery库，将下载的文件放在网页的同一目录下，在html引用它。

1
2
3
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

也可以通过CDN（内容分发网络）引用它

1
2
3
4
5
6
7
8
# 菜鸟教程CDN
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
# 百度CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
# 谷歌CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
# 微软CDN
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

开始。例：

1
2
3
4
5
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
   })
});

<p>标签里的鼠标一点就会隐藏。如果用按钮隐藏某个标签

1
2
3
4
5
6
7
$(document).ready(function(){
   // 开始写 jQuery 代码...
});
# 简洁写法：
$(function(){
   // 开始写 jQuery 代码...
});

为了防止文档在完全加载之前运行JQ代码

JQuery事件

$("p").click(function(){……}
鼠标事件：
click（单击）、dblclick（双击）、mouseenter（鼠标指针穿过）、mouseleave（鼠标指针离开）、hover（鼠标移动到元素上时会触发第一个函数；鼠标移出时会触发第二个函数）、focus（获得焦点时）、blur（失去焦点时）
键盘事件：keypress、keydown、keyup
表单事件：submit、change、focus、blur
文档/窗口事件：load、resize、scroll、unload

基础语法：$(selector).action()

实例：

1
2
3
4
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

元素选择器（selector）：

参考手册
$("p")—标签，$("#test")—id，$(".test")—class。
$("[href]")—带有href属性，$(":button")—所有 type=”button” 的<input>和<button>,$("tr:even")—选取偶数位置的tr元素，$("tr:odd")—奇数

效果（ation()）：

参考手册

hide() 和 show()

语法：
$(selector).hide(speed,callback); —隐藏
$(selector).show(speed,callback); —显示

可选speed参数规定隐藏/显示的速度（”slow”、”fast” 或毫秒）。可选callback参数时隐藏/显示完成后执行的函数名称。

1
2
3
$("button").click(function(){
  $("p").hide(1000);
});

toggle()

语法：$(selector).toggle(speed,callback);
显示被隐藏的元素/隐藏已显示的元素

1
2
3
$("button").click(function(){
  $("p").toggle();
});

淡入淡出
  • fadeIn() ——
  • fadeOut()
  • fadeToggle()
  • fadeTo()

语法：
淡入：$(selector).fadeIn(speed,callback);
淡出：$(selector).fadeOut(speed,callback);
淡入/淡出：$(selector).fadeToggle(speed,callback);
渐变给定不透明度：$(selector).fadeTo(speed,opacity,callback);

1
2
3
4
5
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

淡入需在css里定义display:none;

滑动
  • slideDown()
  • slideUp()
  • slideToggle()

语法：
向下滑动元素：$(selector).slideDown(speed,callback)（滑下面板）
向上滑动元素：$(selector).slideUp(speed,callback);（拉起面板）
向下滑动/向上滑动：$(selector).slideToggle(speed,callback);

1
2
3
$("#flip").click(function(){
  $("#panel").slideDown();
});

id=panel的块需要display:none;

动画 animate()

语法：$(selector).animate({params},speed,callback);
params: 定义形成动画的CSS属性(必填)

1
2
3
$("button").click(function(){
  $("div").animate({left:'250px'});
});

将div元素往右移动了250像素

生成动画过程中可同时使用多个属性。当使用animate()时必须使用camel标记法书写所有的属性名。比如paddingLeft、marginRight

使用相对值。需要在值的前面加上 += 或 -=：

1
2
3
4
5
$("div").animate({
  left:'250px',
  height:'+=150px',
  width:'+=150px'
});

使用预定义值。可以把属性的动画值设置为 “show”、”hide” 或 “toggle”：

1
2
3
$("div").animate({
  height:'toggle'
});

使用队列功能。可编写多个animate()调用，JQ会创建内部队列，逐一调用：

1
2
3
4
5
6
7
$("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");
});

停止动画stop()

语法：$(selector).stop(stopAll,goToEnd);
stop()适用所有JQ效果函数。
stopALL：是否应该清除动画队列。默认false
goToEnd：是否立即完成当前动画。默认false

1
2
3
$("#stop").click(function(){
  $("#panel").stop();
});

callback 在效果完全实现后回调函数
hide(“slow”,function(){…}

方法链
1
2
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
# p1元素会先变红色，向上滑动，再向下滑动

jQuery html

参考手册

获取内容和属性

获取内容：text()、html()、val()

  • $("#test").text() —获取所选元素的文本内容(text)
  • $("#test").html() —获取所选元素的内容(html)
  • $("#test").val()—获取表单字段的值

获取属性值：attr()
例： $("#runoob").attr("href") —获取href属性的值

设置内容和属性

设置内容：text()、html()、val()
$("#test1").text("Hello world!")—设置id=test1中的内容为Hello world!
$("#test2").html("<b>Hello world!</b>")—同上但返回html文本内容
$("#test3").val("RUNOOB") —设置表单value值为RUNOOB
回调函数：

1
2
3
$("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
});

两个参数：i 被选元素列表中当前元素的下标。origText 原始值
设置属性：attr()
例：$("#runoob").attr("href","http://www.runoob.com/jquery");
—设置链接中href属性的值
回调函数：

1
2
3
$("#runoob").attr("href", function(i,origValue){
  return origValue + "/jquery"; 
});

添加元素

append()、prepend()
$("p").append("追加文本");—在元素结尾插入内容
$("p").prepend("在开头追加文本");—..开头..

创建文本添加元素，例：

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

after()、before()
$("img").after("在后面添加文本");—再元素之后插入内容
$("img").before("在前面添加文本");—..之前..

删除元素

remove()、empty()
过滤：$("p").remove(".italic"); 删除class=italic的所有p标签元素

获取并设置css类

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

addClass():
向不同元素添加class属性

1
2
3
4
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

规定多个类

1
$("#div1").addClass("important blue");

removeClass():
删除指定class属性，用法同上
toggleClass():

css()方法

语法：css("propertyname");
例：$("p").css("background-color");—返回首个匹配元素的背景颜色值

设置css属性
语法：css("propertyname","value");
$("p").css("background-color","yellow");—设置所有匹配元素的背景颜色值

设置多个CSS属性
语法：css({"propertyname":"value","propertyname":"value",...});

尺寸方法

$("#div1").width() 返回匹配元素宽度（不包括内边距、边框或外边距）
$("#div1").height()
$("#div1").innerWidth()返回匹配元素的宽度（包括内边距）
$("#div1").innerHeight()
$("#div1").outerWidth()返回匹配元素的宽度（包括内边距和边框）
$("#div1").outerHeight()

JQ遍历

参考手册

祖先

parent()返回直接父元素
$("span").parent().css({"color":"red","border":"2px solid red"});
$("span").parentsUntil("div");返回介于两个元素之间的元素

后代

children() 返回被选元素的所有直接子元素
$("div").children("p.1");返回类名为’1’的所有p标签元素，并且时div下的子元素
find() 方法返回被选元素的后代元素
$("div").find("span");返回后代所有span标签元素
$("div").find("*"); 返回所有后代

同胞

  • siblings() —返回被选元素的所有同胞元素（可过滤）
  • next() —返回被选元素的下一个元素
  • nextAll() —所有跟随的同胞元素
  • nextUntil() —介于两个给丁参数之间的所有跟随的同胞元素
  • prev() —同next只是方向相反
  • prevAll()—同nextAll只是方向相反
  • prevUntil() —同nextUntil只是方向相反

过滤

first()、last()、eq()、filter()、not()
参考手册

jQuery ajax

AJAX = 异步 JavaScript 和 XML
能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。

ajax load()

语法：
$(selector).load(URL,data,callback);
url: 规定您希望加载的 URL。(必填)
data: 规定与请求一同发送的查询字符串键/值对集合
callback: load()方法完成后所执行的函数名称

1
2
3
4
5
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
})

把文件demo_test.txt的内容加载到指定的div标签元素中。
$("#div1").load("demo_test.txt #p1");把’….’文件中id=p1的元素的内容加载到指定元素中
function()

get()/post()方法

$.get()
语法：$.get(URL,callback);
url：规定请求的url （必填）
callback：请求成功后所执行的函数名

1
2
3
4
5
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$.post()
$.post(URL,data,callback);
data：规定连同请求发送的数据

1
2
3
4
5
6
7
8
9
10
$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

jQuery 其他

杂项方法

noConflict()

1
2
3
4
5
6
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

noConflict()会释放对$标识符的控制，这样其他脚本就可以使用它了。
也可以创建自己的简写，noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。

1
2
3
4
5
6
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

也可以把$符号作为变量传递给ready方法

1
2
3
4
5
6
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

jQuery插件

jQuery Validate

表单验证

jQuery Accordion

创建折叠菜单
演示

jQuery Autocomplete

根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。

jQuery Message

再一个覆盖层显示反馈消息。消息会在一段时间后自动消失。用户可以通过移动鼠标或点击任何地方加快隐藏信息。

jQuery Password Validation

密码验证，提供了两种组件：
一种评价密码的相关因素的功能。
一种使用评价功能显示密码强度的验证插件自定义方法。

jQuery Prettydate

jQuery Tooltip

取代了原生的工具提示框，让它们可自定义，只需要调整它们的内容、为知和外观即可。

jQuery 树型菜单插件(Treeview)

无序灵活的可折叠的树形菜单。使用于一些菜单的导航，支持基于cookie的持久性菜单。

Fork me on GitHub