Home
 

background color with a selected class

Find the parent element of each paragraph with a class “selected”.
Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("p").parent(".selected").css("background", "yellow");
	});
</script>

	  <div><p>Hello</p></div>
	  <div class="selected"><p>Hello Again</p></div>

Output :
Hello
Hello Again

Find tag and add class

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(){
		var newText = $("p").text().split(" ").join("</div><div>");
		$("p").html(newText).find("div").hover(
			   function () { $(this).addClass("y"); },
			   function () { $(this).removeClass("y"); });
	});
</script>
<style>
  .y { background:yellow; }
</style>

<p>a ab abc</p>

Output :
a
ab
abc

Click Function

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
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("div").one('click', function () {
              if ($(this).is(":contains('Hello')")) {
                $("p").text("It's the Hello div.");
              }else{
                $("p").text("It's NOT the Hello div.");
              }

              $("p").hide().slideDown("slow");
           });
        });
    </script>

      Click to see the text.
      <div>Hello</div>
      <div>World</div>
      <div>Hello World</div>
      <div>World</div>
      <div>Hello</div>
      <div>Hello</div>
      <p></p>

Output :
Click to see the text.
Hello
World
Hello World
World
Hello
Hello
It’s the Hello div.

Make all visible divs turn yellow on click.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("div:visible").click(function () {
			$(this).css("background", "yellow");
		});
	});
</script>

  <div>click me</div>

Output :
click me

Show hidden tags

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	   $("div:hidden").show(3000);
});
</script>

<div style="display:none;">Hello</div>
<div class="starthidden">World</div>

Output :
Hello
World

Highlight the contain text

Contains(text) matches elements which contain the given text.
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(){
		   $("tr:contains('F')").css("background-color", "#bbbbff");
	});
</script>

<table>
	<tr><td>First</td></tr>
	<tr><td>Middle</td></tr>
	<tr><td>Last</td></tr>
</table>

Output :
First
Middle
Last

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("td:empty").text("Was empty!").css('background', 'red');
        });
    </script>

    <table>
        <tr><td>First</td></tr>
        <tr><td></td></tr>
        <tr><td></td></tr>
    </table>

Matches elements which contain the given text

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
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("div:contains('J')").css("text-decoration", "underline");
});

</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
</style>

<div>Java</div>
<div>C#</div>
<div>JavaScript</div>
<div>CSS</div>

Contain tag

Download jquery-1.3.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
             $("p").remove(":contains('Hello')");
        });
</script>

<p class="abc">Hello World</p>

 
 
 

Categories

Tag