JQuery效果

1:jQuery hide() 和 show()方法

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

语法:

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

解释:

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

实例:

$("button").click(function(){
    $("p").hide(1000);//隐藏延迟(1000毫秒)
});

2:jQuery toggle()方法

使用 toggle() 方法来切换 hide() 和 show() 方法

显示被隐藏的元素,并隐藏已显示的元素:

语法:

$(selector).toggle(speed,callback);

解释:

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

实例:

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

3:jQuery fadeIn() 方法

使用 fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

解释:

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

实例:

$("button").click(function(){
     $("#div1").fadeIn();//隐藏元素淡入隐藏
     $("#div2").fadeIn("slow");//隐藏元素淡入隐藏
     $("#div3").fadeIn(3000);//隐藏元素3000毫秒后淡入隐藏
});

4:jQuery fadeOut() 方法

使用 fadeOut()用于淡出可见的元素。

语法:

$(selector).fadeOut(speed,callback);

解释:

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

实例:

$("button").click(function(){
     $("#div1").fadeOut();//隐藏元素淡出可见
     $("#div2").fadeOut("slow");//隐藏元素淡出可见
     $("#div3").fadeOut(3000);//隐藏元素3000毫秒后淡出可见
});

5:jQuery fadeToggle() 方法

使用 fadeOut()用于在 fadeIn() 与 fadeOut() 方法之间进行切换。

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

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

语法:

$(selector).fadeToggle(speed,callback);

解释:

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

实例:

$("button").click(function(){
     $("#div1").fadeToggle();//隐藏元素/显示元素
     $("#div2").fadeToggle("slow");//隐藏元素/显示元素
     $("#div3").fadeToggle(3000);//隐藏元素/显示元素(3000毫秒)
});

6:jQuery fadeTo() 方法

使用 fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

语法:

$(selector).fadeTo(speed,opacity,callback);

解释:

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。

实例:

$("button").click(function(){
     $("#div1").fadeTo("slow",0.15);//透明度为15%
     $("#div2").fadeTo("slow",0.4);//透明度为40%
     $("#div3").fadeTo("slow",0.7);//透明度为70%
});

7:jQuery slideDown() 方法

使用 slideDown()方法用于向下滑动元素。

语法:

$(selector).slideDown(speed,callback);

解释:

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是该函数完成后所执行的函数名称。

实例:

$("button").click(function(){
     $("#panel").slideDown();//向下滑动
});

8:jQuery slideUp() 方法

使用 slideDown()方法用于向上滑动元素。

语法:

$(selector).slideUp(speed,callback);

解释:

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是该函数完成后所执行的函数名称。

实例:

$("button").click(function(){
     $("#panel").slideUp();//向上滑动
});

9:jQuery slideToggle() 方法

使用 slideDown()方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

使用 slideDown()方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

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

语法:

$(selector).slideToggle(speed,callback);

解释:

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

实例:

$("button").click(function(){
     $("#panel").slideToggle();//向上/下滑动
});

10:jQuery 动画 - animate() 方法

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

语法:

$(selector).animate({params},speed,callback);

解释:

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

实例:

$("button").click(function(){
    $("div").animate({left:'250px'});//元素移动到左边,直到 left 属性等于 250 像素为止:
});

提示:

默认地,所有 HTML 元素都有一个静态位置,且无法移动。

如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

11:jQuery animate() - 操作多个属性

请注意,生成动画的过程中可同时使用多个属性:

语法:

$(selector).animate(属性1:“*”,属性2:“*”,属性3:“*”,);

实例:

$("button").click(function(){
    $("div").animate({
        left:'250px',//向左移动250px
        opacity:'0.5',//透明度50%
        height:'150px',//高变150px;
        width:'150px',//宽变为150px;
    });    
});

提示:

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

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

同时,色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

11-1:jQuery animate() - 使用相对值

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

语法:

$(selector).animate(属性1:“*”,属性2:“*”,属性3:“*”,);

实例:

$("button").click(function(){
    $("div").animate({
        left:'250px',//向左移动250px
        height:'+=150px',//高度增加150px
        width:'+=150px',//宽度增加变150px;
    });    
});

提示:

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

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

同时,色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

11-2:jQuery animate() - 使用预定义的值

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

