jQuery判断自定义属性data-val用法示例


Posted in jQuery onJanuary 07, 2019

本文实例讲述了jQuery判断自定义属性data-val用法。分享给大家供大家参考,具体如下:

jquery判断自定义属性data-val

1.css

.active {
  color: red;
}

2.html

<ul>
  <li data-val="1">1</li>
  <li data-val="2">2</li>
  <li data-val="3">3</li>
  <li data-val="4">4</li>
  <li data-val="5">5</li>
</ul>

3.js

//方法1
$(function() {
  $("ul li[data-val='1']").addClass("active").siblings().removeClass("active")
});
//方法2
$("ul li").each(function() {
  if($(this).attr("data-val") == "1") {
    $(this).addClass("active").siblings().removeClass("active");
  }
})

效果:

jQuery判断自定义属性data-val用法示例

测试示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.active {
  color: red;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<ul>
  <li data-val="1">1</li>
  <li data-val="2">2</li>
  <li data-val="3">3</li>
  <li data-val="4">4</li>
  <li data-val="5">5</li>
</ul>
<script>
$(function() {
  $("ul li[data-val='1']").addClass("active").siblings().removeClass("active")
});
</script>
</body>
</html>

感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
You might like
php输出指定时间以前时间格式的方法
2015/03/21 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
Vue.use源码分析
2017/04/22 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python中随机函数random用法实例
2015/04/30 Python
python daemon守护进程实现
2016/08/27 Python
Python中类的初始化特殊方法
2017/12/01 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
专业实习自我鉴定
2013/10/29 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
怎样写离婚协议书
2014/09/10 职场文书
入党个人总结范文
2015/03/02 职场文书
计划生育个人总结
2015/03/02 职场文书
入党转正申请报告
2015/05/15 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers