jQuery 笔记

jQuery教程

向页面添加jQuery库

<head>
<script src="jquery.js"></script>
</head>

jQuery库在I:/project/html/first1中

jQuery语法

$(selector).action();

美元符号定义jQuery
选择符用于查询和查找HTML元素
action（）执行操作

实例

$(this).hide()-隐藏当前元素
$("P").hide()-隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪函数

$(document).ready(function(){
---jQuery functions go here---
})

所有的jQuery函数都位于这个函数中，防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery 选择器
a.jQuery 元素选择器

$("p")选择<p>元素
$("p.intro")选取所有 class="intro" 的 <p> 元素
$("p#demo")选取所有 id="demo" 的 <p> 元素

b. jQuery CSS选择器

$("p").css("background-color","red")

c. 更多选择器实例

$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个<\ul>的第一个<\li>元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件(?)
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 效果

1.隐藏/显示

hide()和shou()

$(selector).hide/show(speed,callback);

speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" （带引号）或毫秒
callback 参数是隐藏或显示完成后所执行的函数名称。

toggle()

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

用于切换hide()和show()，也有speed和callback两个参数。

2.淡入淡出

fadeIn() 从无到有
fadeOut() 从有到无
fadeToggle() 有-无-有
fadeTo() 淡出至原图的0-1倍
以上均接受speed和callback参数，除此之外在两个参数中间fadeTo还有个opacity参数（透明度）。

3.滑动

slideDown()向下滑动显示
slideUp()向上滑动消失
slideToggle()先向下显示再向上消失

4.动画 animate()

默认情况下，所有 HTML 元素的位置都是静态的并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

方法

$(selector).animate({params},speed,callback);

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

必需的params参数定义形成动画的CSS属性。

操作多个属性

$("button").click(function(){
 $("div").animate({
   left:'250px',
   opacity:'0.5',
   height:'150px',
   width:'150px'
 });
});

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

使用相对值

 $("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>开始动画</button>

例二

$("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });

5. stop()

用于停止动画或效果，在它们完成之前。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

6. callback

Callback 函数在当前动画 100% 完成之后执行。

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

7.chaining

允许在相同的元素上运行多条 jQuery 命令，一条接着另一条。

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

折进缩行不影响执行。

jQuery HTML

1.获取

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

$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
...
<input type="text" id="test" value="米老鼠">

获取属性 - attr()

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

2.设置

设置内容
.text("")
.html("")
.val("")
text()、html() 以及 val() 的回调函数
a. 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
b. 以函数新值返回希望使用的字符串

$("#btn1").click(function(){
   $("#test1").text(function(i,origText){
     return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
   });
 });

 $("#btn2").click(function(){
   $("#test2").html(function(i,origText){
     return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
   });
 });

设置属性 - attr()

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

允许同时设置多个属性

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

attr()的回调函数
a. 两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
b. 以函数新值返回希望使用的字符串

3.添加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

4.删除

remove() - 被选元素及其子元素
remove() 方法也可接受一个参数，允许对被删元素进行过滤
empty() - 删除被选元素的子元素

5.CSS类

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

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

规定多个类

$("button").click(function(){
  $("#div1").addClass("important blue");
});

removeClass() - 删除指定的 class 属性
toggleClass() - 对被选元素进行添加/删除类的切换操作

6.css()

返回 CSS 属性

css("propertyname");

设置 CSS 属性

css("propertyname","value");

设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

7.尺寸

width()-设置或返回元素的宽度（不包括内边距、边框或外边距）
height() - 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() - 返回元素的宽度（包括内边距）。
innerHeight() - 返回元素的高度（包括内边距）
outerWidth() - 返回元素的宽度（包括内边距和边框）
outerHeight() - 返回元素的高度（包括内边距和边框）
outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）

jQuery 遍历

1.祖先

parent()- 返回被选元素的直接父元素
parents() - 返回被选元素的所有祖先元素
可以使用可选参数来过滤对祖先元素的搜索
parentsUntil() - 返回介于两个给定元素之间的所有祖先元素（两端均不包括）

2.后代

children() - 返回被选元素的所有直接子元素
使用可选参数来过滤对子元素的搜索
find() - 返回被选元素的后代元素，一路向下直到最后一个后代

3.同胞

siblings() - 返回被选元素的所有同胞元素
可以使用可选参数来过滤对同胞元素的搜索
next() - 返回被选元素的下一个同胞元素
nextAll() - 返回被选元素的所有跟随的同胞元素
nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素(两端均不包含）

4.过滤

first() - 返回被选元素的首个元素

$(document).ready(function(){
  $("div p").first();
});

选取首个 div 元素内部的第一个 p 元素

last() - 返回被选元素的最后一个元素

$(document).ready(function(){
  $("div p").last();
});

选择最后一个 div 元素中的最后一个 p 元素

eq() - 返回被选元素中带有指定索引号的元素

$(document).ready(function(){
  $("p").eq(1);
});

索引号从 0 开始,选取第二个 p 元素（索引号 1）

filter() - 允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not() - 返回不匹配标准的所有元素

jQuery AJAX

AJAX教程

1.加载 load()

从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);

必需的 URL 参数规定希望加载的 URL
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
可选的 callback 参数是 load() 方法完成后所执行的函数名称

把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数,如把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

$("#div1").load("demo_test.txt #p1");

callback 参数规定当 load() 方法完成后所要允许的回调函数，接收三个参数
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

2.get()和post()

HTTP方法-get post对比

$.get()

$.get(URL,callback);

必需的 URL 参数规定希望请求的 URL
可选的 callback 参数是请求成功后所执行的函数名

 $("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

第一个参数是希望请求的 URL（"demo_test.asp"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

$.post()

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL
可选的 data 参数规定连同请求发送的数。
可选的 callback 参数是请求成功后所执行的函数名

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

第一个参数是希望请求的 URL ("demo_test_post.asp")。
然后连同请求（name 和 city）一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

jQuery 杂项

noConflict()

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

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});

也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，可以把它存入变量，以供稍后使用。

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});

如果jQuery 代码块使用 $ 简写，并且不愿意改变这个快捷方式，那么可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 jQuery。

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行！");
  });
});

jQuery 参考手册

参考手册
 选择器
 事件
 效果
 文档操作
 属性操作
 CSS操作
 AJAX
遍历
 数据
 DOM元素方法
 核心
 属性