jQuery基础

Basics

Include

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src=" 
<script type="text/javascript" src=" 
<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