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 selector form elements

jquery 

<html>
   <head>
      <title>The Selector 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() {
            /* Selects the visible <li> element..*/
            $(":input").wrap( "<span></span>" ).parent().css("background-color", "yellow");
            $(":input").val("Enter Name.");
         });
      </script>
   </head>
	
   <body>
      <p>Highlighted Form elements</p>
      <form>
         <table>
            <tr><td>Name</td><td><input type = "text"></td></tr>
            <tr><td>Password</td><td><input type = "password"></td></tr>
            <tr><td>Gender</td>
               <td><input type = "radio" name = "gender" value = "male">Male<br/><input type = "radio" name = "gender" value = "female">Female</td>
            </tr>
            <tr><td>Food</td>
               <td><input type = "checkbox" name = "chinese" value = "chinese" checked>Chinese<br/>
                  <input type = "checkbox" name = "indian" value = "indian">Indian</td>
            </tr>
         </table>
      </form>
   </body>
</html>

jQuery Examples Select all elements

jquery 

<html>
   <head>
      <title>The Selector 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() {
            /* This would select all the elements */
            $("*").css("background-color", "yellow");
         });
      </script>  
   </head> 
   <body>
      <div class="big" id = "div1">
         <p>This is first division of the DOM.</p>
      </div>
      <div class="medium" id = "div2">
         <p>This is second division of the DOM.</p>
      </div>
      <div class="small" id = "div3">
         <p>This is third division of the DOM</p>
      </div>
   </body> 
</html>

iframenotwor,

jquery 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('#iframe').attr('src', 'https://toyou.delivery/dashboard/#/pages/orders/byNumber/248049');
});
</script>
</head>
<body>

<iframe id="iframe" name="myIframe" frameborder="5" width="500" height="300"></iframe>

</body>
</html>

Online jQuery Editor

jquery 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn2").click(function(){
    $(this).closest(".first").hide(); 
  });
});
</script>
</head>
<body>
<div class = 'first' style="background-color:red;width:100px"><br>
  <div class = 'first' style="background-color:green;width:50px"><br>
    <button class = 'btn2'>.</button>
  </div>
</div>
<br />
<div class = 'first' style="background-color:blue;width:50px"><br>
<button class = 'btn1'>..</button>
</div>



</body>
</html>

testing selectize

jquery 

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<script>
$(document).ready(function() {

$('#Requestors, #Ccs').selectize({
    plugins: ['drag_drop'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});    
    
    
jQuery( function() {
    jQuery("#Requestors, #Ccs").sortable({
        connectWith: "#Requestors"
    }).disableSelection();
});

});


</script>

</head>
<body>
Test1:<input id="Requestors">
Test2:<input id="Ccs">
</body>
</html>

Online jQuery Editor

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>


</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>

befor

jquery 

<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.1.0/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script>
$(document).ready(function(){
  $("#b1").click(function(){
    $("#b11").toggle("fold");
      
  });
});
</script>

<script>
$(document).ready(function(){
  $("#b2").click(function(){
    $("#b22").toggle("scale");
  });
});
</script>

<script>
$(document).ready(function(){
  $("#b3").click(function(){
    $("#b33").toggle("puff");
  });
});
</script>
<script>
$(document).ready(function(){
  $("#b4").click(function(){
    $("#b44").toggle("puff");
  });
});
</script>

<script>
$(document).ready(function(){
  $("#b10").click(function(){
    $("#b100").toggle("slid");
      
  });
});
</script>

</head>
<style>
.ex{margin-top:-20px;
border-top:10px solid white;
border-bottom:10px solid white;}

.button {
  display: inline-block;
  padding: 5px;
  font-size: 48px;
  cursor: pointer;
  text-align: center;
  outline: none;
  color: #fff;
  background-color: black;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
margin-bottom:10px;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 8px red;
  transform: translateY(4px);
}
.vjs-error .vjs-error-display:before {
  color: #fff;
  content: 'the stream is offline....sorry';
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  left: 0;
  line-height: 1;
  margin-top: -0.5em;
  position: absolute;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  top: 50%;
  vertical-align: middle;
  width: 100%; }


.vjs-has-started .vjs-poster {background-color:transparent;

top:15px;
left:3px;
Height:35px;
Width:70px;
position:absolute;
Opacity :0.8;
display:inline;
}

 body {
  padding: 20px 0;
  background-image: linear-gradient(0deg,#cc6aa5,#3e91cc,#2dcca7,#3e91cc,#cc6aa5);
  background-size: 100% 600%;  
  animation: bg-pan-top 20s ease 0s infinite normal both;
  animation-play-state: initial;
}
  
.video-js{Border-radius :10px;
color:red;
font-size:12px;
z-index:1;
margin-top:20px;
  background-color:#2B333F;
Display:none;
 }
</style>
<body><center>
<p class="ex" style=" width:100%;font-family:times new roman;font-size:32pt;color:white;font-style:italic; background-color:#43345d "><strong>BEIN SPORT ARBIC  -HD-</strong></p> <br>


<button id="b1"class="button"><img height="150" width="225" src="https://sportstv.club/pic/bs1hd.png"  ></button>

<button id="b2"class="button"><img  src="https://sportstv.club/pic/bs2hd.png" height="150" width="225"> </button>

<button id="b3"class="button"><img src="https://sportstv.club/pic/bs3hd.png" height="150" width="225"> </button>


<button id="b4"class="button"><img src="https://sportstv.club/pic/bs4hd.png" height="150" width="225"> </button>


<button id="b5"class="button"><img  src="https://sportstv.club/pic/bs5hd.png" height="150" width="225" ></button>

<button id="b6"class="button"><img  src="https://sportstv.club/pic/bs6hd.png" height="150" width="225"> </button>

<button id="b7"class="button"><img src="https://sportstv.club/pic/bs7hd.png" height="150" width="225"> </button>


<button id="b8"class="button"><img src="https://sportstv.club/pic/bs8hd.png" height="150" width="225"> </button>


<button id="b9"class="button"><img  src="https://sportstv.club/pic/bs9hd.png" height="150" width="225" ></button>

<button id="b10"class="button"><img  src="https://sportstv.club/pic/bs10hd.png" height="150" width="225"> </button>

</center>





<video  id="b11"  controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ "controls": true, "autoplay": true, "preload": "auto"}'>
    <source src="https://207.180.235.76:8000/live/herolives.net/app/Herolive.apk/Herolive/518.m3u8" type='video/mp4'>
  </video>

<video id="b22"   controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ }'>
    <source src="https://htvmada.mada.ps:8888/btv/index.m3u8" type='video/mp4'>
  </video>

