jQuery的事件和API

·  阅读 40

一、事件

on() 在选定的元素上绑定一个或多个事件处理函数。
off() 移除一个事件处理函数。
trigger() 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
复制代码

二、鼠标事件

click()  单击
   dblclick()  双击
   hover()   悬停
   mousedown()  按下
   mouseup()  抬起
   mouseenter()  移入  不支持子元素
   mouseleave()  离开  不支持子元素 
   mouseout()   离开  支持子元素 
   mouseover()  进入  支持子元素 
   mousemove()  移动
复制代码

三、键盘事件

keypress() 按键按下 
keyup() 按键抬起 
keydown() 按键按下
复制代码

四、表单事件

focus() 聚焦事件
blur() 失去焦点事件 
change() 当元素的值发生改变时激发的事件 
select() 当textarea或文本类型的input元素中的文本被选择时触发的事件 
submit() 表单提交事件,绑定在form复制代码

五、jQuery中常用的API

1.jQuery中的html(),text(),val()方法

 html()
           无参:获取html的值
           有参数html:设置html的值

   text()
           无参:获取文本值
           有参数text:设置文本值
   val()
           无参:获取value的值
           有参数value:设置value的值
复制代码

2.jQuery中的工具方法

1) get();  //以数组的形式返回DOM节点。
        console.log($('div').get());
        
   2) toArray();  //返回一个包含jQuery对象结合中的所有DOM元素数组。
        console.log($('div').toArray());

   3) eq(index);  //返回index位置上的jQuery对象。
        console.log($('div').eq(1).get(0));

   4) filter(function(index,item){});   //过滤器函数,返回jQuery对象。
        var $result = $('div').filter(function(index,item){
        return index == 2;
      });
         
   5) map(function(index,item){});   //用于获取或设置元素集合中的值。
        var $result = $('div').map(function(index,item){
        return $(item).html()
      });
    
   6) each(function(index,item){});  //遍历一个jQuery对象。
          $('div').each(function(index,item){
        console.log(index,'--',item);
      });

   7) slice(0,3);  //截取
        var $result = $('div').slice(0,3);
      console.log($result.get());
   }); 

  8) not() 
  9) first()
  10) last()
  11) is()
  12) has()
复制代码

3.jQuery中属性设置函数

    //获取属性值
       attr(key)
       prop(key)
    //删除属性   
       removeAttr(attributeName)
       removeProp(propertyName)
    //批量设置属性   
       css(key)
    //添加类   
       addClass(className)
    //判断有没有指定的类,有,返回true,否则返回false   
       hasClass(className)
    //删除类   
       removeClass(className)
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改