语法:

$(selector).animate(属性1:“*”,属性2:“*”,属性3:“*”,);

实例:

$("button").click(function(){
    $("div").animate({
        height:'toggle'//高度从有变没循环
    });    
});

11-3:jQuery animate() - 使用队列功能

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

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

语法:

$(selector).animate(属性1:“*”,属性2:“*”,属性3:“*”,);

实例 1:

隐藏,如果您希望在彼此之后执行不同的动画,那么我们要利用队列功能:

$("button").click(function(){
    var div=$("div");
    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");  
});

实例 2:

下面的例子把 div元素移动到右边,然后增加文本的字号:

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

12:jQuery stop()方法

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

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

语法:

$(selector).stop(stopAll,goToEnd);

解释:

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。

实例:

下面的例子演示 stop() 方法,不带参数:

$("#stop").click(function(){
    $("#panel").stop();//元素移动到左边,直到 left 属性等于 250 像素为止:
});

实例:

下面的例子演示 stop() 方法,带参数:

$("#stop").ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown(5000);//向下滑动5000毫秒
    });
    $("#stop").click(function(){
        $("#panel").stop();//点击stop按钮停止
    });    
});

13:jQuery Callback 函数

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

Query 动画的问题

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子:$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。

实例:

由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。 为了避免这个情况,您可以以参数的形式添加 Callback 函数。

$("#stop").click(function(){
    $("p").hide(1000);
});

14:jQuery Callback 函数

当动画 100% 完成后,即调用 Callback 函数。

语法:

$(selector).hide(speed,callback)

解释:

callback 参数是一个在 hide 操作完成后被执行的函数。

错误(没有 callback):

$("p").hide(1000,function(){
    alert("The paragraph is now hidden");
});
结论:如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。

15:jQuery Chaining

通过 jQuery,您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。

jQuery 方法链接:

链接(chaining)的技术,允许在相同的元素上运行多条 jQuery 命令,一条接着另一条。

提示:

这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,只需简单地把该动作追加到之前的动作上。

例子 1:

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

$("p").css("color","red").slideUp(2000).slideDown(2000);

提示:

当进行链接时,代码行会变得很差。不过,jQuery 在语法上不是很严格;您可以按照希望的格式来写,包含折行和缩进。
结论:如果需要,我们也可以添加多个方法调用。

例子 2:

这样写也可以运行:

$("#p1").css("color","red")
    .slideUp(2000)
    .slideDown(2000);

提示:

jQuery 会抛掉多余的空格,并按照一行长代码来执行上面的代码行。

16:jQuery - 获得内容和属性

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

jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

提示:

DOM = Document Object Model(文档对象模型)
DOM 定义访问 HTML 和 XML 文档的标准:

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:
1. text() - 设置或返回所选元素的文本内容
2. html() - 设置或返回所选元素的内容(包括 HTML 标记)
2. val() - 设置或返回表单字段的值

例子1:

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

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

例子2:

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

完整例子

<script>
    $(document).ready(function(){
          $("button").click(function(){
            alert("Value: " + $("#test").val());
          });
    });
</script>
</head>
<body>
    <p>姓名:<input type="text" id="test" value="米老鼠"></p>
    <button>显示值</button>
</body>

16-1: attr() - 获取属性

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

完整案例1:

下面的例子演示如何获得链接中 href 属性的值:

完整例子

<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>

17:jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:
1. text() - 设置或返回所选元素的文本内容
2. html() - 设置或返回所选元素的内容(包括 HTML 标记)
3. val() - 设置或返回表单字段的值

例子1:

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

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

text()、html() 以及 val() 的回调函数

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

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

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

17-1: attr() - 设置属性

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

完整案例:

下面的例子演示如何改变(设置)链接中 href 属性的值:

<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() 方法也允许您同时设置多个属性。

完整案例:

下面的例子演示如何同时设置 href 和 title 属性:

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

attr() 的回调函数

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

完整案例:

下面的例子演示带有回调函数的 attr() 方法:

<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#w3s").attr("href", function(i,origValue){
        return origValue + "/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>

18: jQuery - 添加元素

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

添加新内容的四个 jQuery 方法:

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

jQuery append() 方法:

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

语法:

$("p").prepend("Some prepended text.");
<script>
  $(document).ready(function(){
    //添加文本
    $("#btn1").click(function(){
      $("p").prepend(" <b>Appended text</b>.");
    });
    //添加列表
    $("#btn2").click(function(){
      $("ol").prepend("<li>Appended item</li>");
    });
  });
</script>
</head>
<body>
    <p>This is a paragraph.</p> 
     <p>This is another paragraph.</p> 
     <ol> 
          <li>List item 1</li> 
          <li>List item 2</li> 
          <li>List item 3</li> 
     </ol> 
     <button id="btn1">追加文本</button> 
     <button id="btn2">追加列表项</button>
</body>

jQuery prepend() 方法

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

语法:

$("p").append("Some appended text.");
<script>
  $(document).ready(function(){
    //添加文本
    $("#btn1").click(function(){
      $("p").append(" <b>Appended text</b>.");
    });
    //添加列表
    $("#btn2").click(function(){
      $("ol").append("<li>Appended item</li>");
    });
  });
</script>
</head>
<body>
    <p>This is a paragraph.</p> 
     <p>This is another paragraph.</p> 
     <ol> 
          <li>List item 1</li> 
          <li>List item 2</li> 
          <li>List item 3</li> 
     </ol> 
     <button id="btn1"添加文本</button> 
     <button id="btn2">添加列表项</button>
</body>

注意:

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

通过 append() 和 prepend() 方法添加若干新元素

在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 
JavaScript/DOM来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同
样有效):

完整案例:

<script>
  function appendText(){
      var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
      var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
      var txt3=document.createElement("p");  // 以 DOM 创建新元素
      txt3.innerHTML="Text.";
      $("p").append(txt1,txt2,txt3);         // 追加新元素
  }
</script>
<body>
    <p>This is a paragraph.</p> 
    <button onclick="appendText()">追加文本</button>
</body>

jQuery after() 和 before() 方法

语法:

$("img").after("Some text after");//jQuery after() 方法在被选元素之后插入内容。
$("img").before("Some text before");//jQuery before() 方法在被选元素之前插入内容。

完整案例:

$("#btn1").click(function(){
   $("img").before("<b>Before</b>");
 });
$("#btn2").click(function(){
   $("img").after("<i>After</i>");
});
<img src="//res.jsrun.net/avatar/default.png" alt="JSRUN Logo"> 
<button id="btn1">在图片前面添加文本</button> 
<button id="btn2">在图片后面添加文本</button>

注意:

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

完整案例:

function afterText(){
  var txt1="<b>I </b>";                    // 以 HTML 创建元素
  var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建元素
  var txt3=document.createElement("big");  // 通过 DOM 创建元素
  txt3.innerHTML="jQuery!";
  $("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}
<img src="//res.jsrun.net/avatar/default.png" alt="JSRUN Logo">  
<button onclick="afterText()">在图片后面添加文本</button>

19: jQuery - 删除元素

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

删除元素和内容,一般可使用以下两个 jQuery 方法:

1. remove() - 删除被选元素(及其子元素)
2. empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

语法:

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

案例:

<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#div1").remove();
    });
  });
</script>
</head>
<body>
    <div id="div1">
           <p>This is a paragraph in the div.</p> 
          <p>This is another paragraph in the div.</p> 
     </div>  
 <button>删除 div 元素</button>
</body>

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

语法:

$("#div1").empty();
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#div1").empty();
    });
  });
</script>
</head>
<body>
    <div id="div1">
           <p>This is a paragraph in the div.</p> 
          <p>This is another paragraph in the div.</p> 
     </div>  
 <button>删除 div 元素</button>
</body>

过滤被删除的元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。

语法:

$("p").remove(".italic");//下面的例子删除 class="italic" 的所有 p 元素:
<script>
  $(document).ready(function(){
      $("button").click(function(){
        $("p").remove(".italic");
      });
  });
</script>
</head>
<body>
    <p>This is a paragraph in the div.</p> 
     <p class="italic"><i>This is another paragraph in the div.</i></p> 
     <p class="italic"><i>This is another paragraph in the div.</i></p> 
     <button>删除 class="italic" 的所有 p 元素</button>
</body>

20jQuery - 获取并设置 CSS 类

学习笔记
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。