<video  id="b33"  controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ "controls": true, "autoplay": true, "preload": "auto"}'>
    <source src="https://207.180.235.76:8000/live/herolives.net/app/Herolive.apk/Herolive/518.m3u8" type='video/mp4'>
  </video>

<video id="b44"   controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ }'>
    <source src="https://htvmada.mada.ps:8888/btv/index.m3u8" type='video/mp4'>
  </video>

<video  id="b55"  controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ "controls": true, "autoplay": true, "preload": "auto"}'>
    <source src="https://207.180.235.76:8000/live/herolives.net/app/Herolive.apk/Herolive/518.m3u8" type='video/mp4'>
  </video>

<video id="b66"   controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ }'>
    <source src="https://htvmada.mada.ps:8888/btv/index.m3u8" type='video/mp4'>
  </video>
<video  id="b77"  controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ "controls": true, "autoplay": true, "preload": "auto"}'>
    <source src="https://207.180.235.76:8000/live/herolives.net/app/Herolive.apk/Herolive/518.m3u8" type='video/mp4'>
  </video>

<video id="b88"   controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ }'>
    <source src="https://htvmada.mada.ps:8888/btv/index.m3u8" type='video/mp4'>
  </video>

<video  id="b99"  controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ "controls": true, "autoplay": true, "preload": "auto"}'>
    <source src="https://207.180.235.76:8000/live/herolives.net/app/Herolive.apk/Herolive/518.m3u8" type='video/mp4'>
  </video>

<video id="b10"   controls width="960" height="650"  poster="https://e.top4top.net/p_9764077d0.png" class="video-js vjs-big-play-centered"
   data-setup='{ }'>
    <source src="https://htvmada.mada.ps:8888/btv/index.m3u8" type='video/mp4'>
  </video>

<br>

</center>
<script src="https://vjs.zencdn.net/7.1.0/video.js"></script>
</body>
</html>

test

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>

Online jQuery Editor

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
   
});
var f=['a','b'];
function showlist(){
    alert(f.length);
    for(i=0;i<f.length;i++)
    {
        document.getElementById("showfruits").innerHTML=f[i];
    }
}
</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>
<button onclick="showlist()">test</button>
<ul><li id="showfruits"></li></ul>
</body>
</html>

Online jQuery Editor

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(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>
Name:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="txtName" /><br><br>
Password: <input type="Password" id="txtPassword" />
</body>
</html>

Previous 1 ... 4 5 6 7 8 9 10 ... 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.