JQuery

一、什么是JQuery

jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。

二、语法

$(selector).action();
  • 美元符号 $ 定义 jQuery。
  • 选择符(selector)“查询”和“查找” HTML 元素。
  • jQuery 的 action() 执行对元素的操作。

在 jQuery 库中 $ 符号就是 jQuery 的一个简写形式

例如 $("#syl")jQuery("#syl") 是等价的

$.ajax和 jQuery.ajax是等价的

如果没有特别说明,程序中的 $ 符号都是 jQuery 的一个简写形式。

2.1文档就绪函数

所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

});
// 可以简写成

$(funciton(){

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。

2.2DOM对象与JQuery对象相互转换

在讲解 jQuery 对象和 DOM 对象之间的相互转换之前,我们先约定好定义变量的风格,如果获取的是 jQuery 对象,那么我们在变量前面加上 $ 符号,例如:

var $test = jQuery 对象;

如果获取的是 DOM 对象:

var test = DOM 对象;
  • jQuery 对象转换为 DOM 对象
    • [index] jQuery 对象是一个类似数组的对象,可以通过 [index] 的方法得到对应的 DOM 对象
    var cr =('#cr'); //jQuery 对象
    var cr = $cr[0]; //DOM 对象
    
    • 通过 get(index) 方法得到相应的 DOM 对象
    var cr =('#cr'); //jQuery 对象
    var cr = $cr.get(0); //DOM 对象
    
  • DOM 对象转换为 jQuery 对象
    • 对于一个 DOM 对象,只需要用 $() 把 DOM 对象包装起来,就可以获得一个 jQuery 对象了

例子:

  • DOM 方式判断复选框是否被选中
    <html>
    <head>
      <meta charset="utf-8" />
      <title></title>
      <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
      <input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label>
      <script type="text/javascript">
        //等待dom元素加载完毕
        (document).ready(function () {
          varcr = ('#cr'); //jQuery对象
          var cr =cr[0]; //DOM对象,或者cr.get(0)cr.click(function () {
            if (cr.checked) {
              //DOM方式判断
              alert('你已同意本协议');
            }
          });
        });
      </script>
    </body>
    </html>
    
  • jQuery 方式判断复选框是否被选中
    <html>
    <head>
      <meta charset="utf-8" />
      <title></title>
      <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
      <input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label>
      <script type="text/javascript">
        //等待dom元素加载完毕
        (document).ready(function () {
          varcr = ('#cr');cr.click(function () {
            if ($cr.is(':checked')) {
              alert('你已同意本协议');
            }
          });
        });
      </script>
    </body>
    </html>
    

三、概念解析

3.1DOM对象

DOM (Document Object Model)对象,也就是我们经常说的文档对象模型,每一份 DOM 都可以表示成一棵 DOM 树:

比如这样的一段代码:

<h1></h1>
<p></p>
<ul>
  <li></li>
</ul>

h1,p,ul 以及 li 标签都是 DOM 元素节点,我们可以通过 JavaScript 中的 document.getElementById()document.getElementsByTagName() 等来获取元素节点,像这样获取的 DOM 元素就是 DOM 对象,DOM 对象可以使用 JavaScript 中的方法,比如:

var domObj = document.getElementById('id'); //获取DOM对象
var objHtml = domObj.innerHTML; //使用JavaScript中的属性innerHTML

3.2JQuery对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。

$('#syl').html(); //获取id为syl的元素内的html代码,html()是jQuery中的方法

这段代码等同于:

document.getElementById('syl').innerHTML;

在 jQuery 对象中无法使用 DOM 对象中的任何方法,例如 $("#syl").innerHTML; 之类的写法是错的,可以使用 $("#syl").html();

之类的 jQuery 方法来代替,同样的道理,DOM 对象也不能使用 jQuery 里的方法,例如:document.getElementById("syl").html();也是会报错的。

#id 作为选择符取得的是 jQuery对象而并非 document.getElementById("id");所得到的DOM 对象两者并不等价

四、选择器

  • 通过使用 jQuery 选择器,我们可以快速的找到目标 DOM 元素,然后对它们进行一系列操作。
  • jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。
  • jQuery 中所有选择器都以美元符号开头:$()

例子:

​ 获取一个JQuery对象

<script type="text/javascript">
    $('#syl').css('color', 'red');
