Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

jQuery Text Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language="javascript">
         $(document).ready(function() {
            var content = $("p#pid1").text();
            $("#pid2").html(content);
         });
      </script>
		
      <style>
         .red { color:red; }
         .green { color:green; }
      </style>
   </head>
	
   <body>
      <p class = "green" id = "pid1">This is <i>first paragraph</i>.</p>
      <p class = "red" id = "pid2">This is second paragraph.</p>
   </body>
</html>

Html Val Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var content = $("p").html();
            $("#pid2").html( content );
         });
      </script>
		
      <style>
         .red { color:red; }
         .green { color:green; }
      </style>	
   </head>
	
   <body>
      <p class = "green" id = "pid1">This is first paragraph.</p>
      <p class = "red" id = "pid2">This is second paragraph.</p>
   </body>
</html>

jQuery Toggle Class Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p#pid").click(function () {
               $(this).toggleClass("red");
            });
         });
      </script>
		
      <style>
         .red { color:red; }
      </style>
   </head>
	
   <body>
      <p class = "green">Click following line to see the result</p>
      <p class = "red" id = "pid">This is first paragraph.</p>
   </body>
</html>

jQuery Remove Class Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p#pid1").removeClass("red");
         });
      </script>
		
      <style>
         .red { color:red; }
         .green { color:green; }
      </style>
   </head>
	
   <body>
      <p class = "red" id = "pid1">This is first paragraph.</p>
      <p class = "green" id = "pid2">This is second paragraph.</p>
   </body>
</html>

jQuery Html Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language="javascript">
         $(document).ready(function() {
            var content = $("p").html();
            $("#pid2").html( content );
         });
      </script>
		
      <style>
         .red { color:red; }
         .green { color:green; }
      </style>
   </head>
	
   <body>
      <p class = "green" id = "pid1">This is first paragraph.</p>
      <p class = "red" id = "pid2">This is second paragraph.</p>
   </body>
</html>

jQuery Has Class Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#result1").text( $("p#pid1").hasClass("red") );
            $("#result2").text( $("p#pid2").hasClass("red") );
         });
      </script>
		
      <style>
         .red { color:red; }
         .green { color:green; }
      </style>
   </head>
	
   <body>
      <p class = "red" id = "pid1">This is first paragraph.</p>
      <p class = "green" id = "pid2">This is second paragraph.</p>

      <div id = "result1"></div>
      <div id = "result2"></div>
   </body>
</html>

Remove Attribute Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("table").removeAttr("border");
         });
      </script>
   </head>
	
   <body>
      <table border = "2">
         <tr><td>This is first table</td></tr>
      </table>

      <table border = "3">
         <tr><td>This is second table</td></tr>
      </table>

      <table border = "4">
         <tr><td>This is third table</td></tr>
      </table>	
   </body>
</html>

Key Function Method

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("table").attr("border", function(index) {
               return "4px";
            })
         });
      </script>	
   </head>
	
   <body>
      <table>
         <tr><td>This is first table</td></tr>
      </table>

      <table>
         <tr><td>This is second table</td></tr>
      </table>

      <table>
         <tr><td>This is third table</td></tr>
      </table>	
   </body>
</html>

Set Attribute Properties

jquery 

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("img").attr({ 
               src: "/images/jquery.jpg",
               title: "jQuery",
               alt: "jQuery Logo"
            });
         });
      </script>	
   </head>
	
   <body>
      <div class = "division" id="divid">
         <p>Following is the logo of jQuery</p>
         <img src = "/jquery/images/jquery-mini-logo.jpg" title = "None" alt = "None" />
      </div>
   </body>
</html>

Applying Styles

jquery 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Previous 1 ... 111 112 113 114 115 116 117 ... 120 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.