jQuery根据data-的值来找到引用的元素

最新推荐文章于 2023-05-11 16:04:47 发布
最新推荐文章于 2023-05-11 16:04:47 发布
阅读量2w 收藏 3
点赞数 1
分类专栏： JavaScript CSS jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carrousel0516/article/details/80202343
版权
JavaScript 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
CSS
11 篇文章 0 订阅
订阅专栏
jQuery
4 篇文章 0 订阅
订阅专栏 
<html>
<head>
<title>
</title>
<style>
    #left{
        height:500px;
        width:20%;
        float:left;
        border-top:1px solid blue;
    }
    #list{margin:0;padding:0;}
    #list li{
        width:100%;
        height:64px;
        font-size:14px;
        color:#666;
        text-align:center;
        line-height:64px;
    }
    #right{
        float:left;
        width:79%;
        height:500px;
        border-top:1px solid blue;
        border-left:1px solid blue;
    }
    .block{
        float:left;
        margin-left:3%;
        margin-top:20px;
        width:30%;
        text-align:center;
    }
    .block img{
        width:60%;
    }
</style>
<script>
    $(document).ready(function(){
        $("#list li").click(function(){
            var category = $(this).data("type");
            $(".category").hide();
            $(".category[data-type=" + category + "]").show();
        });
    });
</script>
</head>
<body>
<div class="container">
    <div id="left">
        <ul id="list">
            <li data-type="recomment">推荐</li>
            <li data-type="role">角色</li>
            <li data-type="pets">召唤兽</li>
            <li data-type="arm">武器</li>
            <li data-type="defence">防具</li>
        </ul>
    </div>
    <div id="right">
        <div class="category" data-type="role" id="role">
            <div class="block">
                <img src="sysimg/school/dt.png" />
                <p>大唐官府</p>
            </div>
            <div class="block">
                <img src="sysimg/school/fc.png" />
                <p>方寸山</p>
            </div>
        </div>
        <div class="category" data-type="pets" id="pets">
            <div class="block">
                <img src="sysimg/pets/1.png">
                <p>羽云仙子</p>
            </div>
            <div class="block">
                <img src="sysimg/pets/2.png">
                <p>超级神犬</p>
            </div>
        </div>
        <div class="category" data-type="arm" id="arm">
            <div class="block">
                <img src="sysimg/arm/1.png">
                <p>青铜剑</p>
            </div>
            <div class="block">
                <img src="sysimg/arm/2.png">
                <p>铁齿剑</p>
            </div>
        </div>
        <div class="category" data-type="defence" id="defence">
            <div class="block">
                <img src="sysimg/def/1.png">
                <p>方巾</p>
            </div>
            <div class="block">
                <img src="sysimg/def/2.png">
                <p>布帽</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
