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层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP模块化安装教程
2016/06/01 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
Python Socket编程入门教程
2014/07/11 Python
Python计算回文数的方法
2015/03/11 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
中文师范生自荐信
2014/01/30 职场文书
挂靠协议书范本
2014/04/22 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
英文慰问信
2015/02/14 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
js前端图片加载异常兜底方案
2022/06/21 Javascript