标签：
1. 点击<p></p>之间的内容，对应的消失
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果您点击我，我会消失。</p> <p>点击我，我会消失。</p> <p>也要点击我哦。</p> </body> </html>
注：$("p")，这里的p指的是标签<p>
2. 点击按钮，<p></p>间的内容消失
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
3. $(".test") .表示类
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $(".test").hide(); }); }); </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">Click me</button> </body> </html>
4. . $(".test") #表示id
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
5.改变html的内容
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").html("W3School"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html>
6. html追加内容
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加文本</button> <button id="btn2">追加列表项</button> </body> </html>
7. 在html元素之后追加内容
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>Before</b>"); }); $("#btn2").click(function(){ $("img").after("<i>After</i>"); }); }); </script> </head> <body> <img src="/i/eg_w3school.gif" alt="W3School Logo" /> <br><br> <button id="btn1">在图片前面添加文本</button> <button id="btn2">在图片后面添加文本</button> </body> </html>
8. 获取内容---text()、html()、val()
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">这是段落中的<b>粗体</b>文本。</p> <button id="btn1">显示文本</button> <button id="btn2">显示 HTML</button> </body> </html>
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); </script> </head> <body> <p>姓名：<input type="text" id="test" value="米老鼠"></p> <button>显示值</button> </body> </html>
9. 获取属性--attr()
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); }); </script> </head> <body> <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p> <button>显示 href 值</button> </body> </html>
标签：
原文地址：http://www.cnblogs.com/kaituorensheng/p/4591937.html
