第七天 JQuery基础教程

JQuery是一个Javascript的框架，它封装了JavaScript常用的功能代码，能让你的代码更加简洁高效。
点击这里下载JQuery3.2.1和参考手册，提取码：SCcO
下载后放到你的项目中，然后在其他html文件中加入

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

就可以使用JQuery了。

---

JQuery 选择器

选择器主要用来选取文档中的元素。使用$()的方式比写document.getElementById()更加简洁。

1. 元素选择器
   $("p") 选取 <p> 元素。
   $("p.intro") 选取所有 class="intro" 的 <p> 元素。
   $("p#demo") 选取所有 id="demo" 的 <p> 元素。
2. 属性选择器
   $("[href]") 选取所有带有 href 属性的元素。
   $("[href='#']") 选取所有带有 href 值等于 “#” 的元素。
   $("[href!='#']") 选取所有带有 href 值不等于 “#” 的元素。
   $("[href$='.jpg']") 选取所有 href 值以 “.jpg” 结尾的元素。
3. id选择器
   $("#lastname") 选取id="lastname" 的元素
4. 类选择器：
   $(".intro") 所有class="intro" 的元素
   $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
5. 伪类选择器
   $("p:first") 第一个<p> 元素
   $("p:last") 最后一个<p>元素
   $("tr:even") 所有偶数<tr> 元素
   $("tr:odd") 所有奇数<tr> 元素
   $("ul li:eq(3)")列表中的第四个元素（index 从 0 开始）
   $("ul li:gt(3)")列出 index 大于 3 的元素
   $("ul li:lt(3)") 列出 index 小于 3 的元素
   $("input:not(:empty)") 所有不为空的 input 元素
   $("p:hidden") 所有隐藏的<p>元素
   $("table:visible") 所有可见的表格
6. 表单选择器
   $(":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> 元素
   $(":selected") 所有被选取的 input 元素 （select option 下拉框）
   $(":checked") 所有被选中的 input 元素（radio 和 checkbox）

另外$(this)指代元素本身

---

JQuery 动画

使用方法：

$(selector).method(speed,callback);

1. 隐藏显示
   hide() 和 show() 方法来隐藏和显示 HTML 元素
   toggle() 方法来切换 hide() 和 show() 方法。
2. 淡入淡出
   fadeIn() 用于淡入已隐藏的元素。
   fadeOut() 方法用于淡出可见元素。
   fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
3. 滑上滑下
   slideDown() 方法用于向下滑动元素。
   slideUp() 方法用于向上滑动元素。
   slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

举例：

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(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);
});//注意fadeTo的第二个参数是指定不透明度，元素的不透明度会逐渐变化到这个值上。

---

JQuery 文档操作

1. 设置/获得内容和属性
   text() 设置或返回匹配元素的内容。
   html() 设置或返回匹配的元素集合中的 HTML 内容。
   val() 设置或返回匹配元素的值。
2. 添加元素
   append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
   prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
   after() 在匹配的元素之后插入内容。
   before() 在每个匹配的元素之前插入内容。
3. 删除元素
   empty() 从被选元素中删除子元素
   remove() 删除被选元素（及其子元素）
4. 获取并设置 CSS 类
   addClass() 向被选元素添加一个或多个类
   removeClass() 从被选元素删除一个或多个类
   toggleClass() 对被选元素进行添加/删除类的切换操作
   css() 设置或返回样式属性
   例如：$("p").css({"background-color":"yellow","font-size":"200%"});
5. jQuery 尺寸 方法
   width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
   height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
   innerWidth() 方法返回元素的宽度（包括内边距）。
   innerHeight() 方法返回元素的高度（包括内边距）。
   outerWidth() 方法返回元素的宽度（包括内边距和边框）。
   outerHeight() 方法返回元素的高度（包括内边距和边框）。

---

JQuery 遍历

祖先遍历

• parent() 返回被选元素的直接父元素。
  例如：$("span").parent(); 返回每个 <span> 元素的的直接父元素
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 <html>。
  例如：$("span").parents();返回所有 <span> 元素的所有祖先：
  加过滤：$("span").parents("ul"); 返回所有 <span> 元素的所有是 <ul> 的祖先
• parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
  例如：$("span").parentsUntil("div"); 返回介于 <span> 与<div> 元素之间的所有祖先元素

后代遍历

• children() 返回被选元素的所有直接子元素。
  例如：$("div").children(); 返回每个 <div> 元素的所有直接子元素
  加过滤：$("div").children("p.intro");返回类名为 “intro” 的所有 <p> 元素，并且它们是 <div> 的直接子元素
• find() 返回被选元素的后代元素，一路向下直到最后一个后代。
  $("div").find("span");返回属于 <div> 后代的所有 <span> 元素
  $("div").find("*");返回 <div> 的所有后代

同胞遍历

• siblings() 返回被选元素的所有同胞元素。
• next() 返回被选元素的下一个同胞元素。
• nextAll() 返回被选元素的所有之后的同胞元素
• nextUntil() 返回介于两个给定参数之间的所有之后的同胞元素。
• prev() 返回被选元素的上一个同胞元素
• prevAll() 返回被选元素的前面同胞元素
• prevUntil() 返回介于两个给定参数之间的所有同胞元素
• first() 返回被选元素的首个元素
  $("div p").first(); 等价于$("div p:first");返回所有div里面第一个p元素
• last() 返回被选元素的最后一个元素
• eq() 返回被选元素中带有指定索引号的元素
  $("p").eq(1);第一个p元素
• filter() 返回匹配的元素
• not() 返回不匹配的所有元素

---

JQuery AJAX

• load()方法
  作用：从服务器加载数据，并把返回的数据放入被选元素中
  语法：$(selector).load(URL,data,callback);
  例如：$("#div1").load("demo_test.txt");
  把文件 “demo_test.txt” 的内容加载到指定的 <div> 元素中

$("button").click(function(){
    $("#div1").load("/example",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
  //responseTxt请求成功得到的字符串数据
  //statusTxt成功为"sucess",失败为"error"
  //xhr.status和xhr.statusText，HTTP状态码，成功时为200 OK

• get() 和 post() 方法
  两种在客户端和服务器端进行请求-响应的常用方法。

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.asp?name=lily&age=19",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

GET请求要提交的数据写在URL上,格式为http://host?key1=value1&key2=value2...

$.post(URL,data,callback);

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});//post提交的数据直接作为参数传进去

• ajax()方法
  该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 get, post 等

$("button").click(function() {
    $.ajax({
        type:"get",
        url:"imge.json",
        async:true,//是否异步
        beforeSend:function(){
            console.log("before");
        },//请求之前的操作
        success:function(data){
            console.log("sucess"+data)
        }//请求成功后的操作
    });
});