<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(){ $("p").next(".selected").addClass("hilight"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <p>Hello</p> <p class = "hilight">Hello Again</p> <div><span>And Again</span></div> </body> </html>
<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(){ $("p").next(".selected").addClass("hilight"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <p>Hello</p> <p class = "selected">Hello Again</p> <div><span>And Again</span></div> </body> </html>
<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() { $("p").find("span").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <p><span class = "selected">Hello</span>, how are you?</p> <p>Me? I'm <span class = "selected">good</span>.</p> </div> </body> </html>
<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() { $("p").find("span").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <p><span>Hello</span>, how are you?</p> <p>Me? I'm <span>good</span>.</p> </div> </body> </html>
<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> $(document).ready(function(){ $("p").find("span").end().css("border", "2px red solid"); }); </script> <style> p{ margin:10px; padding:10px; } </style> </head> <body> <p><span>Hello</span>, how are you?</p> </body> </html>
<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> $(document).ready(function(){ var $content = $("iframe").contents(); $content.find("body").append("I'm in an iframe!"); }); </script> </head> <body> <iframe src = "index.htm" width = "300" height = "100"></iframe> </body> </html>
<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> $(document).ready(function(){ $(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("highlight"); }); }); </script> <style> .highlight { color:red; background: yellow;} </style> </head> <body> <div> <p>Click any item below to see the result:</p> <ul> <li class = "top">list item 1</li> <li class = "top">list item 2</li> <li class = "middle">list item 3</li> <li class = "middle">list item 4</li> <li class = "bottom">list item 5</li> <li class = "bottom">list item 6</li> </ul> </div> </body> </html>
<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() { $("li").eq(2).addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li class = "selected">list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> </html>
<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> $(document).ready(function(){ $("div").find("p").andSelf().addClass("border"); }); </script> <style> p, div { margin:5px; padding:5px; } .border { border: 2px solid red; } .background { background:yellow; } </style> </head> <body> <div class = "border"> <p class = "border">First Paragraph</p> <p class = "border">Second Paragraph</p> </div> </body> </html>
<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() { $(".top").add(".middle").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <ul> <li class = "above">list item 0</li> <li class = "selected">list item 1</li> <li class = "selected">list item 2</li> <li class = "selected">list item 3</li> <li class = "selected">list item 4</li> <li class = "bottom">list item 5</li> <li class = "bottom">list item 6</li> <li class = "below">list item 7</li> </ul> </div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more