技术交流

当前位置:首页 >> 技术交流 >> jQuery笔记

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
声明:以上文章素材和专业知识由本站人工原创整理,谢绝转载。
标签: jQuery 笔记

相关文章