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码)。

时间: 2024-08-10 17:17:01

jQuery选择器与事件学习笔记的相关文章

JQuery选择器和事件的学习小记

一.前言与基础 JQuery是JavaScript的一个拓展库,能够比原生JavaScript代码更简便地进行HTML页面的DOM操作.要想使用JQuery,必须要在HTML页面引入JQuery的源代码文件. JQuery的源代码文件有两种: compressed&production,编译过并且进行压缩的JQuery文件,用于实际网站开发,编译和压缩能够加快代码加载.文件名一般为jquery-1.10.2.min.js,1.10.2是版本号. uncompressed&developme

JS 事件学习笔记(二)

在JS事件学习笔记(一)中学习了事件流.事件处理程序.事件对象以及跨浏览器应该怎么做等知识,现在我们现在来学习浏览器中主要的各种事件. 一. load事件 load事件通常是通过JavaScript代码指定,在window对象上绑定,实际上根据DOM2规定,应该在document上而非window上触发load事件,但是所有浏览器都在window对象上实现了该事件.因此以确保兼容性推荐使用该方法: 另外,在window上发生的事件也可以作为body元素的属性在html代码中添加. load事件的

C#中的委托、事件学习笔记

1.委托delegate 委托delegate也是一种类型,在任何可以声明类的地方都可以声明委托,它将方法当做另一个方法的参数进行传递,这样就可以传递不同的方法,完成不同的功能,使程序具有很好的可扩展性. 举例: 假设这里有一台电脑,有人会用它写程序,有人会用它打游戏,有人会用它看电影,有人会用它边听音乐边玩游戏,有人会用它边听音乐边看文档,边上QQ. 这台电脑可以抽象成一个类Computer,里面有个方法DoWork,所有的人都要通过这个方法来做自己的事情. 不用委托的时候我们可以实现一些固定

jQuery中的Ajax学习笔记

前段时间学习了<锋利的jQuery第六章>jQuery与Ajax应用,现做如下笔记: 我们先来了解一下,什么是Ajax呢?Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体.简短地说,在不重载整个页面的情况下,Ajax通过后台加载数据,并在网页上进行显示. 我们来简要回顾一下Ajax.早在1998年,微软就引入了一个ActiveX控件,从而能

jQuery选择器和事件

一.jQuery选择器    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.1.min.js"></script> <script src="Selector.js"></script>

锋利的jQuery第2版学习笔记4、5章

第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document).ready()方法. 1.执行时机 window.onload方法在网页所有元素都加载完毕之后才执行,$(document).ready()方法在DOM完全就绪就可以被调用 由于$(document).ready()方法内注册事件,只要DOM就绪就会被执行,因此有可能此时元素的关联文件还未下载完

javascript事件学习笔记

事件冒泡 并不是所有的事件都支持事件冒泡,比如submit ,focus,blur不支持事件冒泡,mouseover,mouseout虽然支持冒泡,但是一般不用,因为需要经常计算元素的位置,消耗比较大. 事件冒泡带来的优点是可以使用事件委托,提高了页面的性能,缺点是父级元素中如果也绑定了一样的事件,那么子元素事件的触发也会触发父级元素的事件,解决办法就是禁止子元素的事件冒泡. 事件委托 这是好东西,借助他可以提高页面的性能.首先,每个函数都是对象,都会占用内存,内存中的对象越多,性能越差.其次,

锋利的jQuery第2版学习笔记1~3章

第1章,认识jQuery 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想把握不到位,导致结构松散 Dojo(http://dojotoolkit.org),学习曲线陡,文档不全,最严重的是API不稳定 YUI(http://developer.yahoo.com/yui/) Ext JS(http://www.extjs.com),侧重界面,比较臃肿,用于商业用途需要付费 MooTools(http://moo

《JS高程》事件学习笔记

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ------------------------------------------------------------------------------------------------------------- 一.事件流 事件流:描述的是页面中接收事件的顺序. IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档): NetScape:事件捕获流,即不太具体的节