47 jquery 计时器 选择器 筛选器 左边菜单栏
主要内容:
1 jquery的使用方法 : 先导入包, 然后再使用
<scipt src="包"></scipt>
<scipt >console.log($('#d1').text());
</scipt>
2 .选择器 :
1) 基本选择器
id选择器
$('#id1')$('#id1')[0] jQuery对象根据索引值能够拿到具体的标签对象$('#id1')[0].innerText类选择器
$('.c1')
标签选择器
#('h2')组合选择器
$('.c1, h2')
2 ). 层级选择器
后代选择器 : $('div .c1') 找到div里所有包含.c1样式名的标签的子子代代
儿子选择器 : $(''div .c1') 找到div下面的儿子标签
毗邻选择器 : $('div .c1') 找到与div同级标签中的具有.c1样式名的下面相邻标签
兄弟选择器 : $('div .c1') 找到与div同级标签中的具有.c1样式名的所有标签
3) 属性选择器
1 ) [attribute] 找到具有该属性的标签
2 ) [attribute = value] $('[type="submit"]') 找到属性等于submit的值
3 ) [attribute != value] 找到不具有该属性的标签 的所有标签,html,body等
4 ) 基本筛选器
$('#u1>li:first')$('#u1 li:last') $('#u1 li:eq(3)') #索引是3的元素$('#u1 li:even') #索引是偶数的元素 odd所以是奇数的元素$('#u1 li:not(.l1)' #将有.l1样式名的标签移除$('div:has(span.c2)')#找后代中有span标签中的div标签 (找的是div标签)
5 ) 表单选择器
:text
:password
:submit
:checkbox:
:radio
:seleced
注意: 当checked的时候: 如果有select会把select选中, 应该写成$('input:checked')
3 筛选器
上一个.prev(),下一个next()
$('#l1').next()$('#l1').nextUntil('#l4')$('#l1').nextAll()
父标签.parent( ) 祖先选择器.parents()
$('#l2').parent()$('#l2').parents()
儿子标签.children( ) 和兄弟标签.siblings()
$('#u1').siblings()
w.fn.init(7) [div, div, div, input, input, input, select#ww, prevObject: w.fn.init(1)]0: div1: div2: div3: input4: input5: input6: select#wwlength: 7prevObject: w.fn.init [ul#u1]__proto__:$('#u1').children()
w.fn.init(5) [li#l1, li#l2, li#l3, li#l4, li#l5, prevObject: w.fn.init(1)]
查找.find() 查找与指定表达式匹配的元素.
$('#d1').find('.c1')
====等价于下面的
$('#d1 .c1')
筛选.filter() 筛选出与指定表达式匹配的元素的集合.
$('div').filter('.c1') 从结果中过滤出有c1样式类的
====等价于下面的
$('div.c1')
4 class样式类
addClass( ) //添加指定的样式类
removeClass( ) // 移除指定的css类名
hasClass( ) //判断样式存不存在
toggleClass( ) //如果有就删除, 如果没有就添加.
5 . 计时器
!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>计时器</title>
</head>
<body>
<input type="text" id="s1">
<input type="button" value="开始" id="s2">
<input type="button" value="结束" id="s3"><script>var s1ele = document.getElementById('s1');var t;function f() {var d1 = new Date();s1ele.value= d1.toLocaleString();}f();var s2ele = document.getElementById('s2'); //点开始s2ele.onclick = function () {if(!t){ //如果点击两次开始, 则无法结束, 由于当点击两次, 则第二次的可以删除, 第一次执行的任务的id由于被覆盖, 找不到, 则无法删除, 计时器一直计数,无法停止. 则加入条件 , 在每次清楚id时, t设置为空, 如果不为空, 则不进行开始操作.则不会开启两个任务t = setInterval(f, 1000)}};var s3ele = document.getElementById('s3'); // 点结束s3ele.onclick = function () {clearInterval(t); // 根据id清楚定时任务console.log(t);t = null}
</script>
</body>
</html>
6 左边菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>Title</title><style>.menu {width: 100px;border: 1px solid darkgrey;}.item-title {height: 30px;line-height: 30px;background-color: #449900;color: white;text-align: center;border-bottom: 1px dotted darkgrey;}.hide {display: none;}</style>
</head>
<body><div class="menu"><div class="item"><div class="item-title">菜单一</div><div class="item-body hide"><div>内容1</div><div>内容2</div><div>内容3</div></div></div><div class="item"><div class="item-title">菜单二</div><div class="item-body hide"><div>内容1</div><div>内容2</div><div>内容3</div></div></div><div class="item"><div class="item-title">菜单三</div><div class="item-body hide"><div>内容1</div><div>内容2</div><div>内容3</div></div></div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<!--<script src="jquery-3.3.1.js"></script>-->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script>var $titleEles = $(".item-title");for (var i=0;i<$titleEles.length;i++){$titleEles[i].οnclick=function () {console.log(this);// 把我自己的hide移除//$(this).next().toggleClass("hide");// 把其他的item-body标签 添加上hide//$(this).parent().siblings().find(".item-body").addClass("hide");$(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");}}// $(".item-title").click(function () {// $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");// })
</script>
</body>
</html>
转载于:https://www.cnblogs.com/gyh412724/p/9603428.html
47 jquery 计时器 选择器 筛选器 左边菜单栏相关推荐
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...
- jQuery——子元素筛选器
子元素筛选器 名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第 ...
- 【jQuery】总结:筛选器、控制隐藏、操作元素style属性
筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+ ...
- jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...
- jQuery 的常用选择器，筛选器
jQuery jQuery 的简介 插件 :一个功能高度分装 类库 :工具库,提供操作工具,不提供具体功能 jQuery 是一个工具集合 框架 : 项目每一个组件都会提供出来.我们只需要引入框架语法, ...
- jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
- jQuery 选择器和筛选器
1. jQuery 1. 选择器 $("") 1. 基本选择器 1. ID --> $("#d1") 2. 标签名 --> $("p&qu ...
- jQuery的常见选择器和筛选器
关于jQuery是前端方法库 特点: 1 优质的选择器和筛选方法 2 好用的饮食迭代 3 强大的链式编程 jQuery向外暴露两个变量:jQuery和$ (jQuery === $) 选择器 // j ...
- JQuery 基础（1）—— 基本介绍、选择器、筛选器（选择器的一种）
一.JQuery的基本概念 1.JQuery是什么? jquery是一款javaScript库,能更方便地处理HTML.事件.动画等,可以兼容多浏览器 2.如何选择版本? JQuery有三个大版本: ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
最新文章
- 阿里二面：redis分布式锁过期了但业务还没有执行完，怎么办
- PostgreSQL开放自由
- C#求数组中元素的全排列
- kafka java获取topic_通过编程方式获取Kafka中Topic的Metadata信息
- python求奇数的乘积_Python中的推导式使用详解
- Android开发之Canvas rotate方法释疑
- 将activity设置成对话框模式时遇到的问题（android）
- 程序员常用的泛型机制究竟怎么玩？
- python list find函数_对python中list的五种查找方法说明
- 人体姿态估计的基本概念
- 概念+实战讲解，一文带你了解RFM模型【kaggle项目实战分享】数据分析
- 简单实现根据excel表生成sql 建表语句
- 读懂西瓜书 14 : 概率图模型
- b站《史上最全unity3D教程》2-6等ppt笔记3
- SQL Server 端口映射访问方法
- c++调用静态函数的方法
- tsv文件导入mysql
- 机器学习——关联规则
- javaScript改变this指向的三种方法
- qt---crc32