jquery 如何选择带有自定义属性的标签？

Posted 2023-04-11

如题，以下为某个页面代码段：
----------------------------------------------------

<a href="#" title="更多" target="_blank">更多</a>
<a href="#" title="a6t" data="jquery很好用" target="_blank">jquery555</a>
<a href="#" title="b6e" data="php很爽" target="_blank">php666</a>
<a href="#" title="aaa" data="jsp没用过" target="_blank">jsp789</a>
<a href="#" title="7800" data="c#不知是啥" target="_blank">c#556</a>
<a href="#" title="sss" data="css这个容易" target="_blank">css888</a>
<a href="#" title="ews" data="asp这个...额，好像过时了" target="_blank">asp999</a>
<a href="#" title="教程" target="_blank">教程</a>
---------------------------------------------------
页面上有一些带有自定义属性的标签，类似代码如上，用jquery如何获取到所有带有“data”属性的标签？
---------------------------------------------------

我是想当用户鼠标放在带有data属性的链接上时，会弹出个小框来进行描述，而描述的内容就是data的值了。
---------------------------------------------------
在线等！在此先行谢过！

1、遍历a标签；

2、判断是否存在data值。

$("a").each(function()
    var _this = $(this);
    //判断data
    if(_this.attr("data"))
        _this.hover(function()
            //显示提示框
        , function()
            //隐藏提示框
        );
    
);

参考技术A $('a[data]')//就能获取所有带data属性的a标签元素，然后就可以绑小框了

/*一般元素上是加上data-aaa 这种格式的自定义属性，然后用$(element).data('aaa')来取值
 你如果直接以data作为自定义属性的话那么可以用attr来获取值，代码如下*/
var text = $('a[data]:eq(0)').attr('data');

参考技术B $("a").eq(0).attr("title");

eq(0)表示第一个，0表示索引追问

我是要找出带有data的标签哦，不是获取title哦。
而且，一个页面具体有多少个这样的标签也是未知的哦，无法用0123这样一个个去弄哦

参考技术C 你可以在这些data标签上再加一个自定义的属性，键值要加一致的，比如都加re="rea"，那么jquery就可以用$("a[re='rea']")获取到所有的属性re="rea"的标签。 参考技术D $('a').mouseover(function()
if($(this).attr('data'))
alert($(this).attr('data'));

)
本来想在选择器的时候就过滤掉没有data属性的元素，不过没有找到好的方法
弹出框建议不要用alert，客户体验不好。用layer吧

jquery基础

一、选择器

$("#id")               id选择器
$(".class")            class选择器
$("a") ->所有a标签      标签选择器
$("#id,.class,a")      多重选择
$("#id a") ->id下层的a标签，全部递归   层级选择
$("#id>a") ->id下层的a标签，只找子级   层级选择
$(":[input_type]")      input选择器 

$("[custom_attribute]")       自定义属性选择
$("[custom_attribute=‘value‘]")    自定义属性选择
$("#id").find(input[attribute = "value"]) ->id下层的属性为value的input标签

二、筛选

$(a:first)  找到第一个a标签
$(a:last)   找到最后一个a标签

$(a:eq(索引值)) 找到第一个a标签，索引值从0开始

$(a:gt(索引值)) 大于索引值
$(a:lt(索引值)) 小于索引值

$(:header)    $找到h标签

$(this).next()   下一个
$(this).prev()   上一个
$(this).parent() 父级
$(this).children()   子级
$(this).sibling() 兄弟标签

三、样式操作

addClass
removeClass
toggleClass

四、属性操作

attr("a") 查看属性
attr("a","v") 增加属性
removeAttr("a")

prop("checked") 效果同attr，用于checkbox、radio
prop("checked",true)

五、示例

示例一

 1     <script src="jquery.js"></script>
 2     <script>
 3         function check_all() {
 4             $(‘:checkbox‘).prop(‘checked‘,true);   #查找所有checkbox，使其选中
 5         }
 6         function cancel_all() {
 7             $(‘:checkbox‘).prop(‘checked‘, false); #查找所有checkbox，使其不被选中
 8         }
 9         function reverse() {
10             $(‘:checkbox‘).each(function () {
11                 this.checked = this.checked? false:true   #反转checkbox的checked属性
12             })  //1.X版本
13         }
14         $(".edit").click(function () {
15             var texts = $(".dialog>input")
16             var tds = $(this).parent().prevAll()
17 
18             $(texts[0]).val( $(tds[1]).text() )
19             $(texts[1]).val( $(tds[0]).text() )
20 
21             $(".dialog").removeClass("hide")
22             $(".mask").removeClass("hide")
23         })
24 
25         $(".cancel").click(function () {
26             $(".dialog").addClass("hide")
27             $(".mask").addClass("hide")
28         })
29     </script>

 

示例二

1 <script src="jquery.js"></script>
2     <script>
3         $(".header").click(function () {
4             //选中标签的父级的兄弟的class含有‘content’的标签，增加‘hide’样式
5             $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘)
6             $(this).next().removeClass(‘hide‘)  //移除下一个标签的‘hide’样式
7         })
8     </script>