Jquery - Html Selectors to use except Id and Class

Question

Are there any more than just a Id and Class -selectors to work with when using Jquery?

For example:

<div id="myId" class="myClass"></div>

<script>
    $('.myClass').click(function() {
        alert(this.id); //alerts my "myId"
    });
</script>

I want something like:

<div id="myId" data-id="myDataId" class="myClass"></div>

<script>
    $('.myClass').click(function() {
        alert(this.dataId);
    });
</script>

Answer 1

You can different selectors like:

$( "div[data-id='myDataId']" );

and then:

$(this).attr("data-id")

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("id")

You can read it here: http://api.jquery.com/attribute-contains-selector/ http://api.jquery.com/category/selectors/

Answer 2

You can do:

<div id="myId" data-id="myDataId" class="myClass"></div>

<script>
    $('.myClass').click(function() {
        alert($(this).data("id"));
    });
</script>

Answer 3

 $("[data-id=myDataId]")

JSfiddle http://jsfiddle.net/sjj41box/1/