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;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>