JQuery基础教程:选择元素(上)

jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素、子元素,等等。通过一个简单的例子,可以帮助我们理解文档各元素构成的树形结构:

<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>

这里,<html>是其他所有元素的祖先元素,换句话说,其他所有元素都是<html>的后代元素。<head>和<body>元素是<html>的子元素(但并不是它唯一的子元素)。因此除了作为<head>和<body>的祖先元素之外,<html>也是它们的父元素。 而<p>元素则是<div>的子元素(也是后代元素),是<body>和<html>的后代元素,是其他<p>元素的同辈元素

使用$()函数

    通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中,可以轻松地为jQuery对象绑定事件、添加漂亮的效果,也可以将多重修改或效果通过jQuery对象连缀到一起。为了创建jQuery对象,就要使用$()函数。这个函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数,随后我们就可以对匹配的元素集合应用jQuery方法。

有三种基本的选择符(当然还有其他的),标签名ID。这些选择符可以单独使用,也可以与其他选择符组合使用。在将方法连缀到$()工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说,这样就避免了使用for循环之类的显式迭代(这种迭代在DOM脚本编程中非常常见)

下面我们来看一个例子

时间: 2024-10-09 19:49:43

JQuery基础教程:选择元素(上)的相关文章

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jquery基础教程学习笔记一

最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注意的有: 1.事件传播,包括了事件捕获和事件冒泡,以及怎么消除事件传播的影响,以及应用事件传播. 主要的方法有:a.根据事件目标来确定操作,即event.target b.阻止事件传播,即event.stopPapogation c.理解默认事件和jquery事件的区别还有阻止默认事件,即preventDef

《jQuery基础教程》读书笔记

最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与javascript原生的window.onload()区别: $(document).ready():通过该方法注册的事件处理程序,会在DOM完全就绪并使用时调用.虽然这意味着所有元素对脚本而言都是可访问的,但是,却不意味着所有关联的文件都下载完毕.当HTML下载 完成并解析成DOM树之后,代码就可以开始运行

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

jquery之获取某个元素上的事件

jquery的给元素绑定的事件可以用data方法取出来 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的a

Ajax本地跨域问题 Cross origin requests are only supported for HTTP(针对jQuery基础教程第四版第六章)

出现的问题: 解决的步骤: 谷歌浏览器出现的效果: 针对jQuery基础教程(第四版),第六章  成功: 原文地址:https://www.cnblogs.com/qinghui258/p/8432569.html

jquery基础教程 - 第二章 选择元素

内容提要 1.网页中元素的介绍 2.如何通过CSS选择符在页面中查找元素 3.扩展jquery标准的CSS选择符 4.让选择页面元素更灵活的DOM遍历方法 本章重点:让我们能够在DOM中快捷而又轻松地获取元素或元素的集合 1.网页中元素介绍 1.1理解DOM -- JQUERY最大的特性之一就是它能够简化在DOM中选择元素的任务, DOM 充当网页和javascript之间的接口,它以对象网络而非纯文本的形式来表现html的代码 <html>是网页中的祖先元素: 搞清楚子元素,父元素,同辈元素

Jquery基础教程第二版学习记录

本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做什么:为什么需要jquery. 第二章:选择符工厂函数$()css选择符属性选择符自定义选择符DOM遍历方法 第三章:事件jQuery.noConflict([extreme]):运行这个函数将变量$的控制权让渡给第一个实现它的那个库.常用方法:(包括键盘,鼠标事件)blur([[data],fn]

jQuery基础教程第3章(增加)

3.2 处理简单的事件 3.2.1 简单的样式转换器 .on()方法,可以指定任何DOM事件,并为该事件添加一种行为. .removeClass()方法,可以为指定元素删除类. .addClass()方法,添加类. 3.2.3 利用事件处理程序的上下文 利用$()函数可以将DOM元素作为参数,而this关键字可以作为参数. 3种jQuery特性:1.在通过对.on()的一次调用为每个按钮都绑定相同的单击事件处理程序时,隐式迭代机制再次发挥了作用. 2.行为队列机制使得可以在同一个单击事件上绑定了