<
jQuery 笔记
>
上一篇

JavaScript 复制内容到剪贴板 下一篇

Java 随手笔记
JavaScript 函数库之 jQuery
苏轻最后编辑于 2018 年 12 月 27 日 11:04:46

jQuery 简介

　　jQuery 是一个 JavaScript 函数库。使用 jQuery 之前，我们需要在 HTML 中使用 <script> 标签来引用它。

<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

　　官网地址：jquery.com
　　推荐引用：bootcdn.cn

// 文档就绪事件处理器
$(document).ready(function(){
    // 为了防止文档在完全加载之前运行代码
    // 通常将代码置于此处
});

jQuery 语法

　　$(xxx).action();

　　jQuery 使用 $ 符号作为语句的开头，但是在某些其他 JavaScript 库中的函数同样使用了 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。

var sq = jQuery.noConflict(); // 使用 sq 代替 $ 符号
sq(this).hide(); // e.g.

　　如果你的 jQuery 代码块使用 $ 简写，并且不愿意改变这个快捷方式，那么可以把 $ 符号作为变量传递给 ready() 方法。这样就可以在函数内使用 $ 符号了，而在函数外，依旧不得不使用 jQuery。

$.noConflict();
jQuery(document).ready(function($){
    $(".test").action();
});

jQuery 选择器

jQuery 事件

jQuery 动画效果

$("button").click(function(){
  $("div").animate({
    left:'250px', // 改变属性的值
    height:'+=150px', // 相对的值
    width:'toggle' // 预定义的值
  });
});

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow"); // animate() 默认支持队列功能
    div.animate({fontSize: '3em'}, "slow");
});

jQuery 获取 / 修改元素

$("button").click(function(){
  $("#test").attr({
    "href" : "https://suqing.fun/",
    "title" : "suqing"
  });
});

$("#button").click(function(){
    $("#test").text(function(i, origText){
        return "origText:" + origText + ", index:" + i;
    });
});

jQuery 添加元素

jQuery 删除元素

jQuery 设置 CSS

$("p").css("background-color"); // 返回属性的值
$("p").css("background-color", "yellow"); // 设置属性的值
$("p").css({ // 设置多个属性的值
  "background-color" :"yellow",
  "font-size": "200%"
});

jQuery 尺寸

jQuery 遍历

$("div p").first(); // 首个 <div> 元素内部的第一个 <p> 元素
$("div p").last(); // 最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1); // 返回第二个 <p> 元素
$("p").filter(".test"); // 带有 class = "test" 的所有 <p> 元素
$("p").not(".test"); // 没有 class = "test" 的所有 <p> 元素

jQuery AJAX（异步）

$("button").click(function(){
    $("#div").load("test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success") {
            alert("Success");
        }
        if(statusTxt == "error") {
            alert("Error: " + xhr.status + ": " + xhr.statusText);
        }
  });
});

$.get("test", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

$.post("test",
       {name : "Donald Duck", city : "Duckburg"},
       function(data, status){
           // code
       });

@end

苏轻使用 jQuery 的一些心得笔记

Top
Foot