JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

JQuery Has Attribute Selector Example

May 22, 2014 by Krishna Srinivasan Leave a Comment

This tutorial explains usage of the has attribute selector in JQuery. The has attribute selector selects all the elements that has specified attribute and value. It represents the value mentioned in the attribute. For instance, id=”myval”, here id is an attribute and option is a value. The has attribute selector defines all the elements which contains id attribute with value “myval”.

JQuery Has Attribute Selector Syntax

[code lang=”xml”]
$(“[attribute]”)
[/code]

It has parameters called attribute is a required parameter which specifies the attribute to find.

JQuery Has Attribute Selector Example

[code lang=”xml”]
<!doctype html>
<head>
<title>JQuery Has Attribute Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Has Attribute Selector Example</h2>
<style>
div
{
color:green;
}
</style>
<script>
$(document).ready(function(){
$("div[id]").css("border","2px solid orchid");
});
</script>
<body>
<div id="one">Hello World!!!</div>
<div>Welcome to JQuery.</div>
<div id="three">It is JavaScript Library.</div>
<div>It is combination of HTML, CSS and JavaScript.</div>
</body>
</html>
[/code]

  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“div[id]”).css(“border”,”2px solid orchid”); line selects all the elements with attribute id with orchid color border.
  • When we run the above script, the has attribute selector selects all the elements that have specified attribute. We have used id as attribute with different values. It selects all the elements which are related to id attribute only those elements will get display with orchid color border.

JQuery Has Attribute Selector Demo

When you run the above example, you would get the following output:

  • Run JQuery Has Attribute Selector Demo

JQuery Has Attribute Selector Example

Filed Under: jQuery Tagged With: JQuery Selectors

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved