jQuery框架各种选择器的使用

最新推荐文章于 2024-03-23 16:46:50 发布

MagicMHD

最新推荐文章于 2024-03-23 16:46:50 发布

阅读量839

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/MagicMHD/article/details/81285315

版权

本文介绍了jQuery的基本概念，包括其作为JavaScript轻量级框架的角色，以及在项目中引入的方式。文章重点讲解了jQuery的各种选择器，如基本选择器（ID、元素、类和通配符选择器），层级选择器（祖先、父-子、相邻和兄弟选择器），以及基本过滤选择器（first、last、even和odd）。每个选择器都配合实例代码进行了详细演示。

摘要由CSDN通过智能技术生成

一、有关jQuery的简单介绍

1、jQuery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

2、Jquery它是一个库(框架)，要想使用它，必须先引入！

jquery-1.8.3.js：一般用于学习阶段。

jquery-1.8.3.min.js：用于项目使用阶段

3、所有的jquery代码写在页面加载函数

$(function(){

Jquery代码

});

二、jquery各种选择器的使用

1、基本选择器

id选择器：$(“#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：*

多个选择器共用(并集)

下面使用代码进行演示：

(1)首先要先引入jQuery的库

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

这里使用的是jquery1.8.3的库。

（2）然后为了方便演示，我先简单设计了一些页面代码如下：

html部分：

<body>
		<input type="button" id="btn1" value="选择为one的元素"/>
		<input type="button" id="btn2" value="选择样式为mini的元素"/>
		<input type="button" id="btn3" value="选择所有的div元素"/>
		<input type="button" id="btn4" value="选择所