JQuery——第2课、事件,包装集

一、jQuery事件

什么是事件?

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例:

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。

常见的JQuery事件:

1、click()  当按钮点击事件被触发时会调用一个函

2、ready()  在文档完全加载完后执行函数

3、dblclick()  当双击元素时,会发生 dblclick 事件。

4、mouseenter()  当鼠标指针穿过元素时,会发生 mouseenter 事件。

5、mouseleave()  当鼠标指针离开元素时,会发生 mouseleave 事件。

6、mousedown()  当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

7、mouseup()  当在元素上松开鼠标按钮时,会发生 mouseup 事件。

8、hover()  用于模拟光标悬停事件。

9、focus()  当元素获得焦点时,发生 focus 事件,通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。

10、blur()  当元素失去焦点时,发生 blur 事件。


二、包装集的管理

1、确定包装集的大小length

  length 属性包含 jQuery 对象中元素的数目。

  语法:$(selector).length

2、获得元素在包装集的位置index()

  index() 方法返回指定元素相对于其他指定元素的 index 位置。

  这些元素可通过 jQuery 选择器或 DOM 元素来指定。

   (1)、第一个匹配元素的 index,相对于同胞元素

   获得第一个匹配元素相对于其同胞元素的 index 位置。

  语法:$(selector).index()

  (2)、元素的 index,相对于选择器 

  获得元素相对于选择器的 index 位置。

  该元素可以通过 DOM 元素或 jQuery 选择器来指定。

  语法:$(selector).index(element)

3、添加元素到包装集add()

  add() 方法将元素添加到匹配元素的集合中

  语法:.add(elements)

4、删除包装集中的元素not()

  not() 从匹配元素集合中删除元素。

  语法:.not(element)

5、对包装集中的元素进行过滤 filter()

  filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

  语法:.filter(selector)

6、获取包装集的子集 slice()

  slice() 把匹配元素集合缩减为指定的指数范围的子集。

  语法:.slice(selector,end)

三、JQuery中的选择器

  1、层次选择器

    1、后代元素选择器:用于在给定的元素下查找所有的后代元素

      语法:$("amcestor descendant")

  2、子元素选择器:用于在给定的元素下查找所有的直接元素

    语法:$("parent>child")

  3、紧邻同辈元素选择器:用于选择给定元素的同级元素

    语法:$("prev+next")

  4、相邻同辈元素选择器:用于选择prev元素后的所有同级的元素

    语法:$("prev~siblings")

  2、过滤选择器

      1、动画元素选择器      :animated

          选择器选取当前的所有动画元素

          语法:$(":animated")

      2、 焦点元素选择器     :focus

          选择器用于选取获得焦点的元素。

      3、首元素选择器          :first

          :first 选择器选取第一个元素。

          语法:$(":first")

      4、末元素选择器          :last

      5、非元素选择器          :not(selector)

      6、偶元素选择器          :even

      7、奇元素选择器          :odd

      8、相等元素选择器      :eq(index)

      9、大于元素选择器      :gt(index)

       10、小于元素选择器    :lt(index)

       11、标题元素选择器    :header(index)

  3、内容过滤选择器

      1、空内容选择器           :emoty

      2、元素内容选择器       :has(selector)

      3、父元素选择器           :parent

  4、可见性过滤器

      1、隐藏元素选择器         :hidden

      2、可见元素选择器         :visible

时间: 2024-07-30 07:32:34

JQuery——第2课、事件,包装集的相关文章

jQuery实战:创建元素包装集,选择将被操作的元素

看完你能学到什么? 1.利用基本CSS选择器 2.利用子选择器.容器选择器和特性选择器 3.通过位置选择 4.利用自定义jQuery选择器 几乎使用任何jQuery方法的时候,我们必须做的第一件事,就是选择将被操作的页面元素.有时,想要选择的元素集合是易于描述的,例如"页面上的所有链接元素".有时,需要比较复杂的描述,比如"拥有CSS类leftchild的偶数的段落 ". 庆幸的是,jQuery提供了健壮的选择器语法,让我们能轻松,优雅和简明地指定几乎人和元素集合.

jQuery复习—包装集

jQuery包装器 Part1:jQuery包装器的用法 一.通过包装器方法选择和包装将要操作的DOM元素 $()函数返回特殊的JavaScriopt对象(收集到了JavaScirpt元素并添加了拓展功能),它包含与选择器相匹配的DOM元素数组,这个数组中的元素是按照在文档中的顺序排列的.这个对象拥有大量有用的预定义方法,可作用于已收集的元素集合. 特点: (1):jQuery包装器方法,当执行完毕后(比如隐藏操作)会返回相同的一组元素,以便为另一个操作做准备. 例子:$("div.notLon

jQuery 包装集 选择器

1.Dom对象和jQuery包装集转换 在传统的javascript开发中,我们都是首先获取Dom对象,比如: var div = document.getElementById("testDiv");var divs = document.getElementsByTagName("div"); 我们经常使用 document.getElementById 方法根据id获取单个Dom对象, 或者使用 document.getElementsByTagName 方法

Dom对象和jQuery包装集

Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getElementById方法来获取Dom对象.在事件触发函数中,我们还可以通过this来获取引用事件触发对象.或者,我们也可以通过event.target或event.srcElement来获取引发事件的Dom对象. 注意,此处,我们获得的都是Dom对象. jQuery包装集 jQuery包装集可以说是Dom对象的扩充.

jQuery(0)——Dom对象和jQuery包装集

Dom对象和jQuery包装集 开始学习jQuery,没想到还要知道这个概念. Dom对象 DOM(Document Object Model)文档对象模型 在w3c中是这样说明它的: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 Java

jquery的 包装集

jquery的包装集: jquery包装集 指: 通过 $("exp")会筛选出页面中满足表达式的一组元素,这一组元素就属于jquery包装集的元素, 包装集是一个集合, 常用的方法:获取包装集中元素的个数(length或者size()),通过下标获取包装集中的某个元素(get(index)这时会转换成js对象,不能使用jquery的方法,要用$()再包装),获取 元素的包装集中的位置(index(ele));        

jQuery 包装集

一.创建元素 1.jQuery内部使用document.createElement创建元素 实例: //jQuery 源代码 方法一: $("<div></div>").css({ 'width': '100px', 'height': '50px', 'padding': '10px', 'border': '3px solid red' }).html('我是jQuery动态创建的div').appendTo('body'); 方法二: $("&l

从零开始学习jQuery (三) 管理jQuery包装集

本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言 本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明. 本章内容很少, 主要讲解动态创建元素和操作jQuery

JQuery包装集size,length,index,slice,find,filter,is,children,next,nextAll,parent,parents,closest,siblings,add,end,andSelf的用法

在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <