对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标签的相关操作(一)的更多相关文章

  1. 前端学习笔记(zepto或jquery)——对li标签的相关操作(二)

    对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...

  2. 前端学习笔记(zepto或jquery)——对li标签的相关操作(五)

    对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...

  3. 前端学习笔记(zepto或jquery)——对li标签的相关操作(四)

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  4. 前端学习笔记(zepto或jquery)——对li标签的相关操作(三)

    对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...

  5. 前端学习笔记之HTML body内常用标签

    阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...

  6. .net学习笔记----利用System.Drawing.Image类进行图片相关操作

    C#中对图片的操作主要是通过System.Drawing.Image等类进行. 一.将图片转换为字节流 /// <summary> /// 图片处理帮助类 /// </summary ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  9. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

随机推荐

  1. 乐在其中设计模式(C#) - 建造者模式(Builder Pattern)

    原文:乐在其中设计模式(C#) - 建造者模式(Builder Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 建造者模式(Builder Pattern) 作者:webabc ...

  2. 【新秀疯狂UML系列】——面向对象的技术

    从软质工作开始,我们来到与面向对象的接触,接下来的学习材料似乎已经提到了面向对象,在与她的朋友去一个.所以,我们必须知道她多一点点. 一.何为面向对象? 面向对象(Object Oriented).是 ...

  3. Freedur为什么免费?

    难道没有人看到他们官方网站权? Freedur倒闭了...... 一个中国人.Chris Lee,作为Freedur的会计师.窃取了公司的银行帐号.并将Freedur的官方站点指向自己的空间. 而且声 ...

  4. 花生壳宣布网站的网址直接绑定到详细的项目——jboss版本

    花生壳公布,首先要有域名.然后激活域名,详细的公布就不说了,网上有非常多资料,这里是在jboss下直接将网址与详细的项目相应.做法有点不地道 假设跟图上一样配置的话.訪问网址相当于訪问的是http:/ ...

  5. mysql_install_db出错,Unable to lock /usr/local/mysql/var/ibdata1, error: 11

    今天,在一台旧机器上编译一个新的Mysql,install时出了错: /usr/local/mysql_5615/scripts/mysql_install_db --user=mysql --bas ...

  6. ubuntu突然卡住

    ctrl+alt+f1.进username和password.然后进入: killall gnome-sesseion sudo pkill X 版权声明:本文博主原创文章,博客,未经同意不得转载.

  7. Appium之java API

    AppiumDriver getAppStrings() 默认系统语言相应的Strings.xml文件内的数据. driver.getAppStrings(String language) 查找某一个 ...

  8. Python科学计算库演示

    号码值计算基础 NumPy至Python提供了高速的多维数组处理的能力.而SciPy则在NumPy基础上加入了众多的科学计算所需的各种工具包,有了这两个库,Python就有差点儿和Matlab一样的处 ...

  9. android 如何将电话簿SDN数字和其他普通的数字混合在一起?

    最初的设计将默认SDN单独分出来,副标题"SDN". 下面的变化可以通过例如实现SDN并安排普通相同数量在一起,按字母顺序排列. DefaultContactListAdapter ...

  10. mousewheel 与 DOMMouseScroll

    FF使用DOMMouseScroll,其他浏览器使用mousewheel FF在一个特殊的属性event.detail.表示滚动的值 event.detail 正数:向下滚动,负数:向上滚动 滚动一次 ...