JQuery

2024/06/07 00:00:00·2026/05/19 10:23:00

参考

基本用法

<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<p>Hello World!</p>

<button>Click me</button>

</body>
</html>

选择器

<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

  <div class="intro">
    <h1>Welcome to my website</h1>    
    <p>This is a paragraph</p>
  </div>

  <button>Click me</button>

</body>
</html>

元素选择器

$(selector)

selector：选择器，可以是标签名、类名、ID、属性、内容等。

$(document).ready(function(){
  $("p").hide();
});

//隐藏所有 class="test" 的 <p> 元素

选择所有 <p> 元素，并隐藏它们。

$(document).ready(function(){
  $(".intro").hide();
});

选择所有带有 intro 类名的元素，并隐藏它们。

$(document).ready(function(){
  $("#intro").hide();
});

选择所有带有 id 属性值为 intro 的元素，并隐藏它们。

$(document).ready(function(){
  $("[name='intro']").hide();
});

$(document).ready(function())的作用是等页面加载完成后再执行函数。

事件

<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<p>Hello World!</p>

<button>Click me</button>

</body>
</html>

click() 方法：当按钮被点击时，执行函数。

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

hide

点击按钮时，隐藏所有 <p> 元素。

加上speed参数，可以设置动画的速度。

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow");
  });
});

点击按钮时，隐藏所有 <p> 元素，并用慢速动画效果。

$(document).ready(function(){
  $("button").click(function(){
    $("p").show("fast");
  });
});

点击按钮时，显示所有 <p> 元素，并用快速动画效果。

speed也可以取毫秒：

$(document).ready(function(){
  $("button").click(function(){
    $("p").show(1000);
  });
});

点击按钮时，显示所有 <p> 元素，并用1000毫秒的动画效果。

还可以设置回调函数：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000, function(){
      alert("Animation complete.");
    });
  });
});

点击按钮时，隐藏所有 <p> 元素，并用1000毫秒的动画效果，动画完成后弹出提示框。

show

$(document).ready(function(){
  $("button").click(function(){
    $("p").show();
  });
});

点击按钮时，显示所有 <p> 元素。

toggle

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

点击按钮时，显示或隐藏所有 <p> 元素。

滑动动画

$(document).ready(function(){
  $("button").click(function(){
    $("p").slideUp();
  });
});

点击按钮时，隐藏所有 <p> 元素，并用动画效果。

$(document).ready(function(){
  $("button").click(function(){
    $("p").slideDown();
  });
});

点击按钮时，显示所有 <p> 元素，并用动画效果。

淡入淡出

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeIn();
  });
});

点击按钮时，显示所有 <p> 元素，并用淡入动画效果。

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut();
  });
});

点击按钮时，隐藏所有 <p> 元素，并用淡出动画效果。

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeToggle();
  });
});

点击按钮时，显示或隐藏所有 <p> 元素，并用淡入或淡出动画效果。

fadeTo()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeTo("slow", 0.5);
  });
});

点击按钮时，将所有 <p> 元素的透明度设置为0.5，并用慢速动画效果。

动画队列

//animate 函数模板
$(selector).animate(properties, duration, easing, complete);

selector：选择器，可以是标签名、类名、ID、属性、内容等。
properties：动画属性，可以是 width、height、opacity、left、top、marginLeft、marginTop、paddingLeft、paddingTop、fontSize 等。
duration：动画持续时间，单位为毫秒。
easing：动画效果，可以是 linear、swing、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic、easeInOutCubic、easeInQuart、easeOutQuart、easeInOutQuart、easeInQuint、easeOutQuint、easeInOutQuint 等。
complete：动画完成后的回调函数。
点击按钮时，对 <p> 元素同时进行动画处理，先将其左边距移动到250px，再将透明度设置为0.5，然后再将字体大小设置为30px。

$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left: '250px',
      opacity: '0.5'
    }, 1000);
    $("p").animate({
      fontSize: '30px'
    }, 1000);
  });
});

点击按钮时，对 <p> 元素同时进行动画处理，先将其左边距移动到250px，再将透明度设置为0.5，然后再将字体大小设置为30px。

可以使用相对值来设置动画的开始值：

$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left: '+250px',
      opacity: '+0.5'
    }, 1000);
    $("p").animate({
      fontSize: '+30px'
    }, 1000);
  });
});

点击按钮时，对 <p> 元素同时进行动画处理，先将其左边距移动到250px，再将透明度设置为0.5，然后再将字体大小设置为30px。

可以将动画值设置为toggle,show,hide：

$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left: 'toggle'
    }, 1000);
  });
});

点击按钮时，对 <p> 元素同时进行动画处理，将其左边距设置为toggle，即先隐藏再显示。

可以使用回调函数来设置动画完成后的操作：

$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left: '250px',
      opacity: '0.5'
    }, 1000, function(){
      alert("Animation complete.");
    });
    $("p").animate({
      fontSize: '30px'
    }, 1000, function(){
      alert("Animation complete.");
    });
  });
});

点击按钮时，对 <p> 元素同时进行动画处理，先将其左边距移动到250px，再将透明度设置为0.5，然后再将字体大小设置为30px。

停止动画

$(document).ready(function(){
  $("button").click(function(){
    $("p").stop();
  });
});

点击按钮时，停止所有 <p> 元素的动画效果。

chaining

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide().fadeIn();
  });
});

点击按钮时，先隐藏所有 <p> 元素，然后再淡入显示。

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

jQuery HTML/CSS

jQuery 提供了一些方法来操作 HTML/CSS 元素。

Les méthodes jQuery pour manipuler le HTML/CSS

获得内容

三个用于操作 HTML 元素的 jQuery 方法：

html()：设置或获取元素的内容。
text()：设置或获取元素的文本内容。
val(): 设置或获取表单元素的值。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").html("<p>New content</p>");
  });
});

点击按钮时，将 <div> 元素的内容设置为 <p>New content</p>。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").text("New text content");
  });
});

点击按钮时，将 <div> 元素的文本内容设置为 New text content。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#input1").val("New value");
  });
});

点击按钮时，将 <input> 元素的值设置为 New value。

获得属性

attr()：设置或获取元素的属性值。

$(document).ready(function(){
  $("#btn1").click(function(){
    var attrVal = $("#div1").attr("id");
    alert(attrVal);
  });
});

设置属性

attr()：设置或获取元素的属性值。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").attr("id", "newId");
  });
});

点击按钮时，将 <div> 元素的 id 属性设置为 newId。

删除属性

removeAttr()：删除元素的属性。

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").removeAttr("id");
  });
});

点击按钮时，删除 <div> 元素的 id 属性。

clone

w3school

The clone() method makes a copy of selected elements, including child nodes, text and attributes.

var jOptions = $("<option>").val("valeur").html("label");
// Une fois la page chargée, remplir le menu
$(document).ready(function() {
    // console.log("init");
    // Une fois la page chargée ...
    var i;
    var jCloneOption;

    // Remplir le menu de sélecgtion d'API
    for(i=0; i<apis.length; i++) {
        //insérer une nouvelle option
        jCloneOption = jOptions.clone();
        //jCloneOption = jOptions;
        jCloneOption.val(apis[i].url).html(apis[i].nom);
        $("#authentication select").append(jCloneOption); // premiere maniere
        // $("select", "#authentication") //deuxieme maniere
    }
});

getJSON

w3school