基础语法

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

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

实现文档就绪后执行 jQuery 方法

$(document).ready(function(){
//代码
});

或者

$(function(){
//代码
});

jquery选择器

• jquery选择器基于元素的ID、类、类型、属性、属性值选择HTML元素（和css的选择器类似）
• 所有选择器以$()开头

元素选择器
$("p")选择所有<p>元素
id选择器
$("#test")选择所有id为test的元素
class选择器
$(".test")选择所有class为test的元素

jquery事件

• 页面对不同访问者的响应叫做事件。
• 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

$("p").click(function(){
    $(this).hide();
});

其中，$("p")选定p元素，.click()指定点击事件，function()定义事件触发后执行的代码。

jquery效果

<p>2333</p>
<button id="hide">hide</button>
<button id="show">show</button>

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});

或者直接用toggle实现

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

• 显示/隐藏 show() hide() toggle()
• 淡入/淡出 fadeIn() fadeOut() fadeToggle()
• 渐变成给定的透明度 fadeTo("slow",0.7)
• 往下/上滑出来 slideDown() slideUp slideToggle()

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

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

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

• 也可以使用相对值来定义
  left:'+=150px'

• 甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
  height:'toggle'

• 队列功能，多个animate()调用下，根据队列顺序来执行

$("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()

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

在段落隐藏后，调用回调函数，弹出提示框
如果不用回调函数，直接写在下面的话，就是弹出框和隐藏一起

链

链接（chaining）允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

DOM操作

• 获取内容

<p>这是段落中的 <b>粗体</b> 文本。</p>

$("p").text()
//这是段落中的 粗体 文本。
$("p").html()
//这是段落中的 <b>粗体</b> 文本。

• 获取输入内容 val()

<input type="text" id="test">

$("#test").val()

• 获取属性的值 attr()

<a href="http://www.baidu.com" id="baidu">baidu</a>

$("#baidu").attr("href") 
//http://www.baidu.com

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

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

• 设置属性

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

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

$("p").append(" <b>追加文本</b>。");
$("p").prepend("在开头追加文本");

• 删除元素
  remove()删除被选元素及其子元素，可以对北山元素进行过滤
  $("p").remove(".italic");
  empty()删除被选元素的子元素

• 设置CSS
  添加class样式
  $("body div:first").addClass("important blue");
  删除class样式
  $("h1,h2,p").removeClass("blue");
  添加/删除轮流来
  $("h1,h2,p").toggleClass("blue");
• css方法
  返回CSS属性值

$("p").css("background-color");
将返回**首个**匹配元素的background-color的值

设置CSS属性：

$("p").css("background-color","yellow");
将为**所有**匹配的元素设置background-color的值为yellow

设置多个CSS属性：
$("p").css({"background-color":"yellow","font-size":"200%"});

jquery尺寸

jquery尺寸

width()--content
height()--content
innerWidth()--content+padding
innerHeight()--content+padding
outerWidth()--content+padding+border
outerHeight()--content+padding+border

遍历

• parent()
  返回被选元素的直接父元素。
  $("span").parent();
  返回每个<span>元素的直接父元素
• parents()
  返回备选元素的所有祖先元素
  也可以使用参数来过滤对祖先元素的搜索
  $("span").parents("ul");
  只返回<span>元素的ul祖先
• parentsUntil()
  返回介于两个元素之间的所有元素
  $("span").parentsUntil("div");
• children()
  返回被选元素的所有直接子元素
• find()
  返回被选元素的所有后代元素
• siblings()
  返回被选元素的所有同胞元素
  同胞元素：拥有相同的父元素的元素们
• next(), prev()
  返回被选元素的下一个/上一个同胞元素
• nextAll(), prevAll()
  返回被选元素的所有的后面的/前面的同胞元素
• nextUntil(), prevUntil()
  返回介于两个元素之间的所有同胞元素

-过滤

• first()
  返回首个
• last()
  返回最后一个
• eq()
  返回被选元素的中带有指定索引号（从0开始）
  $("p").eq(1);取第2个p元素
• filter()
  匹配某标准的元素会被返回
  $("p").filter(".url");返回带有类名url的所有p元素
• not()
  返回不匹配标准的元素

jquery AJAX

• load()
  load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
  $(selector).load(URL,data,callback);
  必需的 URL 参数规定您希望加载的 URL。
  可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
  可选的 callback 参数是 load() 方法完成后所执行的函数名称
  把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：
  $("#div1").load("demo_test.txt");
  把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
  $("#div1").load("demo_test.txt #p1");
  可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
  responseTxt - 包含调用成功时的结果内容
  statusTXT - 包含调用的状态
  xhr - 包含 XMLHttpRequest 对象

• $.get()
  $.get(URL,callback);
  必需的 URL 参数规定您希望请求的 URL。
  可选的 callback 参数是请求成功后所执行的函数名

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

从demo_test.php中取回数据，函数然后触发回调

• $.post()
  $.post(URL,data,callback);
  必需的 URL 参数规定您希望请求的 URL。
  可选的 data 参数规定连同请求发送的数据。
  可选的 callback 参数是请求成功后所执行的函数名

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});