jQuery 常用函数和方法

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 相反

jQuery 常用函数和方法

猜你喜欢