jQuery

发表于 | 分类于

1.jQuery 安装

jQuery库是一个JavaScript文件，可以使用HTML的script标签引用它：

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

2.jQuery 选择器

  1. jQuery 元素选择器
  • $(“p”) 选取p元素。
  • $(“p.intro”) 选取所有 class=”intro” 的p元素。
  • $(“p#demo”) 选取所有 id=”demo” 的p元素。
  1. jQuery 属性选择器
  • $(“[href]”) 选取所有带有 href 属性的元素。
  • $(“[href=’#’]”) 选取所有带有 href 值等于”#”的元素。
  • $(“[href!=’#’]”) 选取所有带有 href 值不等于”#”的元素。
  • $(“[href$=’.jpg’]”) 选取所有 hrefn值以”.jpg”结尾的元素。
  1. jQuery CSS 选择器
    1
    $("p").css("background-color","red");

3.jQuery 效果

  1. 隐藏和显示
    1
    2
    3
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    $(selector).toggle(speed,callback); // 切换hide()和show()方法

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

  1. 淡入淡出

    1
    2
    3
    4
    5
    $("#div2").fadeIn("slow"); // 淡入
    $("#div3").fadeOut(3000); // 淡出
    $("#div3").fadeToggle(3000);
    $(selector).fadeTo(speed,opacity,callback); // 必需的speed参数规定效果时长
     // 必需的opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与1之间）。

  2. 滑动

    1
    2
    3
    $(selector).slideDown(speed,callback);
    $(selector).slideUp(speed,callback);
    $(selector).slideToggle(speed,callback);

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

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

必需的 params 参数定义形成动画的 CSS 属性。
speed,callback可选

1
2
3
4
5
6
7
8
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

  1. 停止动画

    1
    2
    3
    $("#stop").click(function(){
      $("#panel").stop();
    });

  2. jQuery Chaining
    jQuery允许我们在相同的元素上运行多条jQuery命令，一条接着另一条

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

4.jQuery HTML

  1. text()、html()、val()以及attr()
    获取：
    1
    2
    3
    4
    alert("Text: " + $("#test").text()); // 获得内容
    alert("HTML: " + $("#test").html()); // 获得内容
    alert("Value: " + $("#test").val()); // 获得输入字段的值
    alert($("#w3s").attr("href")); // 获取属性值

设置：

1
2
3
4
$("#test1").text("Hello world!"); // 
$("#test2").html("<b>Hello world!</b>"); // 
$("#test3").val("Dolly Duck"); // 
$("#w3s").attr("href","http://www.w3school.com.cn/jquery"); // 设置href属性的值

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

1
2
3
4
$("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
});

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

  1. jQuery添加元素
    1
    2
    3
    4
    append() - 在被选元素的结尾插入内容
    prepend() - 在被选元素的开头插入内容
    $("img").after("Some text after"); // 被选元素之后插入
    $("img").before("Some text before"); // 被选元素之前插入

添加多个元素：

1
2
3
4
5
6
7
8
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);         // 追加新元素
}

  1. jQuery 删除元素
  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素
  1. jQuery操作CSS
  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性
    1
    $("h1,h2,p").addClass("blue");

  1. jQuery css()

    1
    $("p").css("background-color"); // 返回首个匹配元素的background-color值

  2. jQuery 尺寸

  • width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
  • height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
  • innerWidth() 方法返回元素的宽度（包括内边距）。
  • innerHeight() 方法返回元素的高度（包括内边距）。
  • outerWidth() 方法返回元素的宽度（包括内边距和边框）。
  • outerHeight() 方法返回元素的高度（包括内边距和边框）。
    1
    $("#div1").outerWidth()

5.jQuery 遍历

  1. 祖先
  • parent() 方法返回被选元素的直接父元素。
  • parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。
  • parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
  1. 后代
  • children() 方法返回被选元素的所有直接子元素。
  • find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
  1. 同胞
  • siblings() 方法返回被选元素的所有同胞元素。
  • next() 方法返回被选元素的下一个同胞元素。
  • nextAll() 方法返回被选元素的所有跟随的同胞元素。
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
  1. 过滤
  • first() 方法返回被选元素的首个元素。
  • last() 方法返回被选元素的最后一个元素。
  • eq() 方法返回被选元素中带有指定索引号的元素。

6.jQuery AJAX

  1. jQuery load() 方法是简单但强大的AJAX方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。
    1
    $(selector).load(URL,data,callback);

必需的URL参数规定您希望加载的URL。可选的data参数规定与请求一同发送的查询字符串键/值对集合。可选的callback参数规定当load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象
    1
    2
    3
    4
    5
    6
    7
    8
    $("button").click(function(){
      $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
          alert("外部内容加载成功！");
        if(statusTxt=="error")
          alert("Error: "+xhr.status+": "+xhr.statusText);
      });
    });

上面的例子会把文件”demo_test.txt”的内容加载到指定的div元素中。

  1. $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
    $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
    1
    2
    3
    4
    5
    $("button").click(function(){
      $.get("demo_test.asp",function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });
    });

参考网页：W3school-jQuery教程