jQuery教程(二)

五、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)          触发或将函数绑定到被选元素的鼠标悬停事件


你可能感兴趣的:(jquery,事件,jQuery事件函数,单独文件中的函数,jQuery名称冲突,jQuery元素选择器)