jQuery学习

jQuery

jQuery简介

jQuery是一个javascript函数库
jQuery是一个轻量级的“写得少，做得多”的javascript库
jQuery库的功能：
- HTML元素选取
- HTML元素操作
- css操作
- HTML事件函数
- javascript特效与动画
- HTML DOM 遍历与修改
- AJAX
- Utilities（公用事业; 实用; 效用; 有用; 实用程序; 公用程序;）

提示： jQuery还提供了大量的插件

jQuery使用（安装）

下载jQuery.js

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

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

jQuery库是一个javascript文件，可以使用HTML中的<script>标签引用它

优点：

行为分离易于维护

例如：

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

使用cdn载入jQuery

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

bootstrap中文网开源免费cdn服务

网址：https://www.bootcdn.cn/

例如：

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

jQuery语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）

jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行操作

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

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

例如：

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

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

$("p .test").hide() //- 隐藏所有 class="test" 的段落

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

文档就绪事件

为了文档在完全加载之前运行jQuery代码， jQuery 函数位于一个 document ready 函数中：

 $(document).ready(function(){

   // 开始写 jQuery 代码...

 }); 

//简写

 $(function(){

   // 开始写 jQuery 代码...

 }); 

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

jQuery选择器

jQuery选择器允许你对HTML元素组或单个元素进行操作

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

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

语法：$('元素名')

例如：选取p元素:$('p')

#id选择器

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

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

语法：$('# id名')

例如：选取id为test的元素：$('#test')

.class选择器

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

语法：$('. class名')

例如：选取class为test的元素：$('.class')

css 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

把所有 p 元素的背景颜色更改为红色：

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

其他选择器

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

jQuery事件

jQuery是为事件处理特别设计的

事件简介

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

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

例如：

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

常见的DOM事件：

click：点击事

$("p").click(function(){        
  // action goes here!!        
});

鼠标事件	键盘事件	表单事件	文档/窗口事件
click：点击事件	keypress	submit	load
dblclick：双击事件	keydown	change	resize
mouseenter：鼠标指针穿过元素	keyup	focus：获取焦点	scroll
mouseleave：鼠标指针离开元素		blur：失去焦点	unload

jQuery效果

隐藏与显示

隐藏：

语法：$(selector).hide(speed,callback);

显示：

语法：$(selector).show(speed,callback);

显示被隐藏的元素，并隐藏已显示的元素：

语法：$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

例子：

  <script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
  <h1>jQuery隐藏于显示</h1>
  <div id="test">
  </div>
  <p>丁会想</p>
  <script>
    $(document).ready(function(){
      $('p').click(function(){
        $('p').hide();
      });
      $('#test').click(function(){
        $('p').show();
      });
      $('h1').click(function(){
        $('p').toggle();
      });
    });
  </script>

淡入淡出

在在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()

fadeIn()方法:用于淡入已隐藏的元素

语法：$(seletor).fadeIn(speed,callback);

fadeOut()方法：用于淡出可见的元素

语法：$(seletor).fadeOut(speed,callback);

fadeToggle()：jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

语法：$(seletor).fadeToggle(speed,callback);
fadeTo()：jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

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

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

例子：

<body>
  <button id="qwe">淡入</button>
  <button id="wer">淡出</button>
  <button id="ert">淡入淡出</button>
  <button id="rty">透明</button>
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <script>
  $(document).ready(function(){
    $('#qwe').click(function(){
      $('div').fadeOut(2000);
    });
    $('#wer').click(function(){
      $('div').fadeIn(2000);
    });
    $('#ert').click(function(){
      $('div').fadeToggle(2000);
    });
    $('#rty').click(function(){
      $('div').fadeTo(2000,0.5);
    });
  });
  </script>

滑动

jQuery 滑动方法可使元素上下滑动。

滑动方法：

slideDown(): jQuery slideDown（）方法用于向下滑动元素

语法：$(selector).slideDown(speed,callback);

slideUp: jQuery slideUp()方法用于向上滑动元素

语法：$(seletor).slideUp(speed,callback);

slideToggle(): jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

语法：$(seletor).slideToggle(speed,callback);

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

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

