五、jQuery 选择器
选择器允许您对元素组或单个元素进行操作。
1、jQuery 选择器
在前面的章节中,我们展示了一些有关如何选取HTML元素的示例。
关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。
jQuery元素选择器和属性选择器允许您通过签名、属性名或内容对HTML元素进行选择。
选择器允许您对HTML元素进行操作。
在HTML DOM术语中:
选择器允许您对DOM元素组或单个DOM节点进行操作。
2、jQuery元素选择器
jQuery使用css选择器来选取HTML元素。
$("p")选取<p>元素。
$("p.intro")选取所有class="intro"的<p>元素。
$("p#demo")选取所有id="demo"的<p>元素。
3、jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于“#”元素。
$("[href!='#']")选取所有带有href值不等于“#”的元素。
$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素。
4、jQuery CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性。
更多的选择器实例
语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
六、jQuery事件
jQuery 是为事件处理特别设计的。
1、jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件所调用的方法。术语由事件“触发”(或“激发”)经常会被禁用。
通常会把jQuery代码放到<head>部分的事件处理方法中:
当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素:
$("p").hide();
2、单独文件中的函数
如果你的网站包含许多页面,并且你希望你的jQuery函数易于维护,那么请把你的jQuery函数放到独立的.js文件中。
当我们在教程中演示jQuery时,会将函数直接添加到<head>部分中。不过,把它们放到一个单独的问件中会更好,就像这样(通过src属性来引用文件):
实例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
3、jQuery名称冲突
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数(比如Prototype)同样使用$符号。
jQuery使用名为noConflict()的方法来解决该问题。
var jq=jQuery.noConflict(),帮助你使用自己的名称(比如jq)来代替$符号。
4、结论
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
(1)把所有 jQuery 代码置于事件处理函数中
(2)把所有事件处理函数置于文档就绪事件处理器中
(3)把 jQuery 代码置于单独的 .js 文件中
(4)如果存在名称冲突,则重命名 jQuery 库
5、jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件