标签：调整 viewport 绑定 mouse func alert 未来 css char
1 attr() 方法设置或返回被选元素的属性值。
$("button").click(function(){
$("img").attr("width","180");
});
2 append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
3 prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
$("button").click(function(){
$("p").prepend("<b>Hello world!</b>");
});
4 after() 方法在被选元素后插入指定的内容(外部)。
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
5 before() 方法在被选元素前插入指定的内容(外部)。
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
6 addClass() 方法向被选元素添加一个或多个类。
$("button").click(function(){
$("p:first").addClass("class样式名");
});
7 removeClass() 方法从被选元素移除一个或多个类
$("button").click(function(){
$("p:first").removeClass("class样式名");
});
8 hasClass() 方法检查被选元素是否包含指定的 class
$("button").click(function(){
alert($("p:first").hasClass("class样式名"));
9 toggleClass() 从匹配的元素中添加或删除一个类。
$("button").click(function(){
$("p").toggleClass("class样式名");
});
=====================事件==================
1 bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$("button").bind("click",function(){
$("p").append(" <b>Hello world!</b>");
});
2 blur()当元素失去焦点时发生 blur 事件。
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
3 change()当元素的值发生改变时，会发生 change 事件
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
4 delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
5 pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
6 result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。
7 keydown() 触发、或将函数绑定到指定元素的 key down 事件
keypress() 触发、或将函数绑定到指定元素的 key press 事件
keyup() 触发、或将函数绑定到指定元素的 key up 事件
完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
当按钮被按下时，发生 keyup 事件。
8 mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
$("button").mousedown(function(){
$("p").css("background-color","#FFFFCC");
});
9 mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
10 mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件。
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
11 mousemove()当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout() 当鼠标指针从元素上移开时，发生 mouseout 事件
mouseover() 当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup 事件。
12 resize() 当调整浏览器窗口的大小时，发生 resize 事件。
x =0
$(window).resize(function() {
$("span").text(x+=1);
});
13 scroll() 当用户滚动指定的元素时，会发生 scroll 事件。
14 select()当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
15 submit()当提交表单时，会发生 submit 事件。
16 toggle() toggle() 方法切换元素的可见状态。
17 trigger() trigger() 方法触发被选元素的指定事件类型。
$("input").select(function(){
$("input").after("文本被选中！");
});
$("button").click(function(){
$("input").trigger("select");
});
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
<p>鼠标指针位于： <span></span></p>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>
</body>
</html>
<script type="text/javascript">
/*$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});*/
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
i=0;
$("input").keypress(function(){
$("span").text(i+=1);
});
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
</script>
标签：调整 viewport 绑定 mouse func alert 未来 css char
原文地址：https://www.cnblogs.com/sunhao1987/p/9211199.html
