jQuery 第一阶段 学习使用总结

时间:2023-12-11 16:42:50

  jQuery 是一个 JavaScript 库,位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。在平常的使用过程中,会常常与JavaScript,配合css使用,能够令网页产生很好的动态效果实现。

  通常的,可以通过下面的标记把 jQuery 添加到网页中:

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

调用:

  其中最基本的,是jQuery 对于css的调用,可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

	$(this).hide()        //隐藏当前的 HTML 元素。
$("p").hide() //隐藏所有 <p> 元素。
$(".test").hide() //隐藏所有 class="test" 的元素。
$("#test").hide() //隐藏所有 id="test" 的元素

  jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

  jQuery 元素选择器: jQuery 使用 CSS 选择器来选取 HTML 元素。

        $("p") 选取 <p> 元素。
        $("p.intro") 选取所有 class="intro" 的 <p> 元素。
        $("p#demo") 选取所有 id="demo" 的 <p> 元素。

  jQuery 属性选择器: jQuery 使用 XPath 表达式来选择带有给定属性的元素。

        $("[href]")           //选取所有带有 href 属性的元素。
        $("[href='#']") //选取所有带有 href 值等于 "#" 的元素。
        $("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素。
        $("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。         $("div#intro .head") //id="intro" 的 <div> 元素中的所有 class="head" 的元素
        $("ul li:first") //每个 <ul> 的第一个 <li> 元素

  

效果:

  通过 jQuery,可以实现各种效果:

  显示/隐藏:
    使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,语法:

      $(selector).hide(speed,callback); //可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
      $(selector).show(speed,callback); //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    使用 toggle() 方法可以切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素:

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

  淡入/淡出:

      $(selector).fadeIn(speed,callback); //用于淡入已隐藏的元素。
      $(selector).fadeOut(speed,callback); //用于淡出可见元素。
      $(selector).fadeToggle(speed,callback); //可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
      $(selector).fadeTo(speed,opacity,callback); //允许渐变为给定的不透明度(值介于 0 与 1 之间)。
      //opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

  滑动:

      $(selector).slideDown(speed,callback); //用于向下滑动元素。
      $(selector).slideUp(speed,callback);
      $(selector).slideToggle(speed,callback);

  动画:
    animate() 方法用于创建自定义动画

      $(selector).animate({params},speed,callback); //必需的 params 参数定义形成动画的 CSS 属性。
      $("button").click(function(){
        $("div").animate({
          left:'250px',
          opacity:'0.5',
          height:'150px',
          width:'150px'
        });
      });

  stop() 方法:

    用于在动画或效果完成前对它们进行停止,它适用于所有 jQuery 效果函数

        $(selector).stop(stopAll,goToEnd); //可选的 stopAll 参数规定是否应该清除动画队列。
                          //默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
                          //可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

对DOM操作:

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

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

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

      $("button").click(function(){
        alert($("#w3s").attr("href"));
      });

  append() - 在被选元素的结尾插入内容
  prepend() - 在被选元素的开头插入内容

      $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
      });       var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
      var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素       var txt3=document.createElement("p");
      txt3.innerHTML="Text."; // 通过 DOM 来创建文本
      $("body").append(txt1,txt2,txt3); // 追加新元素

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

      $("img").before("<b>Before</b>");
      $("img").after("<i>After</i>");

  remove() 方法删除被选元素及其子元素。remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

    删除 class="italic" 的所有 <p> 元素:

      $("p").remove(".italic");

  若干进行 CSS 操作的方法:

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

遍历:

  jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。通过 jQuery 遍历,能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

jQuery 第一阶段 学习使用总结

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

向上遍历 DOM 树:

        parent()                                  //返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
        parents() //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
        parentsUntil() //返回介于两个给定元素之间的所有祖先元素。中间可包含数个元素

  

向下遍历 DOM 树:

        children()                                //返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
        find() //返回被选元素的后代元素,一路向下直到最后一个后代。

  

水平遍历DOM树:

siblings() //返回被选元素的所有同胞*元素。 $("h2").siblings("p");
next() //返回被选元素的下一个同胞元素。该方法只返回一个元素。 $("h2").next();
nextAll() //返回被选元素的所有跟随的同胞元素。 $("h2").nextAll();
nextUntil() //返回介于两个给定参数之间的所有跟随的同胞元素。 $("h2").nextUntil("h6");
prev()
prevAll()
prevUntil()

  

过滤:

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

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

first()     返回被选元素的首个元素                                                 $("div p").first();        选取首个 <div> 元素内部的第一个 <p> 元素
last() 返回被选元素的最后一个元素 $("div p").last(); 选择最后一个 <div> 元素中的最后一个 <p> 元素
eq() 返回被选元素中带有指定索引号的元素。
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1        $("p").eq(1); 选取第二个 <p> 元素(索引号 1)
filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
                                   $("p").filter(".intro"); 返回带有类名 "intro" 的所有 <p> 元素
not() 返回不匹配标准的所有元素。                   $("p").not(".intro"); 返回不带有类名 "intro" 的所有 <p> 元素