jquery 笔记

事件

点击事件举例

$("p").click(function(){
  // 点击 p 标签后，执行什么操作
});

事件类型

Mouse Events	–	–
click
dblclick
mouseenter
mouseleave

Keyboard Events	–	–
keypress
keydown
keyup

Form Events	–	–
submit
change
focus
blur

Document/Window Events	–	–
load
resize
scroll
unload

操作 Class

// 添加单个
$("p").addClass("myClass");
// 添加多个
$("p").addClass("myClass yourClass");

// 移除多个并添加一个
$("p").removeClass("myClass noClass").addClass("yourClass");

相同tagName、class选择第一个

$(".list li:eq(0)").show();
$(".list .item:eq(0)").show();

修改元素属性

// 将 name 包含 name_alias 的 input 标签最大文字长度改为 399。
$(document).ready(function(){
	$("input[name*='name_alias']").attr("maxlength","399");
});

使用 link 引入 CSS 文件链接

使用时请将 css 链接替换你对应的链接

方案1：使用 .appendTo()

var stylesheet = $("<link>", {
    rel: "stylesheet",
    href: "https://cdn.jsdelivr.net/npm/sanitize.css@13.0.0/sanitize.min.css"
});
stylesheet.appendTo("head");

方案2：使用 .append()

$('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sanitize.css@13.0.0/sanitize.min.css" />');

方案3：使用 .load()

似乎只支持同域

$('<style>').load("https://cdn.jsdelivr.net/npm/sanitize.css@13.0.0/sanitize.min.css")
    .appendTo("head");

使用 $.ajax() 将 CSS 文件链接中内容插入到 style 标签中

$.ajax({
    url: "https://cdn.jsdelivr.net/npm/sanitize.css@13.0.0/sanitize.min.css",
    success: function(data) {
        $("<style>").appendTo("head").html(data);
    }
})

插入 HTML 内容结构

插入在 #container 结束

$(document).ready(function() {
    $('#container').append('<button id="submit">Submit</button>');
});

插入在 #container 开始

$(document).ready(function() {
    $('#container').prepend('<label>Enter your name:</label>');
});

插入 HTML 前后位置说明

• append() 在元素结尾前插入内容，如果选择div，而Q代表插入的内容，结果如下<div><p>这是个模块</p>Q</div>
• prepend() 在元素开始后插入内容，如果选择div，而Q代表插入的内容，结果如下<div>Q<p>这是个模块</p></div>
• after() : 在元素之后插入内容，如果选择div，而Q代表插入的内容，结果如下<div><p这是个模块</p>></div>Q
• before() : 在元素之前插入内容，如果选择div，而Q代表插入的内容，结果如下Q<div><p>这是个模块</p></div>