</script>

这种写法即使没有对应元素也不会报错

4.1根据JQuery对象判断元素是否存在

但要注意,由于这种方法获取的永远是一个对象所以不能用这个方法判断元素是否存在

应该根据获取到元素的长度来判断,代码如下所示:

if ($('#syl').length > 0) {
}

或者转化成 DOM 对象来判断,代码如下:

if ($('#syl')[0]) {
}

4.2基本选择器

最常用的选择器,也是最简单的选择器,它通过元素 id、class 和 标签名等来查找 DOM 元素。

  1. ID Selector ("#id") 选择一个具有给定 id 属性的单个元素

    例子:

    选择 id 为 demo 的元素,并为此元素设置长、宽、背景色。

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div id="demo"></div>
    
       <script type="text/javascript">
         (document).ready(function () {('#demo').css({
             width: '100px',
             height: '100px',
             'background-color': 'red',
           });
         });
       </script>
     </body>
    </html>
    
  2. Class Selector (".class") 选择给定样式类名的所有元素

    例子:

    选择 class 为 demo 的元素,并为此元素设置长、宽、背景色。

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div class="demo"></div>
    
       <script type="text/javascript">
         (document).ready(function () {('.demo').css({
             width: '100px',
             height: '100px',
             'background-color': 'red',
           });
         });
       </script>
     </body>
    </html>
    
  3. Element Selector ("element") 根据给定(html)标记名称选择所有的元素

    例子:

    选择所有 div 元素,并为所有元素设置长、宽、背景色。

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div>shiyanlou1</div>
       <div>shiyanlou2</div>
    
       <script type="text/javascript">
         (document).ready(function () {('div').css({
             width: '100px',
             height: '100px',
             'background-color': 'red',
           });
         });
       </script>
     </body>
    </html>
    
  4. All Selector ("*") 选择所有元素

    选择页面所有元素,包括 body。

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div>shiyanlou1</div>
       <div>shiyanlou2</div>
    
       <script type="text/javascript">
         (document).ready(function () {('*').css({
             width: '100px',
             height: '100px',
             'background-color': 'red',
           });
         });
       </script>
     </body>
    </html>
    
  5. Multiple Selector ("selector1, selector2, selectorN") 将每一个选择器匹配到的元素合并后一起返回

    例子:

    用 “,” 分隔开然后再拼成一个选择器字符串,同时选择多个匹配的选择器的内容 选择页面所有元素,并设置字体大小。

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div>shiyanlou</div>
       <a href="https://www.lanqiao.cn/">https://www.lanqiao.cn/</a>
    
       <script type="text/javascript">
         (document).ready(function () {('div,a').css({
             'font-size': '30px',
           });
         });
       </script>
     </body>
    </html>
    

