【学习随笔】iquery初涉
jQuery DOM 操作
jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
<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>
获取属性 - attr()
<script> $(document).ready(function(){ $("button").click(function(){ alert($("#zyc").attr("href")); }); }); </script> </head> <body> <p><a href="http://www.zyc.com" id="zyc">zyc</a></p> <button>显示 href 值</button> </body>
设置内容 - text()、html() 以及 val()
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("hello world"); }); }); </script> </head> <body> <p id="test1">这是段落。</p> <p id="test2">这是另一个段落。</p> <p>Input field: <input type="text" id="test3" value="hi"></p> <button id="btn1">设置文本</button> <button id="btn2">设置 HTML</button> <button id="btn3">设置值</button> </body>
text()、html() 以及 val() 的回调函数
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); }); </script> </head> <body> <p id="test1">这是<b>粗体</b>文本。</p> <p id="test2">这是另一段<b>粗体</b>文本。</p> <button id="btn1">显示旧/新文本</button> <button id="btn2">显示旧/新 HTML</button> </body>
添加新的 HTML 内容,我们将学习用于添加新内容的四个 jQuery 方法:
append() - 在被选元素的结尾插入内容
<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>
prepend() - 在被选元素的开头插入内容
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend("<b>Prepended text</b>. "); }); $("#btn2").click(function(){ $("ol").prepend("<li>Prepended 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>
after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容
<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>
通过 jQuery,可以很容易地删除已有的 HTML 元素。
remove() - 删除被选元素(及其子元素)
<script> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>删除 div 元素</button> </body>
empty() - 从被选元素中删除子元素
<script> $(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>清空 div 元素</button>
jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <div>这是非常重要的文本!</div> <br> <button>向元素添加类</button> </body>
removeClass() - 从被选元素删除一个或多个类
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 class="blue">标题 2</h2> <p class="blue">这是一个段落。</p> <p>这是另一个段落。</p> <br> <button>从元素上删除类</button> </body>
toggleClass() - 对被选元素进行添加/删除类的切换操作
<script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>切换 CSS 类</button> </body>
css() - 设置或返回样式属性
head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("Background color = " + $("p").css("background-color")); }); }); </script> </head> <body> <h2>这是标题</h2> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> <button>返回 p 元素的背景色</button> </body>
设置多个 CSS 属性
<head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); }); </script> </head> <body> <h2>这是标题</h2> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> <p>这是一个段落。</p> <button>为 p 元素设置多个样式</button> </body>
jQuery 提供多个处理尺寸的重要方法:
width() height()
</script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 的尺寸</button> <p>width() - 返回元素的宽度。</p> <p>height() - 返回元素的高度。</p> </body>
innerWidth() innerHeight()
<script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height of div: " + $("#div1").innerHeight(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 的尺寸</button> <p>innerWidth() - 返回元素的宽度(包括内边距)。</p> <p>innerHeight() - 返回元素的高度(包括内边距)。</p> </body>
outerWidth() outerHeight()
<script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height of div: " + $("#div1").outerHeight(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 的尺寸</button> <p>outerWidth() - 返回元素的宽度(包括内边距和边框)。</p> <p>outerHeight() - 返回元素的高度(包括内边距和边框)。</p> </body>