事件

点击事件举例

$("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");
});

使用时请将 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>

回到顶部

Copyright © 2017-2024 1px.run (像素教程) Distributed by an MIT license.