一.基本选择器
1.1.id选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p1</p> <p class="c1" id="d1">p3</p> </body> <script> $("#d1").css("color",'red'); </script> </html>
效果：
1.2.class选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p1</p> <p class="c1" id="d1">p3</p> </body> <script> // $("#d1").css("color",'red'); $(".c1").css("color",'blue'); </script> </html>
效果：
#jquary获取到的是一个集合，循环里面的内容进行操作
1.3.标签进行操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p1</p> <p class="c1" id="d1">p3</p> </body> <script> // $("#d1").css("color",'red'); // $(".c1").css("color",'blue'); $("p").css("color",'green'); </script> </html>
效果：
1.4.复合选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p1</p> <p class="c1" id="d1">p3</p> <div>a div</div> </body> <script> // $("#d1").css("color",'red'); // $(".c1").css("color",'blue'); // $("p").css("color",'green'); $("#d1,div").css("color",'yellow'); </script> </html>
效果：
二、层级选择器
2.1.后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p1</p> <p class="c1" id="d1">p3</p> <div>a div</div> <div class="outer"> <div class="c2"> <div class="c3">c3 no div</div> </div> <p id="d2" class="c3">there is a p</p> </div> </body> <script> $(".outer .c3").css("color",'purple'); </script> </html>
效果：
2.2.属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p1</p> <p class="c1" id="d1">p3</p> <div mzd="dog">a div</div> <div class="outer"> <div class="c2"> <div class="c3">c3 no div</div> </div> <p id="d2" class="c3">there is a p</p> </div> </body> <script> //属性选择器 // $("[mzd]").css("color",'red'); $("[mzd='dog']").css("color",'red'); </script> </html>
效果：
2.3.表单选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p1</p> <p class="c1" id="d1">p3</p> <div mzd="dog">a div</div> <div class="outer"> <div class="c2"> <div class="c3">c3 no div</div> </div> <p id="d2" class="c3">there is a p</p> </div> <input type="text"> </body> <script> //表单选择器 $(":text").val("woxie"); </script> </html>
效果：
三、筛选器
3.1.选择某个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="c1">p1</p> <p class="c1">p2</p> <p class="c1">p3</p> <p class="c1">p4</p> <p class="c1">p5</p> <p class="c1">p6</p> <p class="c1">p7</p> <p class="c1" id="d1">p8</p> <div mzd="dog">a div</div> <div class="outer"> <div class="c2"> <div class="c3">c3 no div</div> </div> <p id="d2" class="c3">there is a p</p> </div> <input type="text"> </body> <script> //筛选器 var i=3; $(".c1").eq(i).css("color",'red'); </script> </html>
效果：
四、查找筛选器
4.1.id下所有兄弟标签变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <div> <p class="c1">p1</p> <p class="c1" id="d1">p2</p> <p class="c1">p3</p> <p class="c1">p4</p> <p class="c1">p5</p> <p class="c1">p6</p> <p class="c1">p7</p> <div mzd="dog">a div</div> </div> <p class="c1">p8</p> <!--<div class="outer">--> <!--<div class="c2">--> <!--<div class="c3">c3 no div</div>--> <!--</div>--> <!--<p id="d2" class="c3">there is a p</p>--> <!--</div>--> </body> <script> //筛选查找 $("#d1").nextAll().css("color",'red'); </script> </html>
效果：
4.2.下一个标签变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <div> <p class="c1">p1</p> <p class="c1" id="d1">p2</p> <p class="c1">p3</p> <p class="c1">p4</p> <p class="c1">p5</p> <p class="c1">p6</p> <p class="c1">p7</p> <div mzd="dog">a div</div> </div> <p class="c1">p8</p> </body> <script> //筛选查找 // $("#d1").nextAll().css("color",'red'); $("#d1").next().css("color",'red'); </script> </html>
效果：
4.3.d1到d7之间变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <div> <p class="c1">p1</p> <p class="c1" id="d1">p2</p> <p class="c1">p3</p> <p class="c1">p4</p> <p class="c1">p5</p> <p class="c1">p6</p> <p class="c1" id="p7">p7</p> <div mzd="dog">a div</div> </div> <p class="c1">p8</p> </body> <script> $("#d1").nextUntil("#p7").css("color",'red'); </script> </html>
效果：
4.4.所有兄弟标签变色
$("#d7").siblings().css("color",'red');
效果：
4.5.查找所有孩子标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <div> <p class="c1">p1</p> <p class="c1" id="d1">p2</p> <p class="c1">p3</p> <p class="c1">p4</p> <p class="c1">p5</p> <p class="c1">p6</p> <p class="c1" id="d7">p7</p> <div mzd="dog">a div</div> </div> <p class="c1">p8</p> <div class="outer"> <div class="c2"> <div class="c3">c3 no div</div> </div> <p id="d2" class="c3">there is a p</p> </div> </body> <script> $(".outer").children().css("color",'red'); </script> </html>
效果：
$(".outer").children(".c3").css("color",'yellow');
效果：
4.6.find方法
$(".outer").find(".c3").css("color",'blue');
效果：
4.7.赋值操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <p class="p1">p1</p> <p class="p1">p2</p> <p class="p1">p3</p> <p class="p1"><a href="">click</a></p> <script> $("p").click(function () { //取值操作 // alert($(this).html()); //<a href="">click</a> // alert($(this).text()); //click $(this).html("hello kitty"); }) </script> </body> </html>
效果：
<script> $("p").click(function () { //取值操作 // alert($(this).html()); //<a href="">click</a> // alert($(this).text()); //click // $(this).html("hello kitty"); $(this).html("<a href=''>this is a</a>") }) </script>
效果：
<script> $("p").click(function () { //取值操作 // alert($(this).html()); //<a href="">click</a> // alert($(this).text()); //click // $(this).html("hello kitty"); // $(this).html("<a href=''>this is a</a>") $(this).text("<a href=''>this is b</a>") }) </script>
效果：
五、属性操作
5.1.属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>three p here</p> <script src="jquery-3.3.1.js"></script> <script> $("p").attr("class","c1"); //添加class $("p").attr("id","d1"); //添加id $("p").attr("ckl","achiever"); //添加自定义属性 </script> </body> </html>
查看效果：
获取属性：
六、事件绑定
6.1.点击标签，弹出内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>diligent</li> <li>self-discipline</li> <li>achiever</li> </ul> <script src="jquery-3.3.1.js"></script> <script> //点击标签，弹出内容 $("ul li").click(function () { alert($(this).html()); }); </script> </html>
效果：
6.2.点击添加按钮，添加新内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>diligent</li> <li>self-discipline</li> <li>achiever</li> </ul> <button>add content</button> <script src="jquery-3.3.1.js"></script> <script> //点击标签，弹出内容 $("ul li").click(function () { alert($(this).html()); }); //点击按钮，添加新内容 $("button").click(function () { var $li=$("<li>"); //创建新标签 $li.html("euphoria"); //标签添加内容 $("ul").append($li); //添加子节点 }) </script> </html>
效果：
事件绑定on方法
<script> //事件绑定on方法 $("button").click(function () { alert("123"); }) $("button").on("click",function () { alert("123"); }) </script>
#两种绑定方法其实是一样的，上面的是on的简写方式，但是on方法还有其它参数可以使用，后面会用到
思考，上面添加的新内容，点击的时候回弹出内容吗？
答案：当然不会，因为js从上到下加载，之前加载的三个表情已经事件绑定了，后面新加的内容，并没有事件绑定，如何解决？
7.事件委派
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>diligent</li> <li>self-discipline</li> <li>achiever</li> </ul> <button>add content</button> <script src="jquery-3.3.1.js"></script> <script> //点击按钮，添加新内容 $("button").click(function () { var $li=$("<li>"); //创建新标签 $li.html("euphoria"); //标签添加内容 $("ul").append($li); //添加子节点 }); //ul标签把事件委派给子标签li $("ul").on("click","li",function () { alert($(this).html()); }) </script> </html>
效果：
添加：
结果：
页面加载完毕后，才事件绑定，写法
<script> //页面加载完毕 $(document).ready(function () { $("button").click(function () { var $li=$("<li>"); //创建新标签 $li.html("euphoria"); //标签添加内容 $("ul").append($li); //添加子节点 }); //ul标签把事件委派给子标签li $("ul").on("click","li",function () { alert($(this).html()); }); }) //简单写法 $(function () { $("button").click(function () { var $li=$("<li>"); //创建新标签 $li.html("euphoria"); //标签添加内容 $("ul").append($li); //添加子节点 }); //ul标签把事件委派给子标签li $("ul").on("click","li",function () { alert($(this).html()); }); }) </script>
8.each循环
8.1.遍历方式一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.3.1.js"></script> <script> //循环一个类似数组 var arr=['ckl','future','self-discipline']; $.each(arr,function (i,v) { console.log(i,v) }); //循环一个键值对 var obj={"name":"ckl","hobby":"freedom"}; $.each(obj,function (j,v) { console.log(j,v) }); </script> </body> </html>
结果：
8.2.遍历方式二：
打印每个p标签的内容，如果是第二个p，让内容变红：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>diligent</p> <p>self-discipline</p> <p>achiever</p> <script src="jquery-3.3.1.js"></script> <script> $("p").each(function (i) { if(i==1){ $(this).css("color","red"); } console.log($(this).html()); }) </script> </body> </html>
效果：
8.3.表格选择操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="selectAll">全选</button> <button class="cancelAll">取消</button> <button class="selectRev">反选</button> <hr> <table border="1"> <tr> <td><input type="checkbox"></td> <td>乌卡卡</td> <td>12</td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>秦始皇</td> <td>89</td> <td>489</td> </tr> <tr> <td><input type="checkbox"></td> <td>孙中山</td> <td>62</td> <td>773</td> </tr> <tr> <td><input type="checkbox"></td> <td>希特勒</td> <td>39</td> <td>323</td> </tr> </table> <script src="jquery-3.3.1.js"></script> <script> //全选操作 $(".selectAll").click(function () { // $(":checkbox").attr("checked","checked"); //attr方法 $(":checkbox").prop("checked",true); }); //取消操作 $(".cancelAll").click(function () { // $(":checkbox").removeAttr("checked"); //attr方法 $(":checkbox").prop("checked",false); }); //反选操作,attr不好实现 $(".selectRev").click(function () { //循环checkbox $(":checkbox").each(function () { //判断实现 // if($(this).prop("checked")){ // $(this).prop("checked",false) // } else { // $(this).prop("checked",true) // } //一行来实现 $(this).prop("checked",!$(this).prop("checked")); }); }) </script> </body> </html>
效果：
全选
取消：
反选：
9.val说明
9.1.val赋值取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" class="c1" value="123"> <textarea class="c2"></textarea> <script src="jquery-3.3.1.js"></script> <script> //取值 console.log($(".c1").val()); //赋值 $(".c1").val("kitty"); $(".c2").val("hello kitty"); </script> </body> </html>
效果：
需求：点击show显示框里的内容：
实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" class="c1" value="123"> <textarea class="c2"></textarea> <button>show</button> <script src="jquery-3.3.1.js"></script> <script> //取值 console.log($(".c1").val()); //赋值 $(".c1").val("kitty"); $(".c2").val("hello kitty"); $("button").click(function () { console.log($(".c2").val()); }) </script> </body> </html>
效果：
需求：点击show显示select内容：
内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" class="c1" value="123"> <textarea class="c2"></textarea> <button>show</button> <select name="pro" id="d1"> <option value="shanxi">陕西</option> <option value="shandong">山东</option> <option value="hubei">湖北</option> </select> <script src="jquery-3.3.1.js"></script> <script> //取值 console.log($(".c1").val()); //赋值 $(".c1").val("kitty"); $(".c2").val("hello kitty"); $("button").click(function () { // console.log($(".c2").val()); console.log($("#d1").val()); }) </script> </body> </html>
效果：
如果点击div，会不会 弹出内容？
<div value="yahei" class="c3">this is a new area</div>
效果：
内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" class="c1" value="123"> <textarea class="c2"></textarea> <button>show</button> <select name="pro" id="d1"> <option value="shanxi">陕西</option> <option value="shandong">山东</option> <option value="hubei">湖北</option> </select> <div value="yahei" class="c3">this is a new area</div> <script src="jquery-3.3.1.js"></script> <script> //取值 console.log($(".c1").val()); //赋值 $(".c1").val("kitty"); $(".c2").val("hello kitty"); $("button").click(function () { // console.log($(".c2").val()); // console.log($("#d1").val()); console.log($(".c3").val()); //没有任何内容，value是自定义属性 console.log($(".c3").html()); //显示内容 }) </script> </body> </html>
9.节点操作
9.1.点击按钮，添加图片
实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 300px; height: 300px; border: solid 1px red; } </style> </head> <body> <div class="c1"> <p>Here is div area</p> </div> <hr> <button>add</button> <script src="jquery-3.3.1.js"></script> <script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); $(".c1").append($img); }) </script> </body> </html>
效果：
9.2.在节点前插入
<script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); //父节点添加子节点 // $(".c1").append($img); //子节点添加到父节点 // $img.appendTo($(".c1")); //在节点前插入 $(".c1 p").prepend($img); }) </script>
效果：
9.3.在节点后插入
<script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); //父节点添加子节点 // $(".c1").append($img); //子节点添加到父节点 // $img.appendTo($(".c1")); //在节点前插入 // $(".c1 p").prepend($img); //在节点后插入 $(".c1 p").after($img); }) </script>
效果：
9.4.用图片替换p标签
<script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); //父节点添加子节点 // $(".c1").append($img); //子节点添加到父节点 // $img.appendTo($(".c1")); //在节点前插入 // $(".c1 p").prepend($img); //在节点后插入 // $(".c1 p").after($img); //替换 $(".c1 p").replaceWith($img); }) </script>
效果：
9.5.删除p标签
<script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); //父节点添加子节点 // $(".c1").append($img); //子节点添加到父节点 // $img.appendTo($(".c1")); //在节点前插入 // $(".c1 p").prepend($img); //在节点后插入 // $(".c1 p").after($img); //替换 // $(".c1 p").replaceWith($img); //删除 $(".c1 p").remove(); }) </script>
效果：
9.6.删除c1标签
<script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); //父节点添加子节点 // $(".c1").append($img); //子节点添加到父节点 // $img.appendTo($(".c1")); //在节点前插入 // $(".c1 p").prepend($img); //在节点后插入 // $(".c1 p").after($img); //替换 // $(".c1 p").replaceWith($img); //删除 // $(".c1 p").remove(); $(".c1").remove(); }) </script>
效果：
9.7.清空
<script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); //父节点添加子节点 // $(".c1").append($img); //子节点添加到父节点 // $img.appendTo($(".c1")); //在节点前插入 // $(".c1 p").prepend($img); //在节点后插入 // $(".c1 p").after($img); //替换 // $(".c1 p").replaceWith($img); //删除 // $(".c1 p").remove(); // $(".c1").remove(); $(".c1").empty(); }) </script>
效果：
9.8.克隆
<script> $("button").click(function () { $img=$("<img>"); // $img.attr("src","img/huyang.jpg"); // $img.attr("style","width:200px;height:200px;"); //简单写法 $img.attr({"src":"img/huyang.jpg","height":200,"width":200}); //父节点添加子节点 // $(".c1").append($img); //子节点添加到父节点 // $img.appendTo($(".c1")); //在节点前插入 // $(".c1 p").prepend($img); //在节点后插入 // $(".c1 p").after($img); //替换 // $(".c1 p").replaceWith($img); //删除 // $(".c1 p").remove(); // $(".c1").remove(); // $(".c1").empty(); //克隆 var c=$(".c1 p").clone(); $(".c1").append(c); }) </script>
效果：
10.input的clone
实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="item"> <button class="add">+</button> <input type="text"> </div> </div> <script src="jquery-3.3.1.js"></script> <script> $(".add").click(function () { var it=$(".item").clone(); $(".outer").append(it); }) </script> </body> </html>
效果：
点击三次
问题：三次之后，应该复制三次，而不是不是这么多个，原因是，每次复制的结果，都作为下一次复制的内容
解决办法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="item"> <button class="add">+</button> <input type="text"> </div> </div> <script src="jquery-3.3.1.js"></script> <script> $(".add").click(function () { // var it=$(".item").clone(); //it是父标签的内容，也就是item的内容 var $it=$(this).parent().clone(); $(".outer").append($it); }) </script> </body> </html>
结果：
如果想实现：添加的内容前面是"-"呢？然后点击"-"，删除当前标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="item"> <button class="add">+</button> <input type="text"> </div> </div> <script src="jquery-3.3.1.js"></script> <script> $(".add").click(function () { // var it=$(".item").clone(); //it是父标签的内容，也就是item的内容 var $it=$(this).parent().clone(); //对第一个标签，也就是add标签操作，修改内容，添加一个class $it.children().first().html("-").attr("class","del_f"); $(".outer").append($it); //点击del相关标签，删除父节点 // $(".del_f").click(function () { // $(this).parent().remove(); // }) }); //事件委派，已经委派给outer下的item的button标签 $(".outer").on("click",".item .del_f",function () { $(this).parent().remove(); }) </script> </body> </html>
结果：
➕：
➖：
十、动画效果
10.1.基本显示隐藏切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <p>春山多胜事，赏玩夜忘归</p> </div> <button class="xs">显示</button> <button class="yc">隐藏</button> <button class="qh">切换</button> <script src="jquery-3.3.1.js"></script> <script> $(".xs").click(function () { $("p").show(); }); $(".yc").click(function () { $("p").hide(); }); $(".qh").click(function () { $("p").toggle(); }) </script> </body> </html>
原本：
点击隐藏：
点击显示：
点击切换，如果隐藏就是显示，如显示就隐藏
这与自己也hide隐藏有什么区别?如果加上时间呢？
<script> $(".xs").click(function () { $("p").show(3000); }); $(".yc").click(function () { $("p").hide(3000); }); $(".qh").click(function () { $("p").toggle(3000); }) </script>
#逐渐隐藏，有一个动画效果
10.2.淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <p>春山多胜事，赏玩夜忘归</p> </div> <button class="xs">显示</button> <button class="yc">隐藏</button> <button class="qh">切换</button> <hr> <img src="img/huyang.jpg"> <hr> <button class="dr">淡入</button> <button class="dc">淡出</button> <button class="dq">淡切</button> <script src="jquery-3.3.1.js"></script> <script> $(".xs").click(function () { $("p").show(3000); }); $(".yc").click(function () { $("p").hide(3000); }); $(".qh").click(function () { $("p").toggle(3000); }); $(".dr").click(function () { $("img").fadeIn(5000); }); $(".dc").click(function () { $("img").fadeOut(5000); }); $(".dq").click(function () { $("img").fadeToggle(5000); }) </script> </body> </html>
效果：
点击淡出：
点击淡入：
#淡入淡出，颜色逐渐变化
10.3.偏移量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 200px; height: 200px; background-color: #9389ff; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.3.1.js"></script> <script> console.log($(".c1").offset()); </script> </body> </html>
查看偏移量：
修改margin：
<style> * { margin: 0; } .c1 { width: 200px; height: 200px; background-color: #9389ff; } </style>
查看offset:
获取偏移量：
<script> console.log($(".c1").offset()); console.log($(".c1").offset().top); console.log($(".c1").offset().left); </script>
结果：
需求：点击按钮，移动div：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; } .c1 { width: 200px; height: 200px; background-color: #9389ff; } </style> </head> <body> <div class="c1"></div> <button>move</button> <script src="jquery-3.3.1.js"></script> <script> console.log($(".c1").offset()); console.log($(".c1").offset().top); console.log($(".c1").offset().left); $("button").click(function () { $(".c1").offset({top:100,left:100}) }) </script> </body> </html>
效果：
10.4.position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; } .c1 { width: 200px; height: 200px; background-color: #9389ff; } .c2 { width: 200px; height: 200px; background-color: #ff6f06; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <button>move</button> <script src="jquery-3.3.1.js"></script> <script> console.log($(".c2").position().top); console.log($(".c2").position().left); console.log($(".c2").offset().top); console.log($(".c2").offset().left); </script> </body> </html>
效果：
#这时候的结果一样，因为参照物都是可视窗口，如果做修改呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; } .c1 { width: 200px; height: 200px; background-color: #9389ff; } .c2 { width: 200px; height: 200px; background-color: #ff6f06; } .father { position: relative; } </style> </head> <body> <div class="c1"></div> <div class="father"> <div class="c2"></div> </div> <button>move</button> <script src="jquery-3.3.1.js"></script> <script> console.log($(".c2").position().top); console.log($(".c2").position().left); console.log($(".c2").offset().top); console.log($(".c2").offset().left); </script> </body> </html>
效果：
