阅读 178

jQuery总结

1. jQuery安装

jQuery官网.png

  • 点击按钮【Download jQuery】打开下载页,并下接页面到下载链接

download jQuery.png

  • 开发环境选择链接【Download the uncompressed, development jQuery 3.6.0】下载

生产环境选择链接【Download the compressed, production jQuery 3.6.0】下载

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>

</body>
</html>
复制代码

2. jQuery的使用

  • 选择器

元素选择器
$("p")
#id 选择器
$("#test")
.class 选择器
$(".test")

  • 事件方法

$(document).ready()

$(document).ready(function(){
            
});
复制代码

click():当按钮点击事件被触发时会调用一个函数。

$("p").click(function(){
  $(this).hide();
});
复制代码

dblclick():当双击元素时,会发生 dblclick 事件。

$("p").dblclick(function(){
  $(this).hide();
});
复制代码

mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件。

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});
复制代码

mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件。

$("#p1").mouseleave(function(){
    alert("再见,您的鼠标离开了该段落。");
});
复制代码

mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下!");
});
复制代码

mouseup():当在元素上松开鼠标按钮时,会发生 mouseup 事件。

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});
复制代码

hover():hover()方法用于模拟光标悬停事件。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);
复制代码

focus():当元素获得焦点时,发生 focus 事件。

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
复制代码

blur():当元素失去焦点时,发生 blur 事件。

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});
复制代码
  • 效果方法

hide() 和 show():隐藏和显示

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});
复制代码

toggle():切换 hide() 和 show() 方法

$("button").click(function(){
  $("p").toggle();
});
复制代码

淡入淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo()
复制代码

滑动

slideDown()
slideUp()
slideToggle()
复制代码

animate():动画方法

# $(selector).animate({params},speed,callback);
$("button").click(function(){
  $("div").animate({left:'250px'});
});
复制代码

stop():停止动画

# $(selector).stop(stopAll,goToEnd);
$("#stop").click(function(){
  $("#panel").stop();
});
复制代码
  • HTML / CSS 方法

text()、html() 以及 val():获得内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
复制代码
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});
复制代码

设置内容 - text()、html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});
复制代码

attr():设置属性

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});
复制代码

添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容

$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
复制代码

删除元素 remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素

$("#div1").remove();
$("#div1").empty();
复制代码

获取并设置 CSS 类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
复制代码

css() 方法

# css("propertyname");
$("p").css("background-color");
复制代码

设置 CSS 属性

# css("propertyname","value");
$("p").css("background-color","yellow");
复制代码

尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight() img_jquerydim.gif

  • 遍历方法

向上遍历 DOM 树 parent() parents() parentsUntil()

$(document).ready(function(){
  $("span").parent();
});
复制代码
$(document).ready(function(){
  $("span").parents();
});
复制代码
$(document).ready(function(){
  $("span").parentsUntil("div");
});
复制代码

向下遍历 DOM 树 children() find()

$(document).ready(function(){
  $("div").children();
});
$(document).ready(function(){
  $("div").find("span");
});
复制代码
  • AJAX 方法

load() 方法

$("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);
  });
});
复制代码

get() 和 post() 方法

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});
复制代码
文章分类
前端
文章标签