jQuery

1. jQuery是什么？

jQuery 是一个 JavaScript 库。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

向页面添加 jQuery库

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

注意：要写在 head 标签中间

2.jQuery语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

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

示例：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

3.jQuery 选择器

语法	描述
$(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" 的元素

4.jQuery 事件

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

jQuery HTML

5.jQuery - 获得内容和属性

获得内容

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

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

实例：

 <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                alert("Text:" + $("#test").text());
            });
            $("#btn2").click(function () {
                alert("HTML:" + $("#test").html());
            });
            $("button").click(function () {
                alert("value:" + $("#test1").val());
            });
        });
    </script>
</head>

<body>
    <p id="test">这是段落中的<b>粗体</b>文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
    <p>姓名：
        <input type="text" id="test1" value="米老鼠">
    </p>
    <button>显示值</button>
</body>

获取属性 - attr()

实例：

<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert( $("#w3s").attr("href"));
            });
        });
    </script>
</head>
<body>
<p> <a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

6.jQuery - 设置内容和属性

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

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

<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#test1").text("hello world!")
            });
             $("#btn2").click(function () {
               $("#test2").html("<p>hello world!</p>")
            });
             $("#btn3").click(function () {
                $("#test3").val("hello world!")
            });
        });
    </script>
</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field:
    <input type="text" id="test3" value="Mickey Mouse">
</p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>

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

 <script>
        $(document).ready(function () {
            $("#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 + ")";
                 });
            });
            
        });
    </script>
</head>
<body>
<p id="test1">这是
    <b>粗体</b>文本。</p>
<p id="test2">这是另一段
    <b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>

设置属性 - attr()

  <script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#w3s").attr("href", "http://www.w3school.com.cn/jquery");
            });
        });
    </script>
</head>
<body>
    <p>
        <a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a>
    </p>
    <button>改变 href 值</button>
    <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>

attr() 也可以同时设置多个属性

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

7.jQuery - 添加元素

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

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

$("p").append("Some appended text.");

8.jQuery - 删除元素

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

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

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

9.jQuery 操作 CSS

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

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

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

10.jQuery - css() 方法

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

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

11.jQuery - 尺寸

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

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

指定 div 的宽度和高度

$("button").click(function(){
  $("#div1").width(500).height(500);
});

jQuery 遍历

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

图片.png

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

1.jQuery 遍历 - 祖先

parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

2.jQuery 遍历 - 后代

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

$(document).ready(function(){
$("div").find("*");
});

3.jQuery 遍历 - 同胞

siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已

4.jQuery 遍历 - 过滤

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

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

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

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

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

$(document).ready(function(){
  $("p").filter(".intro");
});

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

5.jQery 动画

’jQuery animate()方法用于创建自定义动画。

语法：
$(selector).animate({params},speed,callback)

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

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

原图：

image.png

点击开始动画后：