前端学习笔记(zepto或jquery)——对li标签的相关操作(一)
对li标签的相关操作——点击li标签进行样式切换的两种方式
Demo演示:
- 1
- 2
- 3
- 4
详解:
第一种方式(以ul为基础):
$("ul").bind("click", function(e) {
$(e.target).closest("li").addClass("hilight");
$(e.target).closest("li").siblings().removeClass("hilight");
});
注解:closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上
toggleClass():该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。
addClass():添加类;removeClass():移除类
第二种方式(以li为基础):
$("ul>li").click(function(){
$(this).addClass("hilight");
$(this).siblings().removeClass("hilight");
})
前端学习笔记(zepto或jquery)——对li标签的相关操作(一)的更多相关文章
- 前端学习笔记(zepto或jquery)——对li标签的相关操作(二)
对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作(五)
对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作(四)
对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作(三)
对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...
- 前端学习笔记之HTML body内常用标签
阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...
- .net学习笔记----利用System.Drawing.Image类进行图片相关操作
C#中对图片的操作主要是通过System.Drawing.Image等类进行. 一.将图片转换为字节流 /// <summary> /// 图片处理帮助类 /// </summary ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
随机推荐
- maven配置文件里改动默认jre
方法一:打开%maven_home%\conf\setting.xml,仅仅会在新建项目时自己主动使用1.6的导入项目不会 在<profiles>标签内加入�例如以下配置: <pro ...
- SQL Server 版本号汇总
通过SSMS连接Sql servr,查看实例的版本就能知道当前SQL Server的版本号了. RTM (no SP) SP1 SP2 SP3 SP4 SQL Server 2014 c ...
- Uncaught TypeError: Cannot read property 'call' of undefined jquery.validate.min.js:28
最近在做表单验证时,,自己写的addMethod 方法总是不起作用.折腾了将近一天. 报告的错误,如下面的 Uncaught TypeError: Cannot read property 'call ...
- 开发一个Swing功能时的一点总结
对JTextField进行效验,有两个途径:(1)是使用javax.swing.InputVerifier在获取焦点时进行校验(2)在点击“确定”按钮的监听事件中对控件的值进行校验 鉴于涉及的业务比较 ...
- IDEA内存异常问题
设置工程运行Server VM属性 VM options: -Xms258m -Xmx1024m -XX:PermSize=128m -XX:MaxPermSize=256m 如图 :
- [Unity3D]Unity3D游戏开发《反对》说到游戏(上)——目标跟踪
朋友,大家好.我是秦培,欢迎关注我的博客.我的博客地址blog.csdn.net/qinyuanpei. 首先博主要自我反省,过了这么久才来更新博客,这段时间主要是在忙着写期末的作业,所以博主基本上没 ...
- 日积月累:weightSum和layout_weight属性合用
解说一:weightSum和layout_weight属性合用 android:weightSum属性:定义weight总和的最大值. 假设为指定该值,全部子视图的layout_weight属性的累加 ...
- Android 常规任务的高度【schedule】与【scheduleAtFixedRate】差额
于android计划定期任务有两种方法 1.schedule 2.scheduleAtFixedRate 这两种方法的差别在于 首次调用时间(Date when)这个參数 <span style ...
- uva 11572 - Unique Snowflakes(和书略有不同)
本书是关于使用刘汝佳set, 通过收集找到.count()和删除.erase().这种方法比我好.用较短的时间. 我想map这个任务可以完成.但是,这是不容易删除,必须先找到find()标.然后删除索 ...
- LeetCode :: Insertion Sort List [具体分析]
Sort a linked list using insertion sort. 仍然是一个很简洁的题目,让我们用插入排序给链表排序:这里说到插入排序.能够来回想一下, 最主要的入门排序算法.就是插入 ...