4 important attribute of JQuery

Sourav.Kayal
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 4443 red flag

We are going to look into 4 important attributes of JQuery

4 important attributes of JQuery

JQuery is nothing but JavaScript library and it contents lot of classes to play with web user interface. And a good JQuery implementation can reduce server load very much. So it’s very much essential to use JQuery to develop rich user interface.

There are lot of attributes are there in JQuery but lets look into 4 popular attribute among them  it’s functionality practically.

Attributes are used to set some property of HTML element. Basically using those attributes we can change element property, their look in run time. So, lets start with them.

Add class

If you know css and familiar with concept of class ,then  you can understand it easily. Using assClass attribute to can assign a css class to an attribute.  

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head runat="server">
 <style>
   p{ margin: 8px; font-size:16px; }
   .selected { color:blue; }
  .highlight { background:green; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 </head>
<body>
    <form id="form1" runat="server">
    <p>Sourav</p>
    <p>and</p>
    <p>Kayal</p>
    <script>
        $("p").last().addClass("selected highlight");
    </script>
    </form>
</body>
</html>
  

html property

Using html property we can set any html code to an existing HTML element. In below code you can see 3 div tags in the body and within script tag content of div tag. So, when needed we can set content in run time. 

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head runat="server">
 <style>
  div { color:blue; font-size:18px; }
 </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
</head>
<body>
   <form id="form1" runat="server">
   <div></div>
   <div></div>
   <div></div>
<script>
    $("div").html("This is added by html attribute");
</script>
 </form>
</body>
</html>
 


Value

Value is one of the important attribute of JQuery. Using Value attribute we can get selected value of drop down/checkbox/radio button by user. So when event will occur by user we can get value of those element immediately.

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<style>
div { color:blue; font-size:18px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 </head>
<body>
<form id="form1" runat="server">
 <select id="single">
    <option>Sourav</option>
    <option>Kayal</option>
  </select>
  <script>
      $("select").change(function () {
          var singleValues = $("#single").val();
          alert(singleValues);
      });
  </script>
</form>
</body>
</html>
 


hasClass

has class attribute is needed basically for Styling purpose. We can use hasClass attribute to make-up an element with certain condition or depending on look of other element. Example code is given below.

 

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <head runat="server">
 <style>
 p { margin: 8px; font-size:16px; }
  .selected { color:red; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
 </head>
<body>
 <form id="form1" runat="server">
  <p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">Atleast one paragraph has selected class: </div>
<script>
    $("div#result1").append($("p:first").hasClass("selected").toString());
    $("div#result2").append($("p:last").hasClass("selected").toString());
    $("div#result3").append($("p").hasClass("selected").toString());
</script>
</form>
</body>
</html>

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)