Jquery学习笔记（二）

最新推荐文章于 2024-01-20 21:49:50 发布

xxjoy_777

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量524

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/xxjoy_777/article/details/39080479

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

继续Jquery的学习，学习的网站主要是参照http://www.w3school.com.cn/jquery/index.asp这里来学习，发现Jquery的语法其实很简单，而且能实现的效果也挺多，现在把常见的效果记录在这边，只记录一下功能和主要代码，知道有这么一回事，若具体的不会写，再到这个网站上去查便可。动画效果

1.动画效果

操作多个CSS属性的动画。

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

使用相对值

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

也可以把属性设置为一个函数，如hide,show，toggle等

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

队列功能，主要是一系列动画按次序发生的效果。注意每一个效果之间使用的是分号，而不是逗号了。第二个实例是把div右移，并且内部文字变大

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

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

2.停止动画

停止动画语法：stopAll默认是false,表示是否停止所有的动画，goToEnd默认为false，表示是否立即完成动画。
```
$(selector).stop(stopAll,goToEnd);
```

例子，该例子列出了三种情况。停止当前，停止所有，停止所有但是跳到最终状态。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  
  $("#stop").click(function(){
    $("div").stop();
  });

  $("#stop2").click(function(){
    $("div").stop(true);
  });

  $("#stop3").click(function(){
    $("div").stop(true,true);
  });

3.callback函数

前面的例子多次看到有些函数中有两个参数，一个是speed，一个是callback。callback主要是为了避免一种情况：就是当有一序列的动作的动画正在执行的时候，动画指令下面还有其他指令，有时候会导致动画指令还没有执行完成就执行下面一条指令，这时候把下一条指令放在动画指令的callback里面去写，就能保证下一条指令在动画指令执行完毕之后才执行。

例子如下：

$("p").hide(1000);
alert("The paragraph is now hidden");

这句话会发生错误，因为它要1000毫秒来hide，还没等它hide完毕，下面的alert就开始执行了。

$("p").hide(1000,function(){
  alert("dddddd");
});

这样写就对了。

4.Chaining

Chaining允许我们对同一个元素在一条语句上运用多个Jquery方法。不用分开写。这些方法会按先后顺序一条接着一条来执行。

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

或者这样写也可以

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

第二部分：获取内容和属性

这一部分主要是操作HTML 的元素和它们的属性，它提供了一系列与DOM 相关的方法。来对HTNM元素以及它们的属性进行操作。

1.获取HTML内容

Jquery主要通过三个方法text(),html(),val()来实现对HTML内容的获取。

text()获取元素的文本内容

html()获取元素的文本内容并且包含HTML标记

val()获取表单元素字段的值，注意是表单，比如input等

实例

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

实例

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

2.获取属性

通过attr()来获取HTML元素的属性，如下面例子获取了#w3s为ID的a元素的href值。

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

3.设置HTML内容和属性

还是通过上面讲的那几个方法来设置内容和属性。直接看实例就明白了。

实例

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

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

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

例子如下：

实例

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

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

第二个例子的href在原来的基础上加了/jquery，形成了一个新的链接，这种应用很常见。

4.添加元素

主要通过append()。prepend（）,after（），before（）等方法来实现添加元素

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

$("p").prepend("Some prepended text.");

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);         // 追加新元素
}

上面三种方法均添加了Text.的段落，采用append方法添加在段落P后面。

$("img").after("Some text after");

$("img").before("Some text before");

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 之后插入新元素
}

更多的内容查阅： http://www.w3school.com.cn/jquery/