<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点我就会消失测试</title> <script src="js/jquery-1.4.2.js"></script> <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 谷歌的jquery的地址 --> <!-- <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> Microsoft的jquery的地址。 --> <script> //jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。 $(document).ready(//读取全局的变化函数 function(){//函数入口 $("p").click(function(){//如果p发生了点击事件，进入点击事件函数的入口 $(this).hide();//对这个点击事件的文本进行隐藏 }); //下面是如果点击button按钮实现隐藏的函数 $("button").click(function(){ $("p").hide();//通过点击按钮一次性的隐藏所有的<p>的标签文档。 }); //下面是一个通过id的标识，然后点击按钮实现按钮的消失 $("#btn").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p style="color: red; size: a5;">点我就会消失</p> <p style="color: yellow; size: a3;">点我也会消失</p> <p style="color: red; size: a5;">点我就会消失</p> <p style="color: yellow; size: a3;">点我也会消失</p> <button type="button">Click me</button> <button type="button" id="btn">点我实现这个按钮的消失</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通过点击按钮让clss类选择器的内容消失</title> <script src="js/jquery-1.4.2.js"></script> <script> //jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。 /* * $(this).hide() - 隐藏当前元素 * $("p").hide() - 隐藏所有段落 * $(".test").hide() - 隐藏所有 class="test" 的所有元素 * $("#test").hide() - 隐藏所有 id="test" 的元素 * * * jQuery 使用 CSS 选择器来选取 HTML 元素。 * $("p") 选取 <p> 元素。 * $("p.intro") 选取所有 class="intro" 的 <p> 元素。 * $("p#demo") 选取所有 id="demo" 的 <p> 元素。 * * * jQuery 函数位于一个 document ready 函数中 * $(document).ready(function(){ * --- jQuery functions go here ---- * }); */ $(document).ready(function(){ $("#btn").click(function(){ $(".test").hide();//让class=test的内容消失 }); //jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 //下面的例子把所有 p 元素id=change的背景颜色更改为红色 $("button#btn1").click(function(){ $("p#change").css("background-color","red");//对<p> id=change的段落css $("button#btn1").css("background-color","aqua");//.... }); }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button" id="btn">Click me</button><br /> <!--改变颜色的实验--> <p id="change">这块的颜色会变成红色</p> <button id="btn1">点击我对上面的颜色进行改变</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隐藏和显示</title> <script src="../js/jquery-1.4.2.js"></script> <script> /* * $(selector).hide(speed,callback); * $(selector).show(speed,callback); * * 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 * 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 */ $(document).ready(function(){ $("#hide").click(function(){ $("#p1").hide(1000);//1000ms }); $("#show").click(function(){ $("#p1").show(1000);//1000ms }); }); </script> </head> <body> <p id="p1">如果点击“隐藏”按钮，我就会消失。</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>toggle的切换功能</title> <script src="../js/jquery-1.4.2.js"></script> <script> //jQuery toggle() /* * 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。 * 显示被隐藏的元素，并隐藏已显示的元素： */ $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); }); </script> </head> <body> <button type="button">切换</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>