4.3层次选择器

  1. Descendant Selector ("ancestor descendant")选中给定的祖先元素的 ancestor 中的所有 descendant 元素(后代元素)。

    例子:

    选择类名为 demo 的元素的所有后代 a 元素,并设置字体大小。

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div class="demo">
         <a href="https://www.lanqiao.cn/">shiyanlou</a>
         <div class="innerDemo">
           <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
         </div>
       </div>
       <script type="text/javascript">
         (document).ready(function () {('.demo a').css({
             'font-size': '30px',
           });
         });
       </script>
     </body>
    </html>
    
  2. Child Selector ("parent > child")选择所有指定“parent”元素中指定的"child"的直接子元素。

    注:选择的是子元素,注意跟后代元素的区别。

    例子:

    选择类名为 demo 的子元素 a,并设置字体大小。(此时只有第一个 a 元素的字体会改变)

    <!DOCTYPE html>
    <html>
       <head>
           <meta charset="utf-8" />
           <title></title>
           <script type="text/javascript" src="jquery-3.3.1.js"></script>
       </head>
       <body>
           <div class="demo">
               <a href="https://www.lanqiao.cn/">shiyanlou</a>
               <div class="innerDemo">
                   <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
               </div>
           </div>
           <script type="text/javascript">
               (document).ready(function () {('.demo>a').css({
                       'font-size': '30px',
                   });
               });
           </script>
       </body>
    </html>
    
    
  3. Next Adjacent Selector ("prev + next")prev 和 next 是两个同级别的元素,选中在 prev 元素后面的 next 元素。

    例子:

    选中 class 为 demo 后面的 a 元素,并设置字体大小。

    <!DOCTYPE html>
    <html>
       <head>
           <meta charset="utf-8" />
           <title></title>
           <script type="text/javascript" src="jquery-3.3.1.js"></script>
       </head>
       <body>
           <div class="demo">
               <div class="demo">shiyanlou</div>
               <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
           </div>
           <script type="text/javascript">
               (document).ready(function () {('.demo+a').css({
                       'font-size': '30px',
                   });
               });
           </script>
       </body>
    </html>
    
  4. Next Siblings Selector ("prev ~ siblings")匹配 “prev” 元素之后的所有 兄弟元素。

    例子:

    选中 class 为 demo 的 div 元素后面的所有 a 同辈元素,并设置字体大小。

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div class="demo">demo</div>
       <a href="https://www.lanqiao.cn/">shiyanlou</a>
       <a href="https://www.lanqiao.cn/">SHIYANLOU</a>
       <script type="text/javascript">
         (document).ready(function () {('.demo~a').css({
             'font-size': '30px',
           });
         });
       </script>
     </body>
    </html>
    

    在层次选择器中,第 1 个和第 2 个选择器比较常用,而后面两个因为在 jQuery 里面可以用更加简单的方法来代替,所以使用的几率相对会少些:

  • 可以使用 next() 方法来代替 $('prev+next') 选择器。比如 $(".one + div);$(".one").next("div"); 是等价的。
  • 可以使用 nextAll() 方法来代替 $('prevsiblings') 选择器。比如 $("#prev~~div");$("#prev").nextAll("div"); 是等价的。

    简单提一下后面要讲解的 siblings() 方法,$("#prev~div"); 选择器只能选择 “prev” 元素后面的同辈 div 元素,而 siblings() 方法与前后位置无关,只要是同辈节点都能匹配。

    <!DOCTYPE html>
    <html>
       <head>
           <meta charset="utf-8">
           <title></title>
           <script type="text/javascript" src="jquery-3.3.1.js"></script>
       </head>
       <body>
           <div id="">
    
           </div>
           <div id="prev">
    
           </div>
           <div id="">
    
           </div>
           <script type="text/javascript">
               (document).ready(function() {
                   //选取#prev之后的所有同辈div元素("#prev~div").css("background", "#bbffaa");
                   //同上
                   ("#prev").nextAll("div").css("background", "#bbffaa");
                   //选取#prev所有的同辈div元素,无论前后位置("#prev").siblings("div").css({
                       "width": "100px",
                       "height": "100px",
                       "border": "1px solid red"
                   })
               });
           </script>
       </body>
    </html>
    

4.4表单选择器

  • : input 选取所有的 < input> 、< textarea>、< select>和 < button>元素。
  • : text 选取所有的单行文本框。
  • : password 选取所有的密码框
  • : radio 选取所有的单选框
  • : checkbox 选取所有的多选框
  • : submit 选取所有的提交按钮
  • : image 选取所有的图像
  • : reset 选取所有的重置按钮
  • : button 选取所有的按钮
  • : file 选取所有的上传域
  • : hidden 选取所有不可见元素

示例:选取所有的 input 元素,并设置高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <input text="text" />
    <input text="textaera" />
    <script type="text/javascript">
      (document).ready(function () {(':input').css({
          height: '300px',
        });
      });
    </script>
  </body>
</html>

$("#form1 :input" )与$("#form1input")的区别

  1. $("#form1 :input" )表示id为form1下的所有< input>,< textarea>, < select> 和 < button> 元素
  2. $("#form1 input")仅仅匹配< /span>id为form1下的所有< input type=""...之类元素

五、DOM操作

5.1查找节点

5.1.1查找元素节点

var li =('ol li:eq(0)'); //获取< ol>里第一个< li>节点
var li_txt = $li.text(); //获取第一个<li>元素节点的文本内容
alert(li_txt); //打印文本内容

5.1.2查找属性节点

利用 jQuery 选择器查找到需要的元素之后,就可以使用 attr() 方法来获取它的各种属性的值。

attr() 方法的参数可以是一个,也可以是两个。

当参数是一个时,则是要查询的属性的名字,比如:

