jQuery 常用函数和方法

喜欢ヅ旅行 2021-06-26 16:06 464阅读 0赞

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> 元素