jQuery笔记
发布:2022-05-02
Basics
Include
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
Syntax
$(document).ready(function() {
$(".demo").click(function() {
$(this).hide(200);
});
});
$(function() {
});
Each
$(".demo").each(function() {
document.write($(this).text() + "\n");
});
Trigger
$("a#mylink").trigger("click");
noConflict
var jq = $.noConflict();
jq(document).ready(function() {
jq("#demo").text("Hello World!");
});
Selectors
$("*");
$("p.demo");
$("p:first");
$("p span");
$("p > span");
$("p + span");
$("p ~ span");
$("ul li:first");
$("ul li:first-child");
$("ul li:nth-child(3)");
$("[href]");
$("a[target='_blank']");
$("a[target!='_blank']");
$(":input");
$(":button");
$("tr:even");
$("tr:odd");
$("span:parent");
$("span:contains('demo')");
Actions
$(this).hide();
$("div").hide();
$(".demo").hide();
$("#demo").hide();
Events
$(".demo").click(function() {
$(this).hide(200);
});
Mouse
scroll, click, dblclick, mousedown, mouseup, mousemove, mouSEOver, mouseout, mouseenter, mouseleave, load, resize, scroll, unload, error
Keyboard
keydown, keypress, keyup
Form
submit, change, focus, blur
DOM Element
blur, focus, focusin, focusout, change, select, submit
Browser
load, resize, scroll, unload, error
.bind()
$(document).ready(function() {
$("#demo").bind("blur", function(e) {});
});
Effects
Hide / Show
$("#demo").hide();
$("#demo").show(200);
$("#demo").toggle();
$("#element").hide("slow", function() {
console.log("Animation complete.");
});
Fade
$("#demo").fadeIn();
$("#demo").fadeOut(300);
$("#demo").fadeToggle("slow");
$("#demo").fadeTo("slow", .25);
Slide
$("#demo").slideDown();
$("#demo").slideUp("slow");
$("#demo").slideToggle();
Animate
$("div").animate({
opacity: "0.5",
left: "200px",
height: "200px"
});
stop() Method
$("#demo").mouseleave(function(event) {
$(".tab").stop().animate({
opacity: "0.5",
marginTop: "10px"
}, 500, function() {
$("#demo").removeClass("hovered");
});
});
$("#demo").mouseover(function(event) {
$(".tab").stop().animate({
opacity: "1",
marginTop: "0px"
}, 300, function() {
$("#demo").addClass("hovered");
});
});
Chaining
$("#demo").css("backgroundColor", "green").slideUp(500).slideDown(500);
Traversing
$("#demo").parent();
$("span").parent().hide();
$("#demo").parents();
$("#demo").parentsUntil("#demo2");
$("#demo").children();
$("#demo").children(".first");
$("#demo").find("span");
$("#demo").find("*");
$("#demo").siblings("span");
$("#demo").next();
$("p").nextAll();
$("#demo").nextUntil("#demo2");
$("#demo").prev();
$("p").prevAll();
$("#demo").prevUntil("#demo2");
Filtering
$("span strong").first();
$("span strong").last();
$("div").eq(9);
$("div").filter(".big");
$("div").not(".big");
Ajax
$("#demo").load("file.txt h1.main");
$("#demo").load("file.txt", function(responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
document.write("Content loaded successfully!");
} else {
document.write("Error: " + xhr.status + ": " + xhr.statusText);
}
});
$.get()
$.get("demo.asp", function(data, status) {
document.write("Data: " + data + "\nStatus: " + status);
});
$.post()
$.post("demo.asp", {
name: "John",
age: 30
}, function(data, status) {
console.log("Data: " + data + "\nStatus: " + status);
});
DOM Manipulation
Content
$("#demo").text();
$("#demo").html();
$("#demo").val();
$("#demo").html("Hello!");
Attributes
$("#link").attr("href");
$("#link").attr("href", "https://www.qianbo.com.cn/");
$("#link").attr({
href: "https://www.qianbo.com.cn/",
title: "千博网络"
});
$("#link").attr("href", function(i, origValue) {
return origValue + "/help";
});
Add
$(".demo").prepend("Yo!");
$(".demo").append("Hello!");
$(".demo").before("Cheers");
$(".demo").after("Peace");
Remove
$("#demo").remove();
$("#demo").empty();
$("div").remove(".cl1, .cl2");
Classes
$("#demo").addClass("big red");
$("h1, p").removeClass("red");
$("#demo").toggleClass("big");
CSS
$("#demo").css("background-color");
$("#demo").css("color", "blue");
$("#demo").css({
color: "blue",
"font-size": "14px"
});
width, height, innerWidth, innerHeight, outerWidth, outerHeight
inner - includes padding
outer - includes padding and border
13872885164
声明:以上文章素材和专业知识由本站人工原创整理,谢绝转载。