var para =('p'); //获取<p>节点
var p_txt = $para.attr('title'); //获取<p>元素节点属性title
alert(p_txt); //打印title属性值

5.2创建节点

5.2.1创建元素节点

创建元素节点可以用 $(html) 函数。

$(html) 方法会根据传入的 HTML 标记字符串,创建一个 DOM 对象,并将这个 DOM 对象包装成一个 jQuery 对象后返回。

首先创建一个 li 元素如下所示:

var li =('<li></li>'); //创建一个<li>元素

当然上面只是创建出来了,要使用的话,还需要使用 append() 等方法将该元素插入文档中(下面会讲插入节点)。

5.2.2创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用 append() 等方法将它们添加到文档中就可以了,例如:

var li =('<li>syl</li>'); //创建一个<li>元素,包括元素节点和文本节点,“syl”就是创建的文本节点

5.2.3创建属性节点

创建属性节点和创建文本节点类似,也是直接在创建元素节点时一起创建,比如:

var li =("<li title='syl'>syl</li>"); //创建一个<li>元素,包括元素节点和文本节点和属性节点,“syl”就是创建的文本节点,title='syl' 就是创建的属性节点

示例:将新建的 li 元素插入到 ul 中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
    </head>
    <body>
        <ul>
            <li>blue</li>
            <li>white</li>
            <li>red</li>
        </ul>
        <script type="text/javascript">
            (document).ready(function () {
                var li_obj =('<li>黄色</li>');
                $('ul').append(li_obj);
            });
        </script>
    </body>
</html>

5.3插入节点

DOM 插入现有元素内

  • .append() 在每个匹配元素里面的末尾处插入参数内容。

  • .appendTo()匹配的元素插入到目标元素最后面

  • .html() 获取集合中第一个匹配元素的 HTML 内容 设置每一个匹配元素的 html 内容。

    • .html() 获取集合中第一个匹配元素的 HTML 内容 或 设置每一个匹配元素的 html 内容。类似于我们原生 JavaScript 中的 innerHTML 属性。

    • 示例:获取 div 中的 HTML 内容

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
      </head>
      <body>
        <div><p>实验楼</p></div>
        <script type="text/javascript">
          (document).ready(function () {
            var div_html =('div').html(); //获取<div>元素的HTML代码
            alert(div_html); //打印<div>元素的HTML代码
          });
        </script>
      </body>
    </html>
    

  • .prepend() 将参数内容插入到每个匹配元素的前面(元素内部)。

  • .prependTo() 将所有元素插入到目标前面(元素内)。

  • .text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

    • .text() 得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。类似于 JavaScript 中的 innerText 属性。

    • 示例:获取 div 元素的文本内容

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
      </head>
      <body>
        <div>实验楼</div>
        <script type="text/javascript">
          (document).ready(function () {
            var p_text =('div').text();
            alert(p_text);
          });
        </script>
      </body>
    </html>
    

    运行效果为:

DOM 插入现有元素外

  • .after() 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。
  • .before() 根据参数设定,在匹配元素的前面插入内容。
  • .insertAfter() 在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。
  • .insertBefore() 在目标元素前面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

插入节点示例:将新建的 li 元素插入到 ul 中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li>white</li>
      <li>red</li>
    </ul>
    <script type="text/javascript">
      (document).ready(function () {('<li>yellow</li>').appendTo('ul');
      });
    </script>
  </body>
</html>

运行效果为:

移动节点示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <ul>
      <li>blue</li>
      <li>white</li>
      <li>red</li>
      <h1>I like</h1>
    </ul>
    <script type="text/javascript">
      (document).ready(function () {
        varli = ('ul li:eq(1)'); //获取<ul>节点中的第2个<li>元素节点
        varh1 = ('h1'); //获取<h1>节点h1.insertBefore($li); //移动节点
      });
    </script>
  </body>
</html>

运行效果为:

5.4设置获取HTML,文本和值

获取HTML和文本可以看上一节中的HTML方法和TEXT方法

获取值的方法如下:

.val() 方法主要用于获取表单元素的值,比如 input, select 和 textarea。对于 <select multiple="multiple"> 元素, .val() 方法返回一个包含每个选择项的数组,如果没有选择性被选中,它返回 null。

