第三章 jQuery
2024-06-20 15:38:43
内容来源于蓝桥杯竞赛，自己根据这个题纲重新巩固下前端的知识
第三章 jQuery
基本选择器
元素选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>元素选择器</title><script>$(function () {$("div").css("color", "blue"); // 设置 div 标签中的字体颜色为蓝色$("div").css("text-align", "center"); // 设置 div 标签中的字居中$("div").css("width", "100px"); // 设置 div 元素的宽度为 100 个像素$("div").css("height", "50px"); // 设置 div 元素的高度为 50 个像素$("div").css("border", "1px solid yellow"); // 设置 div 元素的边框样式});</script></head><body><div>蓝桥云课</div></body>
</html>
ID 选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>id 选择器</title><script>$(function () {$("#test").css("color", "blue");});</script></head><body><span id="test">蓝桥云课</span><span>是国内领先的 IT 在线编程及在线实训学习平台。</span></body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>类选择器</title><script>$(function () {$(".test").css({ // $("div.test").css({color: "blue",width: "200px",height: "80px",border: "2px solid yellow",});});</script></head><body><div class="test"><span>蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。</span></div></body>
</html>
群组选择器
群组选择器可以让我们同时定义多个选择器，多个选择器之间用 ,号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>群组选择器</title><script>$(function () {$("h3,span").css("color", "blue");});</script></head><body><h3>欢迎选择蓝桥云课</h3><span>蓝桥云课是国内领先的 IT 在线编程及在线实训学习平台。</span></body>
</html>
通配符选择器
通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。
我们使用 $("*").css({"list-style":"none","color":"#b6c967"}) 给页面设置通用样式：去掉列表样式和设置字体颜色为绿色。<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>通配符选择器</title><style>div {width: 200px;height: 150px;border: 1px solid;margin-top: 10px;}</style><script src="jquery-3.6.0.min.js"></script><script>$(function () {$("*").css({ "list-style": "none", color: "#b6c967" });});</script></head><body><div id="list1"><ul>水果：<li>苹果</li><li>李子</li><li>西瓜</li></ul></div><div id="list2"><ul>蔬菜：<li>西红柿</li><li>大白菜</li><li>小米辣</li></ul></div></body>
</html>
层次选择器
后代选择器
$("M N");<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>后代选择器</title><script>$(function () {$("#father p").css("color", "blue");});</script></head><body><div id="father"><p>Hello</p><p>lan qiao</p><div id="child"><p>我是蓝桥云课</p></div></div></body>
</html>
如上例中 father div中所有的 p 标签都会被应用
子代选择器
$("M>N");
如上例中 此时只用 father中的p标签被应用，child中不会被应用
兄弟选择器
兄弟选择器是查找元素的兄弟节点（即同级节点）从而进行操作
$("M~N");
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>兄弟选择器</title><script>$(function () {$("#child~p").css("color", "blue");});</script></head><body><div id="father"><p>Hello</p><p>lan qiao</p><div id="child"></div><p>我是蓝桥云课</p><p>我是蓝桥云课</p><p>我是蓝桥云课</p></div></body>
</html>
如上例中id=child后的p标签被应用指定样式
相邻选择器
$("M+N"); // 选择下一个兄弟节点 N
只设置相邻的，即之后一个
属性选择器
属性选择器就是根据属性来选择元素，其中我们可以使用正则表达式中的一些符号来选择带有某些属性值的元素
| 选择器 | 说明 |
|---|---|
E[attr]
|
对带有 attr 属性的 E 元素进行操作。 |
E[attr="value"]
|
对 attr 值等于 value 的 E 元素进行操作。 |
E[attr !="value"]
|
对 attr 值不等于 value 的 E 元素进行操作。 |
E[attr ^="value"]
|
对带有 attr 属性，其属性值以 value 字符串开头的 E 元素进行操作。 |
E[attr $="value"]
|
对带有 attr 属性，其属性值以 value 字符串结尾的 E 元素进行操作。 |
E[attr *="value"]
|
对带有 attr 属性，其属性值包含 value 字符串的 E 元素进行操作。 |
E[attr ~="value"]
|
对带有 attr 属性，其属性值为 value 或者包含 value 的 E 元素进行操作。 |
| `E[attr | =“value”]` |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>属性选择器</title><script>$(function () {$("div[id]").css("font-size", "30px"); // 选择了带有 ID 选择器的元素。$("div[id='item2']").css("color", "blue");// 选择了 id 名为 item2 的元素$("div[id !='item2']").css("text-shadow", "2px 2px 2px #78c4d4");$("body[class ^='c']").css("text-align", "center");//选择了 class 名以 c 开头的元素});</script></head><body class="content"><div id="item1">蓝桥云课</div><div id="item2">蓝桥云课</div><div class="test1">蓝桥云课</div><div class="test2">蓝桥云课</div></body>
</html>
伪类选择器
位置伪类选择器
| 选择器 | 说明 |
|---|---|
| :first | 选取指定元素的第一个该元素。 |
| :last | 选取指定元素的最后一个该元素。 |
| :odd | 选取指定元素序号为奇数的所有该元素。 |
| :even | 选取指定元素序号为偶数的所有该元素。 |
| :eq(n) | 选取指定元素的第 n 个该元素。 |
| :lt(n) | 选择指定元素中小于 n 的所有该元素。 |
| :gt(n) | 选取指定元素中大于 n 的所有该元素。 |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>位置伪类选择器</title><script>$(function () {$("li:first").css("color", "#a7c5eb");$("li:last").css("color", "#ffc478");$("li:odd").css("color", "#c1a1d3");$("li:even").css("font-size", "25px");$("li:eq(4)").css("text-shadow", "2px 2px 2px #96bb7c"); // 选择了下标为 4 的列表项元素。（下标从 0 开始）// $("li:lt(4)").css("text-shadow","2px 2px 2px #96bb7c");// 选择了索引下标小于 4 的列表项元素// $("li:gt(4)").css("text-shadow","2px 2px 2px #96bb7c");// 选择了索引下标大于 4 的列表项元素});</script></head><body>水果清单：<ul><li>苹果</li><li>梨子</li><li>葡萄</li><li>西瓜</li><li>樱桃</li><li>草莓</li><li>桑葚</li></ul></body>
</html>
可见性伪类选择器
| 选择器 | 说明 |
|---|---|
| :visible | 选取所有可见元素。 |
| :hidden | 选取所有不可见元素。 |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="jquery-3.6.0.min.js"></script><title>可见性伪类选择器</title><style>/*不可见元素*/.select1 {display: none; /*元素隐藏*/}</style><script>$(function () {$("#btn1").click(function () {$("div:hidden").css("display", "block"); /*让隐藏元素显示到页面上*/});$("#btn2").click(function () {$("div:visible").css("color", "blue"); /*改变显示元素的字体颜色*/});});</script></head><body><div class="select1">
第三章 jQuery相关推荐
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- 锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记 第三章 jQuery中的DOM操作 jQuery中的事件 事件绑定 bind方法 合成事件 hover方法 toggle方法 事件冒泡 事件对象 停止事件冒泡 阻止默认行为 ...
- “JavaScript patterns”中译本 - 《JavaScript 模式》第三章
第三章 直接量和构造函数 JavaScript中的直接量模式更加简洁.富有表现力,且在定义对象时不容易出错.本章将对直接量展开讨论,包括对象.数组和正则表达式直接量,以及为什么要使用等价的内置构造器函 ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 【前端】第三章 Vue
第三章 Vue 文章目录 第三章 Vue 一.Vue 1.介绍 2.Vue 的 MVVM 模型 一.Vue 1.介绍 Vue 是一套用于构建用户界面的渐进式框架.与其他大型框架不同的是,Vue 被设计 ...
- 【高校宿舍管理系统】第三章 Layui整合Axios
第三章 Layui整合Axios 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录 第三章 Layui整合Axios 前言 一.下 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- 搭建asp会议签到系统 第三章 会议签到
搭建asp会议签到系统 第一章 账密登录 第二章 生成会议签到二维码 第三章 会议签到 第四章 会议统计 第三章 会议签到 搭建asp会议签到系统 前言 一.制作checkin前端页面 二.读取并展示 ...
- 开发一个简单网站--第三章:相知
第三章:相知 <12>.搜索用户search.php <13>.搜索用户后台getsearchdata.php <14>.搜索论坛(投票)fourum.php &l ...
最新文章
- SAP MM 给合同的ITEM上传附件以及附件查询
- java精确除法计算，四舍五入 Java问题通用解决代码
- Docker架构、镜像及容器的安装和基本操作
- WebCore中的渲染机制（二）：块和内嵌(Blocks and Inlines)
- webpack打包后的文件夹是空的_vue+webpack 打包文件 404 页面空白的解决方法
- 常用数学符号的 LaTeX 表示方法（附代码）
- JAVA并发编程的基础
- 怎样修改美国的服务器节点,美国云服务器节点怎么
- DSP程序死机(跑飞)的一些情况-硬件原因
- 决策树算法总结（下：CART决策树）
- PyCharm小技巧分享—主菜单消失再显示
- DNS 报文结构和个人 DNS 解析代码实现——解决 getaddrinfo() 阻塞问题
- 洛谷 P1879 [USACO06NOV]玉米田Corn Fields
- ThinkPHP源码解析之控制器
- 平板电脑：apple、中国挑大梁
- 尾部关性尾部风险平价和圣杯分布
- 允许在CAD中操作超链接！Aspose.CAD最新版v19.9新功能你都了解吗？
- java实体类生成mysql表_springboot+mybatis通过实体类自动生成数据库表的方法
- oracle 层次查询 connect by
- 西班牙插画师 Alex Vede
热门文章