jQuery的选择器
2024-06-05 03:21:49
1. jQuery的基本选择器
代码示例如下所示：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的基本选择器</title><script type="text/javascript" src="jquery.js"></script><script>$(function () {//三种方式获取jQuery对象var jQuery_box1 = $("#box");var jQuery_box2 = $(".box");var jQuery_box3 = $("div");//操作标签选择器
jQuery_box3.css({"width": "100px","height": "100px","margin-top": "10px",});//操作类选择器（隐式迭代， 不用单个设置）jQuery_box2.css("background", "green");jQuery_box2.text("我是类选择器");//操作id选择器jQuery_box1.css("background", "yellow");jQuery_box1.text("我是id选择器")})</script>
</head>
<body><div id="box"></div><div class="box"></div><div class="box"></div>
</body>
</html>显示结果如下图：
2. 层级选择器
代码如下：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的层级选择器</title><script src="jquery.js" type="text/javascript"></script><script type="text/javascript">$(function(){var jQuery_li = $("ul li");jQuery_li.css({"margin": "5px","background": "pink"});var jQuery_other_li = $("ul>li");jQuery_other_li.css("background", "red")});</script>
</head>
<body><ul><li>111</li><li>222</li><li>333</li><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol></ul>
</body>
</html>显示的效果， 如下图所示：
3. 基本过滤选择器
代码如下：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jQuery的基本过滤选择器</title><script type="text/javascript" src="jquery.js"></script><script>$(function () {//奇数$("li:odd").css("color", "green");//偶数$("li:even").css("color", "yellow");//选中index = 2 的元素$("li:eq(2)").css("font-size", "30px");//index > 2 的元素$("li:gt(2)").css("font-size", "40px");//index < 2 的元素$("li:lt(2)").css("font-size", "20px");})</script>
</head>
<body><ul><li>This is the first line.</li><li>This is the second line.</li><li>This is the third line.</li><li>This is the fourth line.</li><li>This is the fifth line.</li></ul>
</body>
</html>显示结果为：
4. 属性选择器
示例代码如下：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的属性选择器</title><script type="text/javascript" src="jquery.js"></script><script>$(function () {//匹配所有含有id属性的标签名元素$("li[id]").css("color", "red");//匹配className = line 的元素$("li[class=line]").css("font-size", "30px");//匹配所有不含class的属性， 或者className != line的元素$("li[class != line]").css("font-size", "40px");//匹配给定的元素是以某些值开始的元素$("input[name ^= username]").css("background", "green");//匹配给定的元素是以某些值结束的元素$("input[name $= 2]").css("background", "yellow");//
$("button[class *= btn]").css("background", "#ff6700");})</script>
</head>
<body><div id="box"><h2 class="title">属性选择器</h2><ul><li id="li1">This is the first line.</li><li id="li2" class="line">This is the second line.</li><li class="line">This is the third line.</li><li class="another_line">This is the fourth line.</li></ul><form action=""><input type="text" name="username0" value="0" checked="checker"><input type="text" name="username1" value="1"><input type="text" name="username2" value="2"><input type="text" name="username3" value="3"><br><button class="btn-first">按钮1</button><button class="btn-second">按钮2</button><button class="btn-third">按钮3</button><button class="btn-fourth">按钮4</button></form></div>
</body>
</html>显示的结果如下图所示：
5. 筛选选择器
示例代码如下所示：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的筛选选择器</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function () {//获取第n个元素， 数值从0开始$("span").eq(1).css("color", "red");//获取第一个元素 :first$("span").first().css("color", "green");//获取最后一个元素 :last$("span").last().css("color", 'green');//查找span的父标签$("span").parent(".p").css({"width": "200px","height": "100px","background": "grey"})//选择所有的兄弟标签， 不包括自己$(".list").siblings("li").css("color", "blue");//查找所有的后代元素$("div").find("button").css("background", "yellow");//不写参数， 代表获取所有的子元素$("ul").children().css({"background": "green","margin-top": "10px"});})</script>
</head>
<body><div id="box"><p class="p"><span>第一个span标签</span><span>第二个span标签</span><span>第三个span标签</span></p><button>按钮</button></div><ul><li class="list">This is the first line.</li><li>This is the second line.</li><li>This is the third line.</li><li>This is the fourth line.</li></ul>
</body>
</html>显示结果如下图所示：
转载于:https://www.cnblogs.com/yang-wei/p/9495435.html
jQuery的选择器相关推荐
- jQuery的选择器（一）
2019独角兽企业重金招聘Python工程师标准>>> jQuery选择器完全继承CSS风格,jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery的选择器包 ...
- jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
- jQuery 基础选择器/层级选择器/隐式迭代
jQuery 选择器 jQuery 层级选择器 隐式迭代(重要) <!DOCTYPE html> <html lang="en"><head>& ...
- java与jquery的选择器区别_JQuery选择器
原标题:JQuery选择器 声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. JQuery 介绍: 用于搜索H ...
- JQuery简介选择器
JQuery简介&选择器 文章目录 JQuery简介&选择器 一.jquery介绍 二.jquery加载 三.jquery选择器 1.id选择器 2.类选择器 3.元素选择器 4.全选 ...
- 第70天：jQuery基本选择器（一）
一.jQuery基本选择器 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascri ...
- jquery下 选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
- [jQuery] 说说看jQuery的选择器有哪些？
[jQuery] 说说看jQuery的选择器有哪些? 1.基本选择器: #id .element ..class .* .selector1... 2.层次选择器: ancestor descenda ...
- jQuery学习--选择器的使用
jQuery基本选择器 1. jQuery的ready事件 -> js的onload 2. 选择器的使用 1. jQuery的ready事件 -> js的onload 大多是第一种,匿名函 ...
- 浅谈jQuery的选择器
jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("A B") 查找A元素下面的所有子节点,包括非直接子节点 $("A>B") ...
最新文章
- 互联网协议 — 互联网的技术发展
- oracle重载操作符的例子
- 判断脚本，图片，CSS，iframe等是否加载完成
- ICCV 2021 | CMU朱俊彦团队：用一张草图轻松创建GAN模型
- php多进程有什么用,有关php多进程的用法举例
- matlab实现unix时间戳到标准时间的转换
- 字体--Ubuntu手记之系统配置
- Sub-Projects in Xcode(Xcode中的子项目)
- 【操作系统】进程の易错点解答
- protobuf协议_gRPC 使用 protobuf 构建微服务
- 基于信息熵确立权重的topsis法_基于信息熵和TOPSIS法的装备战场抢修排序决策模型...
- BZOJ 1597 [Usaco2008 Mar]土地购买 (斜率优化dp)
- QTableWidget
- 算法：回溯九 Plus在数字字符串中加入加号，求所有情况的和
- Windows的文件目录管理策略
- html5将网页保存成图片,保存网页为图片（保存整个网页为图片）
- 3D全息投影制作教程
- 密码库LibTomCrypt学习记录——（2.13）分组密码算法的工作模式——CCM加密认证模式
- javaScript学习手册：JS对象
- 将csv文件分割成多个文件