Home
 

Trigger

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		   $("h1").click(function () {
			  alert("h1");
		   });
		   $("button:last").click(function () {
				$("h1").trigger('click');
		   });
	});
</script>

   <div><h1>Hello World</h1></div>
   <button value="Enter">Enter</button>

Triggered By Select Change Event

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("select").change(function () {
		   var str = "You select : ";
		   $("select option:selected").each(function () {
			  str += $(this).text() + " ";
		  });
		  $("div").text(str);
		}).trigger('change');
	});
</script>

<select name="A" multiple="multiple">
	<option>A</option>
	<option selected="selected">B</option>
	<option>C</option>
</select>
 <div></div>

Comment Tags: FTP, hosting, website

Toggle

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("span").click(function () {
		   $("li").each(function(){
			  $(this).toggleClass("example");
		   });
		});
	});
</script>

<style>
 .example { font-style:italic; }
</style>    

	<span>Click Toggle</span>
	  <ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
	  </ul>

slideToggle(speed, callback): height is adjusted

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function () {
		  $("p").slideToggle("slow");
		});
             /* $("p").click(function () {
                    $("p").toggle();
                });
             */
	});
</script>

  <button>Toggle</button>
  <p>
	This is the paragraph.
  </p>

Toggle among two or more function calls every other click

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		 $("div").toggle(
			  function () {
				 $(this).css({"color":"blue"});
			  },
			  function () {
				 $(this).css({"color":"red"});
			  },
			  function () {
				 $(this).css({"color":"green"});
			  }
		 );
	});
</script>

   <div>This is the paragraph.</div>

Use toggle function to change class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		 $("div").toggle(
				function () {
					$(this).addClass("my");
				},
				function () {
					$(this).removeClass("my");
				}
		 );
	});
</script>
<style>
.my { color:green; }
</style>

<div>This is the paragraph.</div>

Click to toggle opacity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	     $('#my').toggle(
		  function(event) {
			$(event.target).css('opacity',0.4);
		  },
		  function(event) {
			$(event.target).css('opacity',1.0);
		  }
	     );
	});
</script>

	<div id="my">This is the paragraph.</div>

Comment Tags: FTP, hosting, website

Form Validation

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("form").submit(function() {
              if ($("input:first").val() == "sanat") {
                $("span").text("Validated...").show();
                return true;
              }
              $("span").text("Not valid!").show().fadeOut(1000);
              return false;
            });
        });
    </script>
  </head>

    <body>
          <form action="javascript:alert('success!');">
              <input type="text" />
              <input type="submit" />
          </form>
          <span></span>
    </body>
</html>

Comment Tags: FTP, hosting, website

Sets the background color of the page to black

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<script type='text/javascript' src='js/jquery-1.3.2.js'></script>
<script type='text/javascript'>
$.fn.extend({
  Select: function() {
    return $(this).addClass('mySelected');
  },
  Unselect: function() {
    return $(this).removeClass('mySelected');
  },
  MyApplication: {
    Ready: function() {
      $('p').click(
        function($e) {
          $('li').Select();
        }
      );
      $('li').click(
        function() {
          $(this).hasClass('mySelected')?$(this).Unselect() : $(this).Select();
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $.fn.MyApplication.Ready();
  }
);
</script>
<style type='text/css'>
li.mySelected {
    background: yellow;
}
</style>

    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
    <p>
      Select All
    </p>

Comment Tags: FTP, hosting, website

even() matches even elements, zero-indexed.

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("tr:even").css("background-color", "green");
	});
</script>

<table border="1">
	<tr><td>00</td><td>01</td><td>02</td></tr>
	<tr><td>10</td><td>11</td><td>12</td></tr>
	<tr><td>20</td><td>21</td><td>22</td></tr>
	<tr><td>30</td><td>31</td><td>32</td></tr>
	<tr><td>40</td><td>41</td><td>42</td></tr>
	<tr><td>50</td><td>51</td><td>52</td></tr>
</table>

Comment Tags: FTP, hosting, website

Matches all elements

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
	//  $("*").css("background","red");
	//  $("div").css("background","red");
        $("span").css("background","red");
  });
</script>

  <div class="notMe">div </div>
  <div class="myClass">div</div>
  <span class="myClass myOtherClass">span</span>

Output :
div
div
span

Comment Tags: FTP, hosting, website
  1. Pages:
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. 6
  9. 7
  10. ...
  11. 16
 
 
 

Categories

Tag

 

Copyright © 2010 PHP code. net. All Rights Reserved. Designed By: Web Design Company