1.单击
$("#a").click(function(){
$(this).hide();
})
2.双击
$("#a").dblclick();
3.当元素失去焦点
$("input").blur();
4.键盘上的键被按下
$("input").keypress();
5.键盘上的键被按下的过程
$("input").keydown();
6.键盘上的键被松开
$("input").keyup();
7.当鼠标指针移到元素上
$("#a").mouseenter();
8.当鼠标指针离开元素
$("#a").mouseleave();
9.鼠标在该元素上按下
$("#a").mousedown();
10.在元素上松开鼠标按钮时
$("#a").mouseup();
11.提交表单
$("form").submit();
12.当 <input> 字段改变时
$("input").change();
13.模拟光标悬停时间
① 当鼠标移动到元素上,触发第一个函数
② 当鼠标移出元素,触发第二个函数
$("input").hover(function() {
/* Stuff to do when the mouse enters the element */
}, function() {
/* Stuff to do when the mouse leaves the element */
});
14.当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点
$("input").focus(function() {
$(this).css("background-color","#eee");
});
15.向 <p> 元素添加 click 事件
$("p").on("click",function(){
alert("成功添加了!")
});
16.使函数在文档加载后是可用的
$(document).ready();
17. each() 遍历
$("li").each(function(index,element){
...
});
18.map 函数
$.map(array, function(item, index) {
return something;
});
19.隐藏和显示
$("#a").show();
$("#a").hide('slow/400/fast', function() {
...
});
//切换 hide() 和 show() 方法
$("#a").toggle();
20.动画 - - 淡入淡出 display:none;
$("#a").fadeIn(speed,callback);
$("#a").fadeOut('slow/400/fast', function() {
...
});
$("#a").fadeToggle();
21动画 - - 滑动 display:none;
$("#a").slideUp();
$("#a").slideDown('slow/400/fast', function() {
...
});
$("#a").slideToggle();
22.获得或设置内容
$("#a").text(); $("#a").text("我是文本内容");
$("#a").html(); $("#a").html("<p>我是html内容</p>")
$("#a").val(); $("#a").val("我是value内容")
23.获得和设置属性值
$("#a").attr("href");
$("#a").attr("href","https://www.baidu.com");
$("#a").attr({
"href":"https://www.baidu.com",
"class":"textClass"
});
24.添加新的 HTML 内容
① append 在被选元素的结尾插入
$("#a").append('<b>Append text</b>');
② prepend 在开头插入
③ after 在被选元素之后
④ before 在被选元素之前
25.删除元素
//删除被选中元素及其子元素
$("#a").remove();
//删除被选种元素的子元素
$("#a").empty();
26.操作 CSS 和设置 CSS 样式
$("#a").addClass('yellow blue');
$("#a").removeClass('blue');
//切换 addClass 和 removeClass
$("#a").toggleClass('blue');
$("p").css("background-color":"yellow");
27.返回每个 <div> 元素的所有子元素
$("div").children().css({
property1: 'value1',
property2: 'value2'
});
28.返回被选元素的后代元素
$("div").find("span");
29.过滤
① 返回被选元素的首个元素
$("div p").first().css();
② 返回备选元素的最后一个元素
$("div p").last().css();
③ 返回索引指定的元素
$("div p").eq(0).css();
30.返回带有类名 " intro " 的所有 <p> 元素
$("p").filter(".intro");
not 与 filter 相反