jQuery

一、引言
二、jQuery引入
- 2.1 直接引用jQuerys
- 2.2 CDN引用
  - 2.2.1 什么是CDN？
  - 2.2.2 常见 CDN
三、jQuery语法【重点】
四、 jQuery DOM操作【重点】
五、jQuery遍历
六、jQuery AJAX

jQuery - 图1

Author：wangbo

一、引言
二、jQuery引入
- 2.1 直接引用jQuerys
- 2.2 CDN引用
  - 2.2.1 什么是CDN？
  - 2.2.2 常见 CDN
三、jQuery语法【重点】
四、 jQuery DOM操作【重点】
五、jQuery遍历
六、jQuery AJAX

一、引言

1.1 jQuery概述

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

重点！！！是对js的封装

和js效果一样，但是比js的代码更少更简洁

1.2 jQuery特点

具有独特的链式语法。
支持高效灵活的CSS选择器。 div.style.color =
拥有丰富的插件。
兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 为什么要用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery，例如：Google、Microsoft、IBM、Netflix

二、jQuery引入

2.1 直接引用jQuerys

从 jQuery.com 官网或从GitHub下载合适版本（本课程使用1.12.4版本，兼容性更好，最新版本为3.x），放入服务器的合适目录中，在页面中直接引用。

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，便于可读）。

jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src=””>< /script> 标签引用

<head>
    <script src="jquery-1.12.2.min.js"></script>
</head>

2.2 CDN引用

2.2.1 什么是CDN？

CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

2.2.2 常见 CDN

百度 CDN

<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>

新浪 CDN

<head>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    </script>
</head>

Google CDN

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
</head>

Microsoft CDN

<head>
    <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
    </script>
</head>

三、jQuery语法【`重点`】

3.1 基本使用

