jQuery总结

作者: 小辉哥08 | 来源:发表于2021-06-21 07:22 被阅读0次

1.2jquery总结
jQuery中的DOM操作
【转】JQuery全面总结
jQuery 方法总结及几个常用插件
jQuery操作事件
jQuery选择器总结
jquery和zepto的扩展方法extend
jQuery常用的元素查找方法总结
JQuery总结
Jquery总结

1. jQuery安装

打开jQuery官网：https://jquery.com/
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);
    });
});