JQuery HTML
1.JQuery捕获
1.三个简单的适用于DOM操作的方法
text():设置或者返回所选元素的文本内容
html():设置或者返回所选元素的文本内容(包含html标记)
val():设置或者返回表单的值
2.text()实例
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".bth1").click(function(){ alert($("p").text()); }); $(".bth2").click(function(){ alert($("p").html()); }); }); </script> </head> <body> <p>点击之后,返回<b>这段文</b>字的相<i>关内</i>容</p> <button class="bth1">点击显示内容</button> <button class="bth2">点击显示html</button> </body> </html>
2.val()的实例
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".bth1").click(function(){ alert("输入的值:"+$("input").val()); }); }); </script> </head> <body> <input type="text" name="text1" class="input" value="" > <button class="bth1">点击之后显示输入值</button> </body> </html>
3.attr()实例
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".bth1").click(function(){ alert($("a").attr("href")); }); $(".bth2").click(function(){ alert($("a").attr("shape")); }); }); </script> </head> <body> <a href="www.baidu.com" shape="poly" >百度一下</a> <button class="bth1">点击之后获取链接属性值</button> <button class="bth2">点击之后获取形状属性值</button> </body> </html>
2.JQuery的设置
1.设置text(),val()和html()
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".bth1").click(function(){ $(".p1").text("图书馆人好少"); }); $(".bth2").click(function(){ $(".p2").html("<b>对面坐了个美女</b>"); }); $(".bth3").click(function(){ $("input").val("为什么还是没有女朋友"); }); }); </script> </head> <body> <p class="p1">设置文本</p> <p class="p2">设置html</p> <input type="text" name="text1" value="设置值"> <button class="bth1">点击之后设置文本属性值</button> <button class="bth2">点击之后设置html属性值</button> <button class="bth3">点击之后设置值属性值</button> </body> </html>
2.关于text()和html()的回调函数问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> var i=3; $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ //关于回调函数的参数i和origText没有懂是什么意思 return " 新文本: Hello world! "; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return " 新 html: Hello <b>world!</b> "; }); }); }); </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>
3.使用attr()改变值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("a").attr("href","https://www.jd.com/"); }); }); </script> </head> <body> <a href="http://www.baidu.com">点击连接</a> <button id="btn1">点击之后链接变为京东</button> </body> </html>
4.attr()的回调方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("a").attr("href",function(i,origValue){ return origValue+"/tranlate"; }); }); }); </script> </head> <body> <a href="http://www.baidu.com">点击连接</a> <button id="btn1">点击之后链接百度翻译</button> //链接的用户是我,所以失效,但是这个方式是正确的 </body> </html>
3.添加元素
1.append()在指定元素的内部结尾增加内容
prepend()方法类似,只不过是添加在前方
而after()和before的与上面的区别在与是在内部元素外添加
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").append(",在你最美丽的时刻"); }); }); </script> </head> <body> <p>如何让我遇见你</p> <button id="btn1">点击之后追加一句话</button> </body> </html>
2.追加多条内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> function missyou() { var txt1="<p>2017.4.17 19:10:59</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("2017.4.17 19:11:00"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="我想你,只在这一秒"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 } </script> </head> <body> <p>三行情书:</p> <button onclick="missyou()">情满天下</button> </body> </html>
4.删除元素
1.remove()是删除父元素和子元素,就是所有内容,包括事件和数据
2.empty()是删除子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $(".b1").click(function(){ $(".div1").remove(); }); $(".b2").click(function(){ $(".div2").empty(); }); }); </script> <style type="text/css"> .div1,.div2{ background-color: yellow; border: solid 1px red; margin: 10px; } </style> </head> <body> <div class="div1" > <p>一句话</p> <i>一句话</i> <b>一句话</b> </div> <div class="div2" > <p>一句话2</p> <i>一句话2</i> <b>一句话2</b> </div> <button class="b1" >remove()删除被选元素及子元素</button> <button class="b2">empty()删除被选元素的子元素</button> </body> </html>
3.remove()方法还允许一个参数(选择器:选择一类元素删除)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $(".b1").click(function(){ $("div").remove(".div2"); //选择div中class为“div2”的删除 }); }); </script> <style type="text/css"> .div2{ background-color: yellow; border: solid 1px red; margin: 10px; } </style> </head> <body> <div class="div"> </div> <div class="div2" > <p>一句话2</p> <i>一句话2</i> <b>一句话2</b> </div> <button class="b1" >remove()删除被选元素及子元素</button> </body> </html>
5.JQuery的css类
1.addclass()添加一个或者多个css类
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $(".b1").click(function(){ $("h1,p").addClass("size"); //addClass的C要大写 $("h2,p").addClass("color"); $("h3,h4").addClass("size color"); //添加多个 }); }); </script> <style type="text/css"> .size{ font-size: 20px; } .color{ color: red; } </style> </head> <body> <p>一句话</p> <h1>一句话</h1> <h2>一句话</h2> <h3>一句话</h3> <h4>一句话</h4> <button class="b1" >点击添加类</button> </body> </html>
2.removeClass()移除类
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $(".b1").click(function(){ $("h1,p").addClass("size"); //addClass的C要大写 $("h2,p").addClass("color"); $("h3,h4").addClass("size color"); //添加多个 }); $(".b2").click(function(){ $("h1,h2,p,h3,h4").removeClass("size color"); }); }); </script> <style type="text/css"> .size{ font-size: 20px; } .color{ color: red; } </style> </head> <body> <p>一句话</p> <h1>一句话</h1> <h2>一句话</h2> <h3>一句话</h3> <h4>一句话</h4> <button class="b1" >点击添加类</button> <button class="b2">点击移除类</button> </body> </html>
3.toggleClass()实现添加删除的转换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $(".b1").click(function(){ $("h1,p,h2,h3,h4").toggleClass("size color"); }); }); </script> <style type="text/css"> .size{ font-size: 20px; } .color{ color: red; } </style> </head> <body> <p>一句话</p> <h1>一句话</h1> <h2>一句话</h2> <h3>一句话</h3> <h4>一句话</h4> <button class="b1" >点击添加/删除类</button> </body> </html>
6.CSS方法
css返回属性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("button").click(function(){ alert( $("p").css("background-color") ); }); }); </script> </head> <body> <p style="background-color: red">一句话</p> <button class="b1" >点击返回css属性值</button> </body> </html>
css设置属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $(".b1").click(function(){ alert( $("p").css("background-color") ); }); $(".b2").click(function(){ $("p").css("background-color","yellow"); //设置属性 }); }); </script> </head> <body> <p style="background-color: red">一句话</p> <button class="b1" >点击返回css属性值</button> <button class="b2" >点击设置css属性值</button> </body> </html>
css设置多个属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.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> </html>
7.JQuery 尺寸
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </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> </html>
本博客基于网络课程完成,旨在学习,有错误请指正!