jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签
选择器:
基本选择器(同css)
id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合使用 $("div.c1")所有元素选择器 $('*')组合选择器 $('#id, .className, tagName')
层级选择器: (同css)
x和y可以为任意选择器
$("x y")$("x>y")$("x+y")s$("x~y")
属性选择器:
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
示例1:
示例2:
// 示例,多用于input标签 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
筛选器:
基本筛选器(选择之后进行过滤)
:first // 第一个:last // 最后一个:eq(index) // 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素,从 0 开始计数:odd // 匹配所有索引值为奇数的元素,从 0 开始计数:gt(index) // 匹配所有大于给定索引值的元素:lt(index) // 匹配所有小于给定索引值的元素:not(元素选择器) // 移除所有满足not条件的标签:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
表单筛选器(多用于找form表单里面出现的input标签,通过属性选择器找肯定也是没问题的,这样就是写着简单一些)
:text:password:file:radio:checkbox:submit:reset:button
示例: $(":checkbox") // 找到所有的checkbox
$("input:enabled") // 找到可用的input标签
表单的对象属性:
:enabled:disabled:checked:selected
注意使用$(":checked")时,会把input标签中有checked属性的标签和select中option标签被选中的标签都筛选出来,在获取时要加上input即($"input:checked") 筛选器方法(将来用的很多) 下一个元素:
$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2") # 直到找到id为i2的标签就结束查找,不包含它
上一个元素:
$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")
父亲元素:
$("#id").parent()$("#id").parents() //查找当前元素的所有的父辈元素(爷爷辈,祖先辈都能找到)$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
儿子和兄弟元素:
$("#id").children(); // 儿子们$("#id").siblings(); // 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选
查找: 搜索所有与指定表达式匹配的元素.这个函数是找出正在处理的元素的后代的好方法
$("div").find("p") 等价于 $("div p")
筛选: 筛选出与指定表达式匹配的元素集合.这个方法用于缩小匹配的范围.用逗号分隔多个表达式 $("div").filter(".c1") 等价于$("div.c1") // 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div,和find不同,find是找div标签的子子孙孙中找到一个符合条件的标签 补充:(和前面使用冒号的写在选择器里面的一样,这些是方法)
.first() //获取匹配值的第一个元素.last() //获取匹配的最后一个元素.not() //从匹配元素的集合中删除与指定表达式匹配的元素.has() //保留包含特定后代的元素,去掉那些不含有指定后代的元素.eq() //索引值等于指定值的元素
自定义模态对话框:
使用jQuery实现弹出和隐藏功能。jQuery版自定义模态框:
代码:
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自定义模态框</title><style>.cover {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: darkgrey;z-index: 999;}.modal {width: 600px;height: 400px;background-color: white;position: fixed;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px;z-index: 1000;}.hide {display: none;}</style> </head> <body> <input type="button" value="弹" id="i0"><div class="cover hide"></div> <div class="modal hide"><label for="i1">姓名</label><input id="i1" type="text"><label for="i2">爱好</label><input id="i2" type="text"><input type="button" id="i3" value="关闭"> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script>var tButton = $("#i0")[0];tButton.onclick=function () { #jQuery绑定事件的时候也有个简单的方式,往后面学var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).removeClass("hide");$(modalEle).removeClass("hide");#jQuery版:#$(".cover,.modal").removeClass('hide'); #看完这个之后,去下面先学一下下面的标签操作中的样式操作那一节};var cButton = $("#i3")[0];cButton.onclick=function () {var coverEle = $(".cover")[0];var modalEle = $(".modal")[0];$(coverEle).addClass("hide");$(modalEle).addClass("hide");#jQuery版:#$(".cover,.modal").addClass('hide');} </script> </body> </html>
左侧菜单示例
单击菜单一,展示一些内容.点击菜单二,菜单一合并起来,然后菜单二里面的内容展示出来
代码:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>左侧菜单示例</title><style>.left {position: fixed;left: 0;top: 0;width: 20%;height: 100%;background-color: rgb(47, 53, 61);}.right {width: 80%;height: 100%;}.menu {color: white;}.title {text-align: center;padding: 10px 15px;border-bottom: 1px solid #23282e;}.items {background-color: #181c20;}.item {padding: 5px 10px;border-bottom: 1px solid #23282e;}.hide {display: none;}</style> </head> <body><div class="left"><div class="menu"><div class="title">菜单一</div><div class="items"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div><div class="title">菜单二</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div><div class="title">菜单三</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div></div> </div> <div class="right"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>$(".title").click(function (){ // jQuery绑定事件// 隐藏所有class里有.items的标签 $(".items").addClass("hide"); //批量操作 $(this).next().removeClass("hide");}); </script>
第二种写法:
第三种写法:
转载于:https://www.cnblogs.com/robertx/p/10390754.html
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏相关推荐
- jQuery对象,jQuery查找标签,层级选择器,属性选择器,表单筛选器,操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- jquery选择器之基本筛选器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
- jQuery 选择器和筛选器
1. jQuery 1. 选择器 $("") 1. 基本选择器 1. ID --> $("#d1") 2. 标签名 --> $("p&qu ...
- jQuery 的常用选择器,筛选器
jQuery jQuery 的简介 插件 :一个功能高度分装 类库 :工具库,提供操作工具,不提供具体功能 jQuery 是一个工具集合 框架 : 项目每一个组件都会提供出来.我们只需要引入框架语法, ...
- JQuery 基础(1)—— 基本介绍、选择器、筛选器(选择器的一种)
一.JQuery的基本概念 1.JQuery是什么? jquery是一款javaScript库,能更方便地处理HTML.事件.动画等,可以兼容多浏览器 2.如何选择版本? JQuery有三个大版本: ...
- JavaScript之jQuery够用即可(jQuery的引入、查找选择器、左侧菜单栏)
文章目录 一.写在前面 二.jQuery的引入 二.各种查找选择器 四.实例之左侧菜单栏 一.写在前面 JQuery世界上使用最广泛的一个库,它是一个轻量级的库,文件大小只有几十k,但是功能却相当强大 ...
- jquery-选择器-筛选器
使用基本 用前要先导入js文件 使用本地文件方式导入 使用在线的文件,用时需联网 1.官网jquery压缩版引用地址: 3.1.1版本: 3.0.0版本: 2.1.4版本: 2.百度压缩版引用地址: ...
最新文章
- 程序员:做测试开发每天忙于业务,看不到希望
- 遗传算法就是创造力的本质
- 使用RawSocket进行网络抓包
- 如何实现一个权限管理系统?(附源码)
- SFB 项目经验-57-Skype for business-录音系统-你拥有吗(模拟线路)
- Java设计模式 之 工厂方法模式
- MyBatis知多少(6)表现层与业务逻辑层
- SQL server注入
- 贪心/栈 - 去除重复字母
- HTML文件上传与下载
- 【招聘(深圳)】轻岁 诚聘.NET Core开发
- linux mysql提示1045_linux mysql ERROR 1045
- jQueryMobile新版中导航栏按钮消失的解决方法
- 计算机二级通关宝典-C语言篇
- vm虚拟机iso镜像linux系统下载地址,Vmware Tools ISO 虚拟机ISO系统镜像大全
- ascii码值为负数_C语言编程基础学习字符型数据的ASCII码值为何是负数?
- Junit 5 实现testsuite
- 群晖让usb打印机变成网络打印机
- 键盘对于程序员的价值
- linux vi 拷贝多行,vi 整行 多行 复制与粘贴