示例:设置输入框的值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
  </head>
  <body>
    <input type="text" value="" />
    <script type="text/javascript">
      (document).ready(function () {('input').val('shiyanlou');
      });
    </script>
  </body>
</html>

运行效果为:

5.5遍历节点

遍历节点有五种方法

  1. .children() 方法

    获得匹配元素集合中每个元素的子元素,选择器选择性筛选。

    示例:获取 ul 的子元素 li 的文本值

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <ul>
         <li>blue</li>
         <li>white</li>
         <li>red</li>
       </ul>
       <script type="text/javascript">
         (document).ready(function () {
           var ul_chlildList =('ul').children();
           for (var i = 0, len = ul_chlildList.length; i < len; i++) {
             alert(ul_chlildList[i].innerHTML);
           }
         });
       </script>
     </body>
    </html>
    

    运行效果为:

  2. .next() 方法

    取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

    示例:获取 div 后面紧邻的同辈元素

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div>shiyanlou</div>
       <p>SHIYANLOU</p>
       <script type="text/javascript">
         (document).ready(function () {
           var div_next =('div').next();
           alert(div_next.text());
         });
       </script>
     </body>
    </html>
    

    运行效果为:

  3. .prev()

    取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。

    如果提供的 jQuery 代表了一组 DOM 元素,.prev() 方法通过这些元素组合传递到方法构造一个新的 jQuery 对象。

    该方法选择性地接受同一类型选择器表达式,我们可以传递给 $() 函数。如果提供了选择器表达式,那么会先测试该元素是否满足匹配的选择器表达式。

    示例:获取 p 前面紧邻的同辈元素

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div>shiyanlou</div>
       <p>SHIYANLOU</p>
       <script type="text/javascript">
         (document).ready(function () {
           var p_prev =('p').prev();
           alert(p_prev.text());
         });
       </script>
     </body>
    </html>
    

    运行效果为:

  4. .siblings() 方法

    获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。

    如果提供的 jQuery 代表了一组 DOM 元素,.siblings() 方法通过这些元素组合传递到方法构造一个新的 jQuery 对象。

    该方法选择性地接受同一类型选择器表达式,我们可以传递给 $() 函数。如果提供了选择器表达式,那么会先测试该元素是否满足匹配的选择器表达式。

    示例:改变 p 元素前后所有的同辈元素的颜色

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div>shiyanlou</div>
       <p>SHIYANLOU-P</p>
       <div>SHIYANLOU</div>
       <script type="text/javascript">
         (document).ready(function () {('p').siblings().css('background-color', 'red');
         });
       </script>
     </body>
    </html>
    

    运行效果为:

  5. .parent() 方法

    取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器。

    如果提供的 jQuery 代表了一组 DOM 元素,.parent() 方法允许我们能够在 DOM 树中搜索到这些元素的父级元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象。

    .parents().parent() 方法是相似的,但后者只是进行了一个单级的 DOM 树查找(注:也就是只查找一层,直接的父元素,而不是更加上级的祖先元素)。此外,$( "html" ).parent() 方法返回一个包含 document 的集合,而 $( "html" ).parents() 返回一个空集合。

    该方法还可以接受一个可选的选择器表达式,该选择器表达式可以是任何可传给 $() 函数的选择器表达式。如果提供了选择器表达式,那么会先测试该元素是否满足匹配的选择器表达式。

    示例:获取 p 元素的父级元素的 class

    <!DOCTYPE html>
    <html>
     <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="jquery-3.3.1.js"></script>
     </head>
     <body>
       <div class="demo">
         <p>SHIYANLOU-P</p>
       </div>
       <script type="text/javascript">
         var p_pa = $('p').parent();
         alert(p_pa.attr('class'));
       </script>
     </body>
    </html>
    

    运行效果为:

    另外还有两个方法 closest()parents() 方法大家可以了解一下:

  • closest() 方法从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。也就是说首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找父级元素,逐级向上直到找到匹配选择器的元素,如果什么都没找到则返回一个空的 jQuery 对象。
  • parents() 获得集合中每个匹配元素的祖先元素。查找方式和 parent() 方法类似,不同点在于,当它找到第一个父节点时并没有停止查找,而是继续查找,最后返回多个父节点。

六、AJAX

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。它并不是一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体.

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示,其最大的特点就是异步。


醉后不知天在水,满船清梦压星河