<body>
  <div id="first">点我滑出</div>
  <div id="second"></div>
  <script>
    $(document).ready(function(){
      // $('#first').click(function(){
      //   // 滑出
      //   $('#second').slideDown(2000);
      // });
      // $('#second').click(function(){
      //   // 滑入
      //   $('#second').slideUp(2000);
      // });
      $('#first').click(function(){
        // 滑出滑入
        $('#second').slideToggle(2000);
      });
    });
  </script>

动画

在使用jQuery动画时，你可能想要实现更加丰富的效果，那么你可以通过使用 jQuery animate() 方法自定义动画来达到目的。jQuery animate() 方法允许您创建自定义的动画。

注意： 实例运行过一次后，需刷新页面方可再次运行实例

可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

动画方法：

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

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

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

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

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

注意： 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！在 jQuery 的animate()方法中，第一个参数是一个必须参数，表示一个CSS属性和值的对象。

<body>
  <button id="first">点击开始</button>
  <div class="ani"></div>
  <script>
    $(document).ready(function(){
      $('#first').click(function(){
        $('.ani').animate({
          left:'200px',
          width:'200px',
          height:'200px'   
        },2000);
      })
    })
  </script>
</body>

使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

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

使用预定值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

<body>
  <!-- 动画  使用预定义：您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： -->
  <button id="first">点击开始</button>
  <div class="ani"></div>
  <script>
    $(document).ready(function(){
      $('#first').click(function(){
        $('.ani').animate({
          //预定义值
          height:'toggle'  
        },2000);
      })
    })
  </script>
</body>

使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

<body>
  <!-- 动画 队列功能 这意味着如果您在彼此之后编写多个 animate() 调用，
    jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。： -->
  <button id="first">点击开始</button>
  <div class="ani"></div>
  <script>
    $(document).ready(function () {
      $('#first').click(function () {
        var div = $(".ani");
        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");
      })
    })
  </script>

停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

stop()方法：

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法： $(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

      <!-- 动画  使用多个值 ：生成动画的过程中可同时使用多个属性：-->
      <button id="first">点击开始</button>
      <button id="second">停止动画</button>
      <div class="ani"></div>
      
      <script>
        $(document).ready(function(){
          $('#first').click(function(){
            $('.ani').animate({
              left:'200px',
              width:'200px',
              height:'200px'   
            },2000);
          });
          // 停止动画
          $('#second').click(function(){
            $('.ani').stop();
          })
        })
      </script>

callback()方法

Callback 函数在当前动画 100% 完成之后执行。

提示：由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。

以下实例在隐藏效果完全实现后回调函数:

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});

以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

链接（chaining）

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

  <!-- 链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。 -->
  <p id="p1">W3Cschool教程!!</p>
  <button>点我</button>
  <script>
    // 链接技术
    $(document).ready(function () {
      $("button").click(function () {
        $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
      });
    });
  </script>

jQuery HTML

jQuery获取

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

jQuery DOM操作

DOM = Document Object Model （文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"

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

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

jQuery获取内容和属性

获取内容

用于DOM操作的jQuery方法：

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

例如：

  <!-- 使用jQuery获取文本与HTML -->
  <p id="test">这是段落中的<b>粗体</b>文本</p>
  <button class="first">获取text</button>
  <button class="second">获取html</button>
  <script>
    $(document).ready(function(){
      // 获取文本内容
      $('.first').click(function(){
        alert('text'+$('#test').text());
      });
      // 获取内容（包括HTML标记）
      $('.second').click(function(){
        alert('html'+$('#test').html());
      })
    })

获取属性

attr（）方法

jQuery attr() 方法用于获取属性值。

// 获取属性href
      $('.third').click(function(){
        alert('属性:'+ $('a').attr('href'));
      })

jQuery设置

设置内容与属性

设置内容

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

回调函数

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

$("#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 + ")"; 
  }); 
});

设置属性

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

改变（设置）链接中 href 属性的值：

$("button").click(function(){ 
  $("#w3s").attr("href","//www.w3cschool.cn/jquery"); 
});

attr() 方法也允许您同时设置多个属性。

$("button").click(function(){ 
  $("#w3s").attr({ 
    "href" : "//www.w3cschool.cn/jquery", 
    "title" : "jQuery 教程" 
  }); 
});

