jQuery-01 选择器

原创已于 2022-03-10 22:14:58 修改 · 212 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2022-03-09 22:25:14 首次发布

jQuery是一个简化JavaScript操作的库，提供方便的API用于DOM操作、事件处理、动画制作和Ajax交互。要使用jQuery，首先需要在页面中引入jQuery库，可以从官方站点下载并放置在页面同一目录下。接着，可以使用$(document).ready()方法来确保在文档加载完成后执行jQuery代码。jQuery的选择器如$(#ID)、$(.classname)等使得选取页面元素变得简单。此外，还能进行样式修改，例如$(#oDiv).css(backgroundred)将设置指定div的背景色。掌握这些基础知识，能高效地使用jQuery进行网页开发。

官方概念：

jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。

个人理解：

jQuery就是JavaScript的升级版，封装了很多JavaScript基层代码，方面开发者调用。用少量的代码做足够多的事。

1，在页面中引用jQuery

在使用jQuery之前，我们需要在页面里引用它，主要的方式有两种，详情如下。

下载jQuery

可以从官方站点中下载 http://docs.jquery.com/download/

下载后，把下载的jquery.js文件放到与页面相同的文件夹中，如下所示

注意事项：

在引用外部js文件的script标签中不能编写代码，并且js与jQuery代码不能同时出现在一个逻辑中，执行不了。

2，jQuery的$(document).ready处理器

类似于window.onload处理器，jQuery具有自己相应的方法:

完整代码：

$(document).ready(function(){undefined

//jquery代码

});

简化代码：

$(function(){

//jquery代码

});

3，选择页面元素

在jQuery里，利用操作符$("")就可用选择HTML元素。


$("#ID"); //选择全部id为ID的元素
$(".classname")  //选择全部类目为classname的元素
$("div#elem")  //选择全部id为elem的<div>元素
$("ul li a.menu");  //类为"menu"且嵌套在列表项里的锚点
$("span") //选择全部span元素
$("p:even");   //全部下标为偶数段落
$("p:odd");    //全部下标为奇数段落
$("ul li");    //ul标签的后代选择器
$("ul>li");    //ul标签的子代选择器
$("ul>li:first");     //ul标签的子代选择器中第一个li标签
$("ul>li:last");       //ul标签的子代选择器中最后一个li标签
$("ul>li:eq(2)");    //ul标签的子代选择器中根据下标来选择li标签
$("#oDiv").css("background","red");    //设置div的背景颜色