jQuery选择器与事件学习笔记

jQuery选择器与操作详解
本文详细介绍了jQuery中各种选择器的功能与使用方法,包括层次选择器、基本过滤选择器、属性过滤选择器、表单对象选择器以及节点遍历等,并提供了事件绑定的相关示例。


层次选择器:
  $("div li")获取div下的所有li元素(后代、子、子的子......)
  $("div>li")获取div下的直接li子元素。
  $(".menuitem+div")获取样式名为menuitem之后的第一个div元素(不常用)。
  $(".menuitem~div")获取样式名为menuitem之后所有的div元素(不常用)。

基本过滤选择器:
  :first选取第一个元素。$("div:first")选取第一个<div>
  :last选取最后一个元素。$("div:last")选取最后一个<div>
  :not(选择器)选取不满足“选取器”条件的元素。$("input:not(.myClass)")选取样式名不是myClass的<input>
  :even、:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>
  :eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于、索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
  $(":header")选取所有的h1......h6元素。
  $("div:animated")选取正在执行动画的<div>元素。

属性过滤选择器:
  $("div[id]")选取有id属性的<div>
  $("div[title=test]")选取title属性为“test”的<div>,JQuery中没有对getElementByName进行封装,用$("input[name=abc]")
  $("div[title!=test]")选取title属性不为“test”的<div>
  还可以选择开头、结束、包含等,条件还可以复合。

表单对象选择器(过滤器):
  $("#form1:eneabled")选取id为form1的表单内所有启用的元素
  $("#form1:disabled")选取id为form1的表单内所有禁用的元素
  $("input:chedked")选取所有选中的元素(Radio、ChekBox)
  $("select:selected")选取所有选中的选项元素(下拉列表)

表单选择器
  $(":input")选取所有<input>、<textarea>、<select>和<button>元素,和$("input")不一样,$("input")只获得<input>
  $(":text")选取所有单行文本框,等价于$("input[type=text]")
  $(":password")选取所有密码框。同理有有::radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

节点遍历
  next()方法用于获取节点后的挨着第一个同辈元素,
  $(".menuitem").next("div")、nextAll方法用于获取节点后的所有同辈元素,
  $(".menuitem").nextAll("div")
  siblings()方法用于获取所有同辈元素,$(".menuitem").siblings("li")

事件绑定
  //执行一次后失效的事件
  $(":button").one("click", function (e) {}
  //绑定事件
  $(":button").bind("click", function (e) {
    
  });

  $(":button").bind("click", function (e) {
    
  });
  //取消绑定事件
  $(":button").unbind("click");


  事件对象e:
  属性:pageX、pageY、target获得触发事件的元素(冒泡的起始,也就是冒泡的源,和this不一样,this指在哪个控件上监听的那个控件的对象).
  which如果是鼠标事件获得按键(1左键,2中键,3右键.
  altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下,为bool值。keyCode、charCode属性发生时间时的keyCode(键盘码,小键盘的1和主键盘的keyCode不一样)、charCode(ASCII码)。


转载于:https://www.cnblogs.com/rennix/p/6344571.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值