jQuery学习

参考网站：http://www.runoob.com/jquery/jquery-tutorial.html

一、jQuery基础

• 什么是jQuery

jQuery是一个javascript库，jQuery极大的简化了JavaScript编程，而且jQuery很容易学习。

$(document).ready(function(){  
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

$(document)是一个选择器，选中的是整个html全部元素的集合。

• jQuery的功能
  1.HTML 元素选取
  2.HTML 元素操做
  3.CSS 操做
  4.HTML 事件函数
  5.JavaScript 特效和动画
  6.HTML DOM 遍历和修改
  7.AJAX
  8.Utilities

• jQuery的语法
  jQuery 语法是经过选取 HTML 元素，并对选取的元素执行某些操做。
  基础语法： $(selector).action()
  1.$美圆符号表示jQuery
  2.选择符（selector）"查询"和"查找" HTML 元素
  3.action() 执行对元素的操做(好比action能够是hide)
  $(document).ready(function(){ // 开始写 jQuery 代码... });
  咱们的实例中的全部 jQuery 函数位于一个 document ready 函数中,这是为了防止文档在彻底加载（就绪）以前运行 jQuery 代码，即在 DOM 加载完成后才能够对 DOM 进行操做。

  二、jQuery选择器

  jQuery 选择器容许您对 HTML 元素组或单个元素进行操做。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此以外，它还有一些自定义的选择器。

• 元素选择器
  元素选择器基于HTML DOM元素进行选取元素，元素种类参考http://www.runoob.com/html/html-elements.html.
  例如,以下代码选取的就是button元素和P元素：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

• id选择器
  jQuery #id 选择器经过 HTML 元素的 id 属性选取指定的元素。
  页面中元素的 id 应该是惟一的，因此您要在页面中选取惟一的元素须要经过 #id 选择器。
  $("#test").hide();
• class选择器
  jQuery 类选择器能够经过指定的 class 查找元素,。

<p class="test">这是一个段落。</p>
$(".test").hide();

三、jQuery 事件

jQuery 是为事件处理特别设计的。
什么是事件：页面对不一样访问者的响应叫作事件。
常见事件有：

• 鼠标事件
  
• 键盘事件
  
• 表单事件
  
• 文档/窗口事件
  以下是一个鼠标点击事件：
  

$(this).hide();
});

三、jQuery 效果

• 隐藏显示:
  $("p").hide();
$("p").show();
$("p").toggle();//切换 hide() 和 show()
• 淡入淡出:
  $("#div1").fadeIn();//淡入
$("#div1").fadeOut();//淡出
$("#div1").fadeToggle();淡入淡出切换
$("#div1").fadeTo("slow",0.15); //淡出到必定程度，不彻底消失
  
• 滑动效果:
  $("#panel").slideDown();//滑出
$("#panel").slideUp();//滑入
$("#panel").slideToggle();//划入划出切换
  
• 动画效果:
  

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

中止动画： $("#panel").stop();
具体用法参考：http://www.runoob.com/jquery/jquery-animate.html

• 回调函数:
  

$("p").hide("slow",function(){
    alert("段落如今被隐藏了");
  });
});

hide中的function就是回调函数，会在段落彻底隐藏以后，弹出alert警告框。

• jQuery - 链(Chaining)
  经过 jQuery，能够把动做/方法连接在一块儿。
  Chaining 容许咱们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
  例如： $("#p1").css("color","red").slideUp(2000).slideDown(2000);

  三、jQuery HTML

  jQuery 拥有可操做 HTML 元素和属性的强大方法。

• jQuery获取内容、值、属性

  $("#test").text();//获取文本
$("#test").html();//获取HTML
$("#test").val();//获取元素中的值
$("#runoob").attr("href")//获取元素中的属性

• jQuery设置内容、值、属性
  $("#test1").text("Hello world!");//设置文本
$("#test2").html("<b>Hello world!</b>");//设置HTML
$("#test3").val("RUNOOB");//设置元素中的值
$("#runoob").attr("href","http://www.runoob.com/jquery");//设置元素中的属性
  说明：有须要的话，均可添加回调函数。

• jQuery添加元素
  $("p").append(" <b>追加文本</b>。");//往段落后追加文本
$("p").prepend("<b>在开头追加文本</b>。 ");//往段落前追加文本
$("body").append(txt1,txt2,txt3);//一次性追加多个文本
$("img").before("<b>以前</b>");//元素以前插入内容（可插入多个内容）
$("img").after("<i>以后</i>");//元素以后插入内容

• jQuery删除元素
  $("#div1").remove();//jQuery remove() 方法删除被选元素及其子元素。
$("#div1").empty();//jQuery empty() 方法删除被选元素的子元素。
$("p").remove(".italic");//移除全部 class="italic" 的 p 元素

• jQuery操做class属性
  $("h1,h2,p").addClass("blue");//添加class属性
$("h1,h2,p").removeClass("blue");//删除class属性
$("h1,h2,p").toggleClass("blue");//增长/删除class属性

• jQuery css()方法
  $("p").css("background-color")；//获取元素的css属性background
$("p").css("background-color","yellow");//设置css属性
$("p").css({"background-color":"yellow","font-size":"200%"});//设置多个css属性

• jQuery尺寸处理
  $("#div1").width()//元素的宽度性
$("#div1").innerWidth()；//宽度，包含内边距
$("#div1").outerWidth();//宽度，包含内边距和边框

三、jQuery遍历

什么是遍历，遍历就是根据某一个元素，来查找和它相关的其余元素。以某项选择开始，并沿着这个选择移动，直到抵达你指望的元素为止。

• 遍历祖先
  $("span").parent();//选择直接父元素
$("span").parents("ul");//向上遍历，选择全部祖先
$("span").parentsUntil("div");//返回给定元素之间的全部祖先

• 遍历后代
  $("div").children();//返回每一个 <div> 元素的全部直接子元素
$("div").children("p.1");//类名为 "1" 的全部 <p> 元素
$("div").find("span");//返回属于 <div> 后代的全部 <span> 元素
$("div").find("*");//返回 <div> 的全部后代

• 水平遍历
  $("h2").siblings();//返回 <h2> 的全部同胞元素
$("h2").siblings("p");//返回属于 <h2> 的同胞元素的全部 <p> 元素
$("h2").next();//返回 <h2> 的下一个同胞元素
$("h2").nextAll();//返回 <h2> 的全部跟随的同胞元素
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的全部同胞元素

• 遍历过滤
  $("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").last();选择最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1);//下面的例子选取第二个 <p> 元素，索引从0开始
$("p").filter(".url");//返回带有类名 "url" 的全部 <p> 元素
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的全部同胞元素
$("p").not(".url");//返回不带有类名 "url" 的全部 <p> 元素

四、jQuery Ajax

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

jQuery与AJAX的关系：经过 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您可以把这些外部数据直接载入网页的被选元素中。

• load方法
  语法：
  $(selector).load(URL,data,callback);

  callback参数：

  responseTxt - 包含调用成功时的结果内容
  statusTXT - 包含调用的状态
  xhr - 包含 XMLHttpRequest 对象

  实例：
  $("#div1").load("demo_test.txt");//把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素
$("#div1").load("demo_test.txt #p1");//把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素

  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
  });

• get方法
  语法：
  $.get(URL,callback);
  实例：
  

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

• post方法
  语法：
  $.post(URL,data,callback);
  实例：
  

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