标签：JQuery 所有 span 标签 前端 元素 五十二 div 选择器
一、JQuery
是一个工具，简单方便实现DOM操作
python里可能叫模块贴切一点，但在前端叫"类库"
使用注意事项： 一定要先导入后使用
基础语法
$(selector).action()
样式演变，原本应该jQuery();
为了简化$();
原生js与jquery的比较：
二、查找标签
1、基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery-3.4.1.js"></script>
</head>
<body>
<span class="span">div上面的span标签</span>
<div id="d1">div
<p>div>p
<span>div>p>span</span>
</p>
<span id="d3">div>span</span>
</div>
<span class="c1">span</span>
</body>
</html>
View Code
id选择器：$("#id")
标签选择器：$("tagName")
class选择器：$(".className")
所有元素选择器：$("*")
组合选择器：$("#id, .className, tagName")
2、层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery-3.4.1.js"></script>
</head>
<body>
<span class="span">div上面的span标签</span>
<div id="d1">div
<p>div>p
<span>div>p>span</span>
</p>
<span id="d3">div>span</span>
</div>
<span class="c1">span</span>
</body>
</html>
View Code
$("x y"); x的所有后代y（子子孙孙）
$("x > y"); x的所有儿子y（儿子）
$("x + y") 找到所有紧挨在x后面的y
$("x ~ y") x之后所有的兄弟y
3、基本筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery-3.4.1.js"></script>
</head>
<body>
<ul>
<li id="1">书籍1</li>
<li>书籍2</li>
<li id="3">书籍3</li>
<li>书籍4</li>
<li id="5">书籍5</li>
</ul>
</body>
</html>
View Code
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
4、属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例子：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); 取到checkbox类型的input标签
$("input[type!='text']"); 取到类型不是text的input标签
5、表单筛选器
三、筛选器方法
四、操作标签
标签：JQuery,所有,span,标签,前端,元素,五十二,div,选择器 来源： https://www.cnblogs.com/zhangguosheng1121/p/10969678.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。