八九燕来
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery操作HTML5 的data-*的用法实例分享
10-25
从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。也就是说虽然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3库以上的.还是可以 在非HTML5的页面或浏览器里, 仍然可以使用.data(obj)方法来操作"data-*" 数据.
jquery用data方法获取某个元素上的事件
12-01
jquery的给元素绑定的事件可以用data方法取出来 通过$(element).data(“events”)来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的alert框 // 取出该button的所有click事件，是个数组 $("button").data('events').click 会看到两个click事件的数组 得到该数组，你可以调
$._data 获取某元素通过jQuery 注册的事件
352328759的博客
06-28 380
$._data 用于获取元素上注册的事件 用法 传入: 目标节点(原生 js 那种格式), 字符串 “events” 返回: 一个记录操作名的对象, 操作下是该操作对应的事件详情, 包括方法(handler) $._data(element, "events") // var events = $._data($('#swq')[0], 'events'); var events2 = $._data(document, 'events'); demo 'use strict'; function fu
jquery通配符
hwhjxja的博客
10-28 455
$("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 $("input[name^='code']");//name属性以code开始的所有input标签 $("in
jQuery 查找
qq_44978147的博客
02-17 144
// children 获取子元素 console.log(("ul").children());console.log(("ul").children()); console.log(("ul").children());console.log((“ul”).children(".box")); // find 查找 console.log($("ul")...
jquery循环元素找到每个元素的data-index索引号
阿布阿朵
03-10 1424
jquery循环元素获取索引号报错 刚开始我根据 for(var i=0;i<uid.length;i++) { console.log(uid[i].attr('data-index')) } 想要得到每个元素的index值，但是运行报错， Uncaught TypeError: uid[i].attr is not a function at HTMLSpanElement..
JqueryMobile data-属性
05-19
- `data-icon`: 设置按钮上的图标，可以引用 jQuery Mobile 提供的图标库。 - `data-iconpos`: 规定图标相对于文本的位置，如 left, right, top, bottom 或 notext。 - `data-iconshadow`: 控制按钮图标是否有...
jQuery中使用data()方法读取HTML5自定义属性data-*实例
10-26
如果你使用jQuery类库，那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险
jquery插件star-rating.js实现星级评分特效
12-09
例如，我们可以定义一个`<input>`标签，通过设置`type="number"`，`class="rating"`，`min`，`max`和`step`等属性，来控制评分的最大值、最小值和步进值。此外，还可以自定义尺寸、符号、默认提示文字和星标提示等，...
JQuery移动层---简单型
07-13
jQuery Mobile 使用特定的 class 标签来识别和增强元素，如 `data-role="page"`，`data-role="header"` 和 `data-role="content"`。一个简单的页面模板可能是这样的： ```html <div data-role="page" id="myPage"> ...
jq获取带有某属性值的元素
江湖的博客
10-28 5952
全局查找： 1、$('*[name="username"]')：在前面加个*表示查找所有带有 name="username"的DOM； 2、$('*[name]')：代表全局查找带有name属性的DOM，其实可以更简单的用$('[name]')就可以了； 　　eg：$('[data-id]'); 　　$($('*[data-id]')[1]).html = $($('*[data-id]')[1]).attr('data-id')。 ...
【无标题】
qianyuge的博客
04-03 340
/** * 写一个 find 方法，根据 id 查找 data 树中的任意一项，例如： * find(data, '101') // => '浦东' * find(data, '201') // => '西湖区' */ const data = [ { id: '100', name: '上海', children: [ { id: '101', name: '浦东', children: [] }, { id: '...
jquery通过data-id值获取相应li标签
最新发布
qq_27487739的博客
05-11 957
这行代码将使用选择器 `li[data-id="2"]` 选取所有具有 `data-id` 属性且该属性的值为 `2` 的 `li` 标签，并使用 jQuery 对象 `li` 来存储它们。请注意，如果您的 `data-id` 属性的值不是唯一的，则该代码将选择所有匹配的 `li` 标签。您可以使用 jQuery 的 `data` 方法和选择器来获取具有特定 `data-id` 值的 `li` 标签。这将仅选取第一个符合条件的 `li` 标签，并将其存储在 jQuery 对象 `li` 中。
JQuery常用和很有用处的方法
weixin_30569033的博客
05-27 243
1、grep()方法： 　　　　用于数组元素过滤筛选 grep(array,callback,invert) array：待过滤数组; callback：处理数组中的每个元素，并过滤元素，该函数中包含两个参数，第一个是当前数组元素的值，一个是当前数组元素的下标，即元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写...
js通过'data-xxx'自定义属性获取dom元素
热门推荐
weixin_39889465的博客
01-10 2万+
当我们需要改变某一个元素的内容时，首先要获取该dom元素。其次，通过dom.innerHtml等改变dom的内容。但是针对一些没有class、id同时页面的元素还是动态渲染的场景，我们又该如何做呢？ 例如，下图中的div没有class，id，只有data-fieldmark自定义属性，且其值只有‘field’部分不变，数值部分根据不同的页面值不同，针对这样的场景我们又该怎么获取到dom呢？ wi...
标签data-*自定义属性值和根据data属性值查找对应标签
theScoreONE的博客
05-26 1万+
1、html中设置标签data-*的值 <dl> <dt>标题</dt> <dd data-url="11">11111</dd> <dd data-url="22">22222</dd> </dl> 2、点击获取当前标签的data-url的值 $('dd').on('click', function() { var urlVal = $(this).data('ur
jQuery在html元素中保存数据的 data()方法
Mahuicool的博客
06-18 1289
jq的attr()方法添加的属性只能是String类型，如果你需要再html元素中保存其他类型的数据，就需要使用data()这个方法。data()方法不能获通过attr()存储的值，它的使用方法如下： 设置值：$("element").data("val",obj); 获取值：$("element").data("val"); ...
jquery和js元素找到每个元素的data-index索引号
weixin_51188380的博客
12-30 843
jquery和js元素找到每个元素的data-index索引号
jQuery应用技巧详解：从元素引用到对象转换
jQuery的`data()`方法可以方便地在元素上附加和读取数据，如`$("#element").data("key", "value")`和`$("#element").data("key")`。 9. 插件开发与使用： jQuery社区提供了大量插件，如轮播图、表单验证、时间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值