JQuery常用方法与选择器详解

需积分: 37 140 浏览量更新于2024-07-18 收藏 38KB DOCX 举报

"这是一份关于JQuery常用方法的总结，涵盖了JQuery的下载、引入方式、CDN使用，以及核心概念如$符号的意义、DOM对象与JQuery对象的转换，还包括了各种选择器的详细解释，如基本选择器、层次选择器和过滤选择器的应用。" 在Web开发中，JQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。本资料主要聚焦于JQuery的常用方法，旨在帮助开发者快速理解和应用。首先，JQuery的官方下载地址是http://jquery.com/，提供压缩版和未压缩版。压缩版适用于生产环境，以减少页面加载时间。JQuery库通常在HTML文档的`<body>`标签底部引入，以确保在DOM加载完成后执行，例如：`<script src="jquery-3.1.0.js"></script>`。同时，也可以利用CDN（内容分发网络）来加速库的加载，如https://code.jquery.com/。 `$`符号是JQuery的核心，它是一个函数，可以用作选择器，如`$("#foo")`表示选择ID为"foo"的元素。JQuery选择器比CSS选择器更强大且兼容性更好，即使选择的元素不存在，JQuery也会返回一个空的对象集合。 `$(document).ready()`用于在DOM准备就绪时执行代码，等价于`window.onload`，但更快。它可以写作`$(document).ready(function(){})`或者简写为`$(function(){})`。 JQuery对象和DOM对象之间的转化是常见的操作。将DOM对象用`$()`包裹，即可转化为JQuery对象，如`$(document.getElementById('element'))`。反之，JQuery对象可以通过`.get(index)`或下标`[index]`获取DOM对象，如`$cr.get(0)`或`$cr[0]`。在选择器部分，基础选择器包括ID选择器（`$("#text")`）、类选择器（`$(".text")`）、标签选择器（`$("p")`）和通配符选择器（`("*")`）。层次选择器如后代选择器（`$("div span")`）、子元素选择器（`$("div > span")`）、相邻兄弟选择器（`$(".one + div")`）和后续兄弟选择器（`$("#two ~ div")`）提供了更复杂的元素选取能力。过滤选择器则用于进一步精确定位元素，如`$("li:first")`选取第一个`<li>`元素，`$("li:last")`选取最后一个，`$("li:eq(2)")`选取索引为2的`<li>`，还有`:not()`、`:even`和`:odd`等。此外，JQuery还提供了其他功能，如事件处理（`.click()`, `.hover()`）、动画效果（`.fadeIn()`, `.slideUp()`）、AJAX操作（`.ajax()`, `.load()`）和插件扩展等。理解并熟练掌握这些常用方法对于提高JQuery开发效率至关重要。在实际开发中，应根据项目需求灵活运用，解决实际问题，提升用户体验。

$("div[title|=text]") //选取属性为 title,属性值为”en”或以”text”为前缀的

<div>元素（前缀是指 en 后面用连字符”-“连接）

$("div[title~=text]") //选取属性为 title,属性值为用空格分隔的值，其中一

个等于”text”的<div>元素

$("div[id][title=text]") //选取拥有属性 id,title，并且 title 的属性值为”text”

的<div>元素

如何 text 变量，那么方法为:$(“div[title=’”+text+”’]”)

子元素过滤选择器：

$("ul li:nth-child(index/even/odd/equation") //选取每个<ul>*<li>元素，从 1 计算

$("ul li:first-child") //选取每个<ul>中第一个<li>元素

$("ul li:last-child") //选取每个<ul>中最后一个<li>元素

$("ul li:only-child") //选取每个<ul>中唯一一个子元素是<li>的<li>元素

注意：ul li 中 ul 才是父元素，即选取<ul>父元素下的<li>子元素，例如 ul li 可用

<div>代替$("div:first-child")，表示选取<div>下的第一个子元素

表单过滤选择器：

$("#form1:enable") //选 id 为”form1”的表单内的所有可用元素

$("#form2:disable") //选 id 为”form2”的表单内的所有不可用元素

$("input:checked") //选取所有被选中的<input>元素

$("select option:selected") //选取下拉选择框中所有被选中的选项元素

剩余18页未读，继续阅读

yyuanxiwen

粉丝: 8
资源: 4

JQuery常用方法与选择器详解

jQuery常用方法详解：示例对比与焦点管理

jQuery常用方法详解：操作DOM与属性管理

jQuery常用方法全集：经典操作与实例解析

jquery 常用方法

jquery常用方法

jQuery 常用方法

jQuery常用方法

jquery常用方法一览

jquery常用方法总结

jquery 常用方法精讲

最新资源