attr() 的回调函数

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

$("button").click(function(){ 
  $("#w3cschool").attr("href", function(i,origValue){ 
    return origValue + "/jquery"; 
  }); 
});

jQuery添加元素

通过 jQuery，可以很容易地添加新元素/内容。

添加新的HTML内容：
- append（）方法：在被选元素内部的结尾添加指定内容
语法：$(seletor).append('要添加的内容');
- prepend()方法：在被选元素内部的开头添加指定内容
语法：$(seletor).prepend('要添加的内容');
- after（）方法：在被选元素之后添加元素
语法：$(seletor).after('要添加的内容');
- before（）方法：在被选元素之前添加元素
语法：$(seletor).before('要添加的内容');

提示：在jQuery中，append/prepend 是在选择元素内部嵌入，而after/before 是在元素外面追加。

 <!-- 添加元素（内容） -->
  <p>原本存在的内容</p>
  <button class="btn1">点击添加新内容(后面)</button>
  <button class="btn2">点击添加新内容（前面）</button>
  <script>
    $(document).ready(function(){
      $('.btn1').click(function(){
        $('p').append('，这是新的内容（添加在后面）').after('<b>之前</b>');
      });
      $('.btn2').click(function(){
        $('p').prepend('这是新的内容（添加在前面）').before("<i>之后</i>");
      })
    })

添加若干新元素

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

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

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创

function appendText() 
{ 
var txt1="<p>Text.</p>";               // 使用 HTML 标签创建文本  
var txt2=$("<p></p>").text("Text.");   // 使用 jQuery 创建文本 
var txt3=document.createElement("p");   
txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM 
$("p").append(txt1,txt2,txt3);         // 追加新元素 
}

jQuery删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

方法：

remove()方法：删除被选元素（及其子元素）

empty（）方法：从被选元素中删除子元素

过滤被删除的元素：

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

  <!-- 删除元素 -->
  <div id="first">
    <p>dinghuixiang01</p>
    <p class="qwe">dinghuixiang02</p>
    <p>dinghuixiang03</p>
  </div>
  <button class="btn1">点击删除（empty）</button>
  <button class="btn2">点击删除（remove）</button>
  <button class="btn3">点击过滤</button>
  <script>
    $(document).ready(function(){
      // 删除所选元素的子元素
      $('.btn1').click(function(){
        $('#first').empty();
      });
      // 删除所选元素及其子元素
      $('.btn2').click(function(){
        $('#first').remove();
      });
      // 删除 class="qwe" 的所有 <p> 元素：
      $('.btn3').click(function(){
        $('p').remove('.qwe');
      })
    })

jQuery css类

通过 jQuery，可以很容易地对 CSS 元素进行操作

jQuery操作css

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

jQuery css（）方法

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

语法：css("propertyname","value");

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

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

jQuery尺寸

jQuery遍历

遍历简介

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

祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

遍历-祖先

parent():遍历上一级父元素

parent() 方法返回被选元素的直接父元素。
parents（）：遍历所有父元素，知道根元素（<html>）

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

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

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

遍历-后代

后代是子、孙、曾孙等等。

通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

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

该方法只会向下一级对 DOM 树进行遍历。
find():find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

遍历-同胞

同胞拥有相同的父元素。

通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

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

您也可以使用可选参数来过滤对同胞元素的搜索。
```
//返回属于 <h2> 的同胞元素的所有 <p> 元素：
$(document).ready(function(){
  $("h2").siblings("p");
});
```
next（）：next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll（）：nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil（）：nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
jQuery prev(), prevAll() & prevUntil() 方法：prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

遍历-过滤

作用：缩小搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

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

例子：

//选取首个 <div> 元素内部的第一个 <p> 元素：
$(document).ready(function(){
  $("div p").first();
});

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

例子：

//选取首个 <div> 元素内部的最后一个 <p> 元素：
$(document).ready(function(){
  $("div p").last();
});

eq（）方法：eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

下面的例子选取第二个 <p> 元素（索引号 1）：
```
$(document).ready(function(){
  $("p").eq(1);
});
```
filter()方法：filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

例子：

//返回带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
  $("p").filter(".intro");
});

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

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

//返回不带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
  $("p").not(".intro");
});