jQuery选择器 管理科学与工程学科 耿方方
jQuery选择器 管理科学与工程学科 耿方方
主要内容 什么是选择器 选择器的优势 选择器详述
主要内容 什么是选择器 选择器的优势 选择器详述
什么是选择器 在页面中为某个元素添加属性或事件时,必须先准确地找到元素 在 jQuery库中,可以通过选择器实现这一重要核心功能。 选择器是 jQuery的根基,在 jQuery中无论是对事件处理、遍历D0M还是 Ajax操作都依赖于选择器,熟练的使用选择器不仅能简化代码,而且 可以达到事半功倍的效果。 根据所获取页面中元素的不同,可以将 jQuery选择器分为:基本选择 器、层次选择器、过滤选择器、表单选择器四大类。而过滤选择器又 可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属 性过滤选择器、子元素过滤选择器、表单对象过滤选择器六种
什么是选择器 在页面中为某个元素添加属性或事件时,必须先准确地找到元素—— 在jQuery库中,可以通过选择器实现这一重要核心功能。 选择器是jQuery的根基,在jQuery中无论是对事件处理、遍历DOM还是 Ajax操作都依赖于选择器,熟练的使用选择器不仅能简化代码,而且 可以达到事半功倍的效果。 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择 器、层次选择器、过滤选择器、表单选择器四大类。而过滤选择器又 可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属 性过滤选择器、子元素过滤选择器、表单对象过滤选择器六种
什么是选择器 基本选择器]匚层次选择器 过滤选择器[表单选择器 简单过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单对象属性过滤
什么是选择器
选择器的优势 与传统的 JavaScriυt获取页面元素和编写事务相比, jQuery选择器具有明显的优势,具体表现在以下两个方面: 代码更简单 由于在 jQuery库中,封装了大量可以通过选择器直接调用 的方法或函数,使编写代码更加简单轻松,简单几行代码就 可实现较为复杂的功能
选择器的优势 与传统的JavaScript获取页面元素和编写事务相比 , jQuery选择器具有明显的优势,具体表现在以下两个方面: 代码更简单 由于在jQuery库中,封装了大量可以通过选择器直接调用 的方法或函数,使编写代码更加简单轻松,简单几行代码就 可实现较为复杂的功能:
选择器的优势 完善的检测机制 在传统的 JavaScript代码,给页面中某元素设置事务时必须 先找到该元素,否则,浏览器将提示出错信息,影响后续代 码的执行。因此,为避免出错,先检测元素是否存在,然后 再运行代码,从而导致代码冗余,影响执行效率 在 jQuery选择器定位页面元素时,无需考虑所定位的元素在 页面中是否存在,即使该元素不存在,浏览器也不提示出错 信息,极大地方便了代码的执行效率
选择器的优势 完善的检测机制 在传统的JavaScript代码,给页面中某元素设置事务时必须 先找到该元素,否则,浏览器将提示出错信息,影响后续代 码的执行。因此,为避免出错,先检测元素是否存在,然后 再运行代码,从而导致代码冗余,影响执行效率。 在jQuery选择器定位页面元素时,无需考虑所定位的元素在 页面中是否存在,即使该元素不存在,浏览器也不提示出错 信息,极大地方便了代码的执行效率
选择器详述 基本选择器 基本选择器 基本选择器是 jQuery中使用最频繁的选择器,它由元素id、 class.、元素名、多个选择符组成,通过基本选择器可以实现 大多数页面元素的查找,其具体使用说明如下表15-01所示: 表1501基本选择器语法 选择器 返呵值 根据提供的属性值匹配一个元素 单个元素 element 根据提供的元素名匹配所有的元素 元素集合 class 根据提供的类名称匹配所有的元素 元素集合 匹配所有元素 元素集合 selector, selector将每一个选择器匹怕元素合并后一起返回 元素集合
选择器详述 基本选择器 基本选择器 基本选择器是jQuery中使用最频繁的选择器,它由元素id、 class、元素名、多个选择符组成,通过基本选择器可以实现 大多数页面元素的查找,其具体使用说明如下表15-01所示:
选择器详述 基本选择器 id ID选择器是“#id”,顾名思义就是利用DOM元素的id属性值 来匹配的元素,并以 jQuery包裝集的形式返回给对象。 ID选择器的使用方法 C"#id"); 其中id为要查元素的id属性值。例如,要查询id属性值为 username的元素,可以使用下面的 jQuery代码: $(“# username
选择器详述 基本选择器 id ID选择器是“#id”,顾名思义就是利用DOM元素的id属性值 来匹配的元素,并以jQuery包装集的形式返回给对象。 ID选择器的使用方法: 其中id为要查元素的id属性值。例如,要查询id属性值为 username的元素,可以使用下面的jQuery代码: $(“#username”) $("#id");
选择器详述 基本选择器 实例1: nput type="buon"vaue="查看输入的值"/> ID选择器 S(function S(input[type='button']").click(functionOf var inputValue=$(#test"). valo alert(inputValue) );
选择器详述 基本选择器 实例1: ID选择器 $(function(){ $("input[type='button']").click(function(){ var inputValue=$("#test").val(); alert(inputValue); }); });
选择器详述 基本选择器 元素选择器 元素选择器是根据元素名称匹配相应的元素。 ID选择器的使用方法: sCelement")」 其中 element为要查询元素的标记名。例如,要查询全部的 div元素,可以使用下面的 jQuery代码: $(“div”)
选择器详述 基本选择器 元素选择器 元素选择器是根据元素名称匹配相应的元素。 ID选择器的使用方法: 其中element为要查询元素的标记名。例如,要查询全部的 div元素,可以使用下面的jQuery代码: $(“div”) $("element");