jQuery基础语法与元素选择详解
需积分: 9 145 浏览量
更新于2024-09-15
收藏 611KB PDF 举报
本文档主要介绍了jQuery语法的基础知识和常用技巧，适合初学者和进阶者参考。jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理和动画等功能的实现，使得网页开发更加高效。
首先，文章强调了如何在HTML文档中引入jQuery。有以下几种方式：
1. 直接引用本地文件：
```html
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
```
2. 使用Google的CDN（内容分发网络）：
```html
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
```
3. 或者使用Microsoft的CDN：
```html
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
```
文档就绪函数`$(document).ready()`是jQuery中的一个重要概念，它确保在DOM加载完成后再执行函数中的jQuery操作，避免了在页面加载初期就可能存在的未加载完成的问题。其基本语法如下：
```javascript
$(document).ready(function(){
// 在这里放置jQuery函数
});
```
文章接着讲解了jQuery的基本语法结构，即`$(selector).action()`，其中`selector`用于选择元素，`action()`则是对选中的元素执行的操作。例如：
- `$(this).hide()`：隐藏当前元素。
- `"p".hide()`：隐藏所有段落。
- `"p.test".hide()`：隐藏所有class为"test"的段落。
- `"#test".hide()`：隐藏所有id为"test"的元素。
jQuery提供了丰富的元素选择器，如：
- `"p"`：选取所有的 `<p>` 元素。
- `"p.intro"`：选取所有class为 "intro" 的 `<p>` 元素。
- `"p#demo"`：选取id为 "demo" 的第一个 `<p>` 元素。
此外，jQuery还支持属性选择器，通过XPath表达式来筛选带有特定属性的元素，例如：
- `$("[href]")`：选取所有带有href属性的元素。
- `$("[href='#']")`：选取所有href值等于 "#" 的元素。
- `$("[href!='#']")`：选取所有href值不等于 "#" 的元素。
- `$("[href$='.jpg']")`：选取所有href值以 ".jpg" 结尾的元素。
这篇文档涵盖了jQuery基础语法的选择器和常用操作，对于理解和掌握jQuery在实际项目中的应用具有较高的参考价值。通过理解并熟练运用这些内容，开发者可以更有效地编写简洁、高效的JavaScript代码。
jQuery 基础知识
2
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
语法
描述
$(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 名称冲突
剩余10页未读，继续阅读
2012-12-26 上传
2012-05-30 上传
2011-09-12 上传
2019-07-27 上传
2011-11-08 上传
2012-12-15 上传
2013-04-11 上传
2010-09-13 上传
2011-05-31 上传
糊糖
- 粉丝: 1
- 资源: 8
我的内容管理
展开
