Javascript Minesweeper (with Stack Snippets!)
thisButton.attr('data-x')



You can use jQuery's .data(). It uses an internal cache for storing key-value pairs, but if it doesn't find it there, it looks up the data-* attributes of the associated element. This means you can do thisButton.data('x'). Note that dash-space becomes camelCase.




Number(thisButton.attr('data-x'))



If you use jQuery's .data(), it automatically converts the type for you. If it finds "2", then it converts it to a number. 

Also, you can use the unary + to convert strings to numbers. It's close to parseFloat(). Something like:

+"2" === 2





  Is it a good idea to use data-* attributes to store the data?


For a regular audience, maybe. For advanced users, you might want to do something else (unless they're just bored and want to play :P)


Use jQuery .data(). The data is stored in an internal cache rather than written as a data-* attribute. However, if you have reference to the element and call .data() against it, it could reveal the value. Also, afaik, the cache is accessible via jQuery._cache.
Use an internal mapping, and have the buttons only carry an index/coordinates. You can create a 2x2 array inside a closure which only your code can access. On click, you can announce the coordinates freely.


Also, any determined dev/skid can peek through using dev tools, so the best you can do is just make it harder to pick on.




  Am I using the features of JQuery in a good way?


Nothing wrong with it :D