[ $jQuery - 图2$ %5D()%EF%BC%9A%E8%A1%A8%E7%A4%BA%E9%A1%B5%E9%9D%A2DOM%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%EF%BC%8C%E5%88%99%E6%89%A7%E8%A1%8C%EF%BC%8C%E6%AF%94onload%E4%BA%8B%E4%BB%B6%E6%89%A7%E8%A1%8C%E6%97%A9%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%8F%AF%E4%BB%A5%E5%86%99%E5%A4%9A%E4%B8%AA%E3%80%82#card=math&code=%28%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%29%5D%28%29%EF%BC%9A%E8%A1%A8%E7%A4%BA%E9%A1%B5%E9%9D%A2DOM%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%EF%BC%8C%E5%88%99%E6%89%A7%E8%A1%8C%EF%BC%8C%E6%AF%94onload%E4%BA%8B%E4%BB%B6%E6%89%A7%E8%A1%8C%E6%97%A9%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%8F%AF%E4%BB%A5%E5%86%99%E5%A4%9A%E4%B8%AA%E3%80%82)是jQuery函数的简写。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- jquery是官方给咱们封装好的一个js框架，封装到了外部的js文件里面 -->
        <!-- 外部的js文件引入到咱们代码中 -->
        <!-- 第一种引入方法  在本地下载下来了一个js文件-->
        <script src="jquery-3.4.1.min.js"></script>
        <!-- 第二种引入方式 
        必须得有网，没有网是引入不进来的
        -->
        <!-- <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
            </script> -->
    </head>
    <body>
    </body>
    <script>
        // 当你当前文档流对象在准备的时候就已经将要执行这个匿名函数了
        //所以说 比onload这个事件先执行
        $(document).ready(function () {
            alert("hello world")
        })
        // 当页面一加载就会执行匿名函数
        //这个写法是上面的写法的一个缩写
        $(function () {
            alert("hello jquery");
        })
    </script>
</html>

$(selector).action()：通过选取 HTML 元素，并对选取的元素执行某些操作。

选择符（selector）表示”查找” HTML 元素

jQuery 的 action() 执行对元素的操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <p>十年生死两茫茫</p>
        <div id="div1">千里孤坟无处话凄凉</div>
        <footer class="footer1">纵使相逢应不识</footer>
    </body>
    <script>
        //在js里面找到标签对象  getElementById()  getElementsByTagName getElementsByCLassName
        //在jquery中如何找到标签对象呢？
        console.log($("p"))//通过标签的名字找到标签对象的
        console.log($("#div1"))
        console.log($(".footer1"))
        /*
         $(选择器).action()：通过选取 HTML 元素，并对选取的元素执行某些操作。
         选择符（selector）表示"查找" HTML 元素
         jQuery 的 action() 执行对元素的操作
         找到标签对象，让这个标签做一些操作
         */
        $("p").hide()//找到p标签对象，让其隐藏
         $("#div1").hide()
         $(".footer1").hide()
         //总结：首先找到标签，然后调用方法去指向当前标签的操作
    </script> 
</html>

3.2 jQuery选择器

目的：为了找到标签元素的

在js里面找到标签对象 getElementById() getElementsByTagName getElementsByCLassName

元素选择器：jQuery 元素选择器基于元素名选取元素。

示例：在页面中选取所有
元素

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

id选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：

$(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

class选择器：jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

3.3 jQuery事件及常用事件方法

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
选取单选按钮

点击元素：在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时触发 keypress 事件”。
常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery 事件方法语法：

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

总结：也就是说，不传参数是点击，传参数是设置事件。

常用的 jQuery 事件方法
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。

click()：当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个
元素上触发时，隐藏当前的
元素：

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

dblclick()：当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

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

mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

hover()：hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()：当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()：当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <p>山不在高，有仙则灵</p>
        <div>天若有情天亦老,人间正道是沧桑</div>
        <span>不破楼兰终不还</span>
        <footer>秦时明月汉时关</footer>
        <input type="text"/>
    </body>
    <script>
        //单击事件  js  onclick
        $("p").click(function () {
            //$(this)就是$("p")
            $(this).hide()
        })
        //双击事件  js ondblclick
        $("div").dblclick(function () {
            $(this).hide()
        })
        //鼠标往上一放的事件
        // $("span").mouseenter(function () {
        //     $(this).hide()
        // })
        // $("span").mouseleave(function () {
        //     $(this).show()
        // })
        //点上去以后按住鼠标不松手触发的事件
        // $("span").mousedown(function () {
        //     alert("按住啊不松手")
        // })
        $("span").mouseup(function () {
            alert("松手le触发的事件")
        })
        //当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
        $("footer").hover(
        function () {
            alert("您进入了footer")
        }, 
        function (){
            alert("您离开了footer")
        })
        //当光标在input输入框中的是时候  获取焦点
        $("input").focus(function () {
            //对象.style.backgroundColor ="red" 
            $(this).css("background-color", "pink")
        })
        $("input").blur(function () {
            //对象.style.backgroundColor ="red" 
            $(this).css("background-color", "red")
        })
    </script>
</html>

四、 jQuery DOM操作【`重点`】

4.1 捕获(获取)

目的：访问和操作元素和属性变得很容易。

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

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容 ===》js中 innerText属性
html() - 设置或返回所选元素的内容（包括 HTML 标记）====》js中innerHTML
val() - 设置或返回表单字段的值 input.value

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <span id="span">
            山的那边还是山，建星裤裆被拆穿
        </span>
        <input type="text"/>
        <button>点我啊</button>
    </body>
    <script>
        //js的写法
        // var span = document.getElementById("span")
        // console.log(span.innerHTML)
        // console.log(span.innerText)
        //获取的  如果方法中啥也不写，就是获取
        // console.log($("#span").html())
        // console.log($("#span").text())
        // $("button").click(function () {
        //     console.log($("input").val())
        // })
        //设置值  如果方法中写了字符串  就是设置
        $("button").click(function() {
            //$("#span").text("建星生气了")
            //$("#span").html("<div>建星又生气了</>")
            $("input").val("狗蛋建星")  //给input输入框中设置值
        })
    </script>
</html>

获取属性-attr()
jQuery attr() 方法用于获取属性值。很重要
下面的例子演示如何获得链接中 href 属性的值：
setAttrbute() js

$("#btn2").click(function(){
        // 获取值            
        console.log($("#a1").attr("href"));
        // 设置 值            
        $("#a1").attr("href","04.html");
});

4.2 设置

我们将使用前一章中的三个相同的方法来设置内容：

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

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

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

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：没有讲

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）文本中 color属性的值：

$("button").click(function(){
  $("#font1").attr("color","red");
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <span id="span">
            山的那边还是山，建星裤裆被拆穿
        </span>
        <input type="text"/>
        <a href="1jquery的入门.html" id="a1" class="a2">走你</a>
        <button>点我啊</button>
    </body>
    <script>
        //js的写法
        // var span = document.getElementById("span")
        // console.log(span.innerHTML)
        // console.log(span.innerText)
        //获取的  如果方法中啥也不写，就是获取
        // console.log($("#span").html())
        // console.log($("#span").text())
        // $("button").click(function () {
        //     console.log($("input").val())
        // })
        //设置值  如果方法中写了字符串  就是设置
        $("button").click(function() {
            //$("#span").text("建星生气了")
            //$("#span").html("<div>建星又生气了</>")
            $("input").val("狗蛋建星")  //给input输入框中设置值
        })
        $("button").click(function () {
            //获取标签中指定的属性的属性值
            console.log($("a").attr("href"))
            console.log($("a").attr("id"))
            console.log($("a").attr("class"))
            //设置标签中指定的属性的属性值
            $("a").attr("href", "http://www.baidu.com")
            $("a").attr("id", "a11")
            $("a").attr("class", "a22")
            //太复杂了
            $("button").click(function(){
                $("span").text(function(i,origText){
                    return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
                });
            });
        })
    </script>
</html>

总结以下：text() html() val() attr() 既可以获取内容又可以设置内容

4.3 添加元素

js body.appendChild(div)

我们将学习用于添加新内容的四个 jQuery 方法：

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

jQuery append() 方法在被选元素的结尾插入内容。

$("p").append("追加文本");

jQuery prepend() 方法在被选元素的开头插入内容。

$("p").prepend("v文本");

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

4.4 删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("#div1").remove();
$("#div1").empty();

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

$("#div1").remove();

4.5 CSS类

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

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

下面的样式表将用于本页的所有例子：

.success{
                background-color: greenyellow;
                color: red;
}
.error{
                background-color: red;
                color: gray;
}

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

$("button").click(function(){
 $("#btn").addClass("success");
});

下面的例子演示如何在不同的元素中删除指定的 class 属性：

$("button").click(function(){
  $("#btn").removeClass("success");
});

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){
  $("#btn").toggleClass("success");
});

4.6 css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

$("p").css("background-color");

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

如需设置多个 CSS 属性，请使用如下语法：

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

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="div1" style="width: 200px;height: 200px;background-color: aqua;"></div>
        <button>点我啊</button>
    </body>
    <script>
        //通过css方法获取属性的值
        console.log($("#div1").css("width"))
        console.log($("#div1").css("height"))
        console.log($("#div1").css("background-color"))
        //通过css方法设置属性的值
        $("button").click(function () {
            //$("#div1").css("background-color", "red").css("width", "100px").css("height", "100px")
            $("#div1").css({"background-color":"yellow", "width":"400px", "height":"400px"})
        })
    </script>
</html>

4.7 尺寸

innerWidth innerHeight

jQuery 提供多个处理尺寸的重要方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的
元素的宽度和高度：

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的
元素的 inner-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的
元素的 outer-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

五、jQuery遍历

5.1 遍历

jQuery 遍历，意为”移动”，用于根据其相对于其他元素的关系来”查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

5.2 祖先 jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 div元素的直接父元素：

$("#div3").parent().css("background-color","green");

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。

下面的例子返回所有 div元素的所有祖先：

            $("#div3")获取所有父类 是数组 包括 html body
            $("#div3").parents("#div1").css("border","solid 3px #f00");;

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 span 元素的所有祖先，并且它是 url 元素：

$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 span 与 di v 元素之间的所有祖先元素：

    $("#div3").parentsUntil("body").css("border","solid 3px #f00");

5.3 后代 jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个div 元素的所有直接子元素：

$("#div1").children().css("border","solid 3px grey");;

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 div 后代的所有类为cla1元素：

// 获取后代中 类为.cla1 的点
$("#div1").find(".cla1").css("border","solid 3px grey");;

下面的例子返回 div 的所有后代：

$("#div1").find("*").css("border","solid 3px grey");;

5.4 同胞 jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 h2 的所有同胞元素：

$("#d2").siblings().html("siblings")

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回h2的下一个同胞元素：

$("#d2").next().html("next");

nextAll() 方法返回被选元素的所有跟随的同胞元素。

下面的例子返回 h2 的所有跟随的同胞元素：

$("#d2").nextAll().html("nextAll");

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于d2与 d4 元素之间的所有同胞元素：

$("#d2").nextUntil("#d4").html("nextAll");

prev()方法取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
下面的例子返回 d2的下一个同胞元素

$("#d2").prev().html("prev");

prevAll() 方法查找当前元素之前所有的同辈元素

prevUntil() 方法查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

5.5 过滤 jQuery first() 方法

first() 方法返回被选元素的首个元素。

下面的例子选取首个div 元素内部的第一个 p 元素：

$("#d").children().first().html("first");

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个div 元素中的最后一个 p 元素：

$("#d").children().last().html("last");

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

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个p 元素（索引号 1）：

$("#d").children().eq(1).html("eq(1)");

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

下面的例子返回带有类名 “url” 的所有div 元素：

$("#d").children().filter("#url").html("filter");

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回除id为 “#d4” 的所有p元素：

$("#d").children().not("#d4").html("not");

https://www.94xh.com/学习网站

六、jQuery AJAX

6.1 jQuery AJAX简介

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

6.2 get和post方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){
 $.get("LoginServlet",{username:username,password:password},function (data) {// 处理服务正常返回的数据
                alert("服务端正常数据");
                // 如果使用这样方式能捕获服务端错误，但是不能给我转json,需要手动
                var  response = JSON.parse(data);
                alert(data);
                alert("message:"+response.message);
                alert("status:"+response.status);
                $("#message").text(response.message);
            }).fail(function () {
                alert("服务端错误");
            });
});

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

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

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
    $.post("LoginServlet",{username:username,password:password},function (data) {// 处理服务正常返回的数据
                alert("服务端正常数据");
                // 如果使用这样方式能捕获服务端错误，但是不能给我转json,需要手动
                var  response = JSON.parse(data);
                alert(data);
                alert("message:"+response.message);
                alert("status:"+response.status);
                $("#message").text(response.message);
            }).fail(function () {
                alert("服务端错误");
            });
});

6.3 ajax()方法

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $jQuery - 图4$ .ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax()可以不带任何参数直接使用

 // 异步请求数据
            $.ajax({
                url:"LoginServlet",
                type:"get",  // post
                // data 可以式js 对象
               //1.方式 data:{username:username,password:password},
               //2.方式 data:'username='+username+"&password="+password,
                // 3.方式 上传form表单
               data:$("#form").serialize(),
                success:function (data) {  //服务器成功返回的数据
                    alert(data);
                    alert("message:"+data.message);
                    alert("status:"+data.status);
                    $("#message").text(data.message);
                },
                error:function (data) {// 服务器返回失败的数据
                    alert(data);
                },
                //ajax 会将服务器返回的json字符串-----》js对象
                dataType:"json"
            });