Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Attribute Selectors</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.mark{outline:2px solid #4caf50;}</style> </head> <body> <a href="https://a.com" target="_blank">A</a> <a href="https://b.com" target="_self" data-role="ext">B</a> <a href="/local/page">Local</a> <div data-role="ext" data-id="user-123">Box</div> <button id="eq">[target="_blank"]</button> <button id="starts">[href^="/"]</button> <button id="contains">[data-id*="user"]</button> <button id="exists">[data-role]</button> <script> $("#eq").click(function(){ $('a[target="_blank"]').toggleClass('mark'); }); $("#starts").click(function(){ $('a[href^="/"]').toggleClass('mark'); }); $("#contains").click(function(){ $('[data-id*="user"]').toggleClass('mark'); }); $("#exists").click(function(){ $('[data-role]').toggleClass('mark'); }); </script> </body> </html>
Output