checkbox选中触发事件_事件选择器

一.选择器

1.过滤选择器(跟节点遍历-过滤相似)

​ ①找第一个元素

​ 语法:$("选择器:first")

e162888e23f82a3ab773c94baf5c0dc9.png

​ ②找最后一个元素

​ 语法:$("选择器:last")

a815da4b022b75fc13792344e2af0734.png

​ ③根据索引查找元素

​ 语法:$("选择器:eq(索引)")

36a2e4d0850857e933a31b753d139013.png

​ ④找符合条件之外元素

​ 语法:$("选择器:not(选择器)")

1dcf6473e6bee8eb00ece196f809bea9.png

​ ⑤找索引为偶数项的元素

​ 语法:$("选择器:even")

92cb6f7e09d5cb12c415cad489eeae40.png

​ ⑥找索引为奇数项的元素

​ 语法:$("选择器:odd")

ac51d828d27a1ce731a70eb0bfdd3276.png

2.属性选择器

​ ①只要拥有某个属性就选中

​ 语法:$("[属性名]")

​ ②属性名和属性值匹配就选中

​ 语法:$("[属性名='属性值']")

​ ③属性名和属性值不匹配就选中

​ 语法:$("[属性名!='属性值']")

​ ④选取属性值包含有value的元素

​ 语法:$("[属性名*='value']")

注意:使用选择器的时候,尽量选择的范围更加精确一些。

二.表单属性

​ 1.根据input标签的type属性值

​ 语法:$(":type属性值")

​ 2.选取所有被选中的元素(单选框和复选框)

​ 语法:$(":checked")

f70153a9e9394978118bbbbb543f00e3.png

​ 3.选取所有被选中的选项元素(下拉列表) ​ 语法:$(":selected")

注意:$(":selected")是作用于option标签的,而不是作用于select标签

​ $("#box3 > select:selected") 错误

​ $("#box3 > select > option:selected") 正确 ​ 使用选择器的时候,尽量选择的范围更加精确一些。

5bd4f3c43da66224a13c95d5518d9c9c.png

三.hover事件

​ 鼠标进入响应鼠标进入事件,鼠标离开响应鼠标离开事件。

​ 语法:hover(fnOver,fnOut)

​ fnOver:函数类型,鼠标进入需要响应事件。

​ fnOut:函数类型,鼠标离开需要响应事件。

​ 注:如果参数只有一个回调函数,那么鼠标进入和离开都会响应。

​ hover事件本质上就是:mouseenter+mouseleave的组合事件。

四.绑定事件

1.使用jQuery如何实现取消事件?

​ a)使用bind来绑定事件 ​ 语法:事件源.bind(types, data, fn)

​ types:需要绑定的事件类型,并且可以一次绑定多个事件。

注:需要响应多个事件,事件之间用空格分割。例如:"click mouseenter"

​ data:需要传递的参数,该参数一般为JSON格式的对象【可选】

​ fn:响应事件的回调函数

​ b)使用unbind来取消事件绑定

​ 语法:事件源.unbind(types) ​ types:需要解绑的事件类型

2.on绑定事件

​ 语法:element.on(types,selector,data,fn)

​ types:需要绑定的事件类型,并且可以一次绑定多个事件。

​ selector:执行触发绑定事件的子元素【可选】

​ 如果省略CSS选择器,那么就只能绑定事件的元素的自己来触发

​ data:需要传递的参数,该参数一般为JSON格式的对象【可选】

​ fn:响应事件的回调函数,该回调函数中this指的就是响应该事件的事件源

3 .off事件解绑

​ 语法:element.off(types, selector)

​ types:需要解绑的事件类型,可以一次解绑多个

​ selector:CSS选择器,设置需要解绑的子元素.

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值