前端常用代码整理— js，jquery篇

以下是一些常用的JavaScript和jQuery代码片段，用于前端开发，并且会持续更新。

1. 使用jQuery在文档加载完成后执行代码：

$(document).ready(function(){
    // 在这里写你的代码...
});

或者使用简写形式：

$(function(){
    // 在这里写你的代码...
});

2. 点击按钮时弹出警告框：

$("#myButton").click(function(){
    alert("按钮被点击了！");
});

3. 通过ID获取元素的值：

var value = $("#myInput").val();

4. 设置元素的文本内容：

$("#myDiv").text("Hello, World!");

5. 设置元素的HTML内容：

$("#myDiv").html("<p>Hello, World!</p>");

6. 通过类名获取元素：

$(".myClass").css("color", "red");

7. 绑定表单的提交事件：

$("#myForm").submit(function(event){
    event.preventDefault(); // 阻止表单默认提交行为
    // 执行其他逻辑...
});

8. 通过AJAX加载外部内容：

$("#myDiv").load("content.html");

9. 创建并添加新的HTML元素：

$("<p>", {
    id: "newParagraph",
    text: "这是新添加的段落。",
    appendTo: "#myDiv"
});

10. 通过ID隐藏元素：

$("#myElement").hide();

11. 通过ID显示元素：

$("#myElement").show();

12. 通过ID切换元素的可见状态：

$("#myElement").toggle();

13. 通过ID添加或移除一个类：

$("#myElement").toggleClass("myClass");

14. 通过ID修改元素的CSS属性：

$("#myElement").css("color", "blue");

15. 通过ID绑定一个点击事件：

$("#myElement").click(function(){
    // 执行点击时的逻辑...
});

16. 通过ID获取或设置元素的属性：

var attributeValue = $("#myElement").attr("data-attribute");
$("#myElement").attr("data-attribute", "newValue");

17. 通过ID获取或设置元素的数据属性：

var dataValue = $("#myElement").data("myData");
$("#myElement").data("myData", "newValue");

18. 通过ID获取元素的位置：