• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • 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)
  • 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)

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

$(“[attribute]”)

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

JQuery Has Attribute Selector Example

<!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>
  • 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

Category: jQueryTag: 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.

Previous Post: « PrimeFaces + Spring Roo + Spring Data + MongoDB Integration Example
Next Post: JQuery ID Selector Example jquery»

Reader Interactions

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.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact