快捷導(dǎo)航

jQuery判斷自定義屬性data-val用法示例

更新時(shí)間：2019年01月07日 10:04:30 作者：The_road_of_ordinary

這篇文章主要介紹了jQuery判斷自定義屬性data-val用法,結(jié)合實(shí)例形式分析了jQuery自定義屬性的定義與簡(jiǎn)單使用技巧,需要的朋友可以參考下

本文實(shí)例講述了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");
  }
})

效果：

測(cè)試示例：

<!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>無(wú)標(biāo)題文檔</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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)?lái)一篇jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
JQuery顯示隱藏DIV的方法及代碼實(shí)例
這篇文章主要介紹了JQuery顯示隱藏DIV的方法及代碼實(shí)例,本文講解了載入時(shí)隱藏、動(dòng)態(tài)隱藏和顯示兩部分內(nèi)容,需要的朋友可以參考下
2015-04-04
精心挑選的15個(gè)jQuery下拉菜單制作教程
下拉菜單是網(wǎng)站導(dǎo)航常用的表現(xiàn)形式之一，能夠呈現(xiàn)更多的導(dǎo)航內(nèi)容。如果網(wǎng)站能夠設(shè)計(jì)出有吸引力的網(wǎng)站導(dǎo)航，將會(huì)吸引更多的用戶去瀏覽網(wǎng)站的內(nèi)容
2012-06-06
jQuery常用選擇器詳解
這篇文章主要為大家詳細(xì)介紹了jQuery常用選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
針對(duì)后臺(tái)列表table拖拽比較實(shí)用的jquery拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了比較實(shí)用的jquery拖動(dòng)排序,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
學(xué)習(xí)jQuery中的noConflict()用法
在本篇文章中我們整理了關(guān)于學(xué)習(xí)jQuery中的noConflict()用法的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。
2018-09-09
jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
省市多級(jí)聯(lián)動(dòng)的select下拉框有很多種實(shí)現(xiàn)方式，度娘上隨便一搜就一大堆，今天我們來(lái)討論的這款特效，代碼卻很簡(jiǎn)潔，兼容性也非常棒，推薦給大家。
2014-12-12
用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單
這篇文章主要介紹了用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單,需要的朋友可以參考下
2014-05-05
jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10