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遮罩层实例讲解
May 11 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现朋友圈查看图片
Sep 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php中jpgraph类库的使用介绍
2013/08/08 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
canvas知识总结
2017/01/25 Javascript
vue组件学习教程
2017/09/09 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python之消除前缀重命名的方法
2018/10/21 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
建筑项目策划书
2014/01/13 职场文书
元旦联欢会主持词
2014/03/26 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书