关闭页面特效

JQuery

1|0一 jQuery简介


1|11.1 jquery是什么?


是一个javascript库,也是一个js框架。

1|21.2 优势


1、体积小

2、浏览器兼容性

3、写少量的代码,实现更多的功能。

1|31.3 文档就绪事件


$(document).ready(function(){ // 开始写 jQuery 代码... }); //简洁写法 $(function(){ // 开始写 jQuery 代码... });

JavaScript 入口函数:

window.onload = function () { // 执行代码 }

image-20230525090504156

1|41.4 $含义


作用 1:$(function)

1.相当于 window.onload=function(){} 2.功能比window.onload更强大 1) window onload一个页面只能写一个,但是可 以写多个$() 而不冲突 2) window onload要等整个页面加载完后再执行 (包括图片、超链接、音视频等), 但是$的执行时间要早 3.完整形式是$(document).ready(…….);

作用 2:$(selector)

选择器

​ jQuery具有强大的选择器功能

2|0二 选择器


jQuery 语法:

$():工厂函数

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作

基础语法是:$(selector).action()

jQuery的选择器主要参考了css的选择器

2|12.0 对象的转化


jQuery对象转为JS对象:加下标获取

JS对象转为jQuery对象:var zh = $(JS对象);

2|22.1 基础选择器


js获得元素对象为Element类型,JQ获得元素类型为Object类型

1、类选择器

$(".title").css("color", "green");

2、标签选择器

$("span").css("color", "red");

3、ID选择器

$("#box").css("color", "yellow");

4、并集选择器

$("span,p,.head").css("background-color","black").css("color","white")

5、全局选择器

$("*").css("margin",0).css("padding",0).css("background-color","#000")

2|32.2 层次选择器


1、后代选择器 语法:基础选择器+空格

2、子选择器 >

3、相邻元素选择器 + (紧挨着的)

4、同辈元素选择器 ~

2|42.3 属性选择器


是一种辅助,适用场景:标签相同,标签的类名也相同的情况。

1、$("a[href^=http]") 属性href的属性值是以http开头

2、$("a[href$=cn]") 属性href的属性值是以cn结尾

3、$("a[href*=www]") 属性href的属性值中包含有www

隔行变色:

$("ul li:even").css("background-color", "#eee") //符合性选择器 $("input[type=text][name^=z]").css("background-color","deeppink");

2|52.4 过滤选择器


1、基本过滤选择器

语法 描述 示例
:first 选取第一个元素 $(" li:first" )选取所有
  • 元素中的第一个
  • 元素
  • :last 选取最后一个元素 $(" li:last" )选取所有
  • 元素中的最后一个
  • 元素
  • :not(selector) 选取去除所有与给定选择器匹配的元素 $(" li:not(.three)" )选取class不是three的元素
    :even 选取索引是偶数的所有元素(index从0开始) $(" li:even" )选取索引是偶数的所有
  • 元素
  • :odd 选取索引是奇数的所有元素(index从0开始) $(" li:odd" )选取索引是奇数的所有
  • 元素
  • 语法 描述 示例
    :eq(index) 选取索引等于index的元素(index从0开始) $("li:eq(1)" )选取索引等于1的
  • 元素
  • :gt(index) 选取索引大于index的元素(index从0开始) $(" li:gt(1)" )选取索引大于1的
  • 元素(注:大于1,不包括1)
  • :lt(index) 选取索引小于index的元素(index从0开始) $(“li:lt(1)” )选取索引小于1的
  • 元素(注:小于1,不包括1)
  • :header 选取所有标题元素,如h1~h6 $(":header" )选取网页中所有标题元素
    :focus 选取当前获取焦点的元素 $(":focus" )选取当前获取焦点的元素
    :animated 选择所有动画 $(":animated" )选取当前所有动画元素

    2、可见性过滤选择器

    function hide(){ $(":visible").hide() } //显示 function show(){ $(":hidden").show() }

    2|62.5 子元素选择器


    :nth-child

    匹配其父元素下的第N个子或奇偶元素

    ':eq(index)'只匹配一个元素,而这个将为每一个父元素匹配子元素。

    :nth-child从1开始的,而:eq()是从0开始算的

    可以使用:

    语法 描述
    :nth-child(even) 偶数
    :nth-child(odd) 奇数
    :nth-child(3n) 3的倍数
    :nth-child(2) 2
    :nth-child(3n+1) 3的倍数+1
    :nth-child(3n+2) 3的倍数+2
    :first-child 第一个子元素
    :last-child 最后一个子元素
    :only-child 只有一个子元素

    2|72.6 表单选择器


    // √ 获得form表单中的所有的表单项 var inp= $(":input") // √ input标签 type属性等于text所对应的对象 $(":text").css("background-color","green"); $(":password").css("background-color","red")

    2|82.7 表单属性选择器


    var but = $("input:disabled");//不可操作的按钮 var but = $("input:enabled");//可操作的按钮 var ch = $("input:checked");//多选框 var sel = $("select option:selected")//被选择的下拉列表 var td = $("td:empty");//td为空的

    3|0三 jQuery Dom操作


    3|11.1 样式操作


    .css(属性名,属性值)

    .addClass(类名1 类型2 类名3)与.removeClass(类名1 类型2 类名3) 给某个jquery对象[DOM元素 $("div")]追加样式和移除样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("body div:first").addClass("important blue"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <div id="div1">这是一些文本。</div> <div id="div2">这是一些文本。</div> <br> <button>为第一个 div 元素添加类</button> </body> </html>
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <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 class="important">这是另外一个段落。</p> <br> <button>从元素中移除 class</button> </body> </html>

    .toggleClass("menu content"); 相当于addClass()与removeClass的合体,点击第一次是追加,第二次是移除。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 class="blue">标题 2</h2> <p class="blue">这是一个段落。</p> <p>这是另外一个段落。</p> <br> <button>切换 class</button> </body> </html>

    .hasClass()判断某个元素是否拥有指定的样式 ,可以做为if语句的条件。

    this关键字:

    示例

    $("#menu").mouseover(function() { if($(this).hasClass("content")){ $(this).removeClass("content"); } });

    扩展:

    $("#menu").mouseover(function(){ $(this).css("border","1px solid #ff0000"); }); //$(this) 触发当前事件的元素对象

    3|21.2 内容操作


    html代码操作

    .html() 得到值

    var html=$("#menu").html();

    .text() 得到值

    var text=$("#menu").text();
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <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("RUNOOB"); }); }); </script> </head> <body> <p id="test1">这是一个段落。</p> <p id="test2">这是另外一个段落。</p> <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p> <button id="btn1">设置文本</button> <button id="btn2">设置 HTML</button> <button id="btn3">设置值</button> </body> </html>

    设置val() 的回调函数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "旧 html: " + origText + " 新 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>

    3|31.3 属性操作


    attr()

    取值

    var uname=$("#username").val(); console.log(uname)

    设置值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); }); }); </script> </head> <body> <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p> <button>修改 href 值</button> <p>点击按钮修改后,可以点击链接查看链接地址是否变化。</p> </body> </html>

    attr() 的回调函数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#runoob").attr("href", function(i, origValue){ return origValue + "/jquery"; }); }); }); </script> </head> <body> <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p> <button>修改 href 值</button> <p>点击按钮修改后,可以点击链接查看 href 属性是否变化。</p> </body> </html>

    3|41.4 节点操作


    创建节点

    var node=$("<li>家电</li>");

    追加节点/插入节点

    $("#menu").append(node); //特征:创建的新节点,插入后总是在已有元素之后 node.appendTo($("#menu")) $("#menu").prepend(node); //特征:创建的新节点,插入后总是在已有元素之前 node.appendTo($("#menu")) $("#menu")append(node,node,node); //同时添加三个 //同辈元素的节点 $("#menu").after(node); //把node节点插入到menu节点之后 node.insertAfter($("#menu")) $("#menu").before(node); //把node节点插入到menu节点之前 node.insertBefore($("#menu"))

    删除节点

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul class="menu"> <li>1&nbsp;<span>删除</span></li> <li>2&nbsp;<span>删除</span></li> <li>3&nbsp;<span>删除</span></li> <li>4&nbsp;<span>删除</span></li> <li>5&nbsp;<span>删除</span></li> </ul> </body> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(".menu li span").click(function(){ $(this).parent().remove(); }); </script> </html>

    过滤删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <p>这是一个段落。</p> <p class="italic"><i>这是另外一个段落。</i></p> <p class="italic"><i>这是另外一个段落。</i></p> <button>移除所有 class="italic" 的 p 元素。</button> </body> </html>

    清除节点

    $("#div1").empty();

    替换节点

    $("#menu").replaceWith(节点对象);

    3|51.5 元素属性操作


    $("#img").attr("src"); $("#img").attr({"src":"img/a.jpg","width":"100px"}) //设置元素属性 $("#img").removeAttr("alt"); //移除元素属性

    4|0四 节点遍历


    4|12.1 遍历子元素


    .children()可以得到子节点的集合

    您也可以使用可选参数来过滤对子元素的搜索

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").children("p.1").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p class="1">p (儿子元素) <span>span (孙子元素)</span> </p> <p class="2">p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body> </html>

    4|22.2 遍历同辈元素


    .next() 下一个节点

    .nextAll() 方法返回被选元素的所有跟随的同胞元素。

    .nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

    .prev() 上一个节点

    .siblings() 同辈所有的节点(不包含本身)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>

    加参数过滤

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("h2").siblings("p").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>

    4|32.3 遍历前辈元素


    .parent()

    .parents();

    parentsUntil("div");

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>

    4|42.4 遍历的其他方法


    var children = $("ul").children(); $(children).each(function(index, item) { console.log($(item).text()); });

    find()方法:用于在父节点上,查找子节点

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("div").find("span").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p>p (儿子元素) <span>span (孙子元素)</span> </p> <p>p (儿子元素) <span>span (孙子元素)</span> </p> </div> </body> </html>

    filter()方法:用于在节点上,过滤含有某种属性的元素

    <!DOCTYPE html> <html> <head> <style> div { width:60px; height:60px; margin:5px; float:left; border:2px white solid; } </style> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <div></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div></div> <script> $("div").css("background", "blue").filter(".middle").css("border-color", "red"); </script> </body> </html>

    5|0五 事件


    5|11.基础事件


    鼠标事件 键盘事件 表单事件 文档/窗口事件
    click keypress submit load
    dblclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave blur unload
    hover

    1.1鼠标事件

    鼠标单击事件 ,双击

    $("p").click(function(){ $(this).hide(); }); $("p").dblclick(function(){ $(this).hide(); });

    鼠标移入、移出

    <li onmouseenter="fadeIn()" onmouseleave="fadeOut()"> <a href="#">111</a> </li> <!--事件不会冒泡,不会穿透盒子--> <li onmouseover="fadeIn()" onmouseout="fadeOut()"> <a href="#">222</a> </li> <!--事件会冒泡--> $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); $("#p1").mouseleave(function(){ alert("再见,您的鼠标离开了该段落。"); });

    页面加载

    $("img").load(function(){ alert("图片已载入"); });

    域的内容被改变

    $("img").change(function(){ alert("域的内容被改变"); });

    失去焦点

    $("img").blur(function(){ alert("失去焦点"); });

    1.2 键盘事件

    keydown() //键按下 keyup() //键弹起 keypress() //产生可以打印的字符

    1.3 表单事件

    1.4 window事件

    5|22.绑定事件


    //一般是用于给未来元素绑定事件的 $(function(){ $(".on").bind("click",function(){ alert(1) }) });

    5|33.复合事件


    hover是 mouseover与mouserout的组合

    5|44.jQuery动画


    4.1 显示与隐藏

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });

    语法

    $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow""fast" 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    元素的显示

    show(1000) 元素的显示

    元素的隐藏

    hide(1000) 元素的隐藏

    $("button").click(function(){ $("p").hide(1000); });
    $(document).ready(function(){ $(".hidebtn").click(function(){ $("div").hide(1000,"linear",function(){ alert("Hide() 方法已完成!"); }); }); }); //第二个参数是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。

    第二个参数是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。

    toggle()

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    $("button").click(function(){ $("p").toggle(); });

    语法:

    $(*selector*).toggle(*speed,callback*);

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    4.2 元素的透明度

    淡入

    fadeIn() 淡入

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p> <button>点击淡入 div 元素。</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html>

    淡出

    fadeOut() 淡出

    $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });

    fadeToggle() 方法

    jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

    如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

    $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });

    透明度

    fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); }); }); </script> </head> <body> <p>演示 fadeTo() 使用不同参数</p> <button>点我让颜色变淡</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html>

    4.3 元素的滑动

    下滑

    slideDown() 方法用于向下滑动元素。

    语法:

    $(*selector*).slideDown(*speed,callback*);

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是滑动完成后所执行的函数名称。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">点我滑下面板</div> <div id="panel">Hello world!</div> </body> </html>

    上滑

    slideUp()

    jQuery slideUp() 方法用于向上滑动元素。

    语法:

    $(*selector*).slideUp(*speed,callback*);

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是滑动完成后所执行的函数名称。

    下面的例子演示了 slideUp() 方法:

    $("#flip").click(function(){ $("#panel").slideUp(); });

    slideToggle() 方法

    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    如果元素向下滑动,则 slideToggle() 可向上滑动它们。

    如果元素向上滑动,则 slideToggle() 可向下滑动它们。

    $(*selector*).slideToggle(*speed,callback*);

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是滑动完成后所执行的函数名称。

    下面的例子演示了 slideToggle() 方法:

    $("#flip").click(function(){ $("#panel").slideToggle(); });

    4.4 计算元素的位置

    jQuery Dimensions

    width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

    height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

    $("button").click(function(){ var txt=""; txt+="div 的宽度是: " + $("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); });

    innerWidth() 方法返回元素的宽度(包括内边距)。

    innerHeight() 方法返回元素的高度(包括内边距)。

    $("button").click(function(){ var txt=""; txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度,包含内边距: " + $("#div1").innerHeight(); $("#div1").html(txt); });

    outerWidth() 方法返回元素的宽度(包括内边距和边框)。

    outerHeight() 方法返回元素的高度(包括内边距和边框)。

    $("button").click(function(){ var txt=""; txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); });

    4.5 计算网页宽度高度

    1. // 部分jQuery函数
    2. $(window).height()   //浏览器时下窗口可视区域高度
    3. $(document).height()  //浏览器时下窗口文档的高度
    4. $(document.body).height()      //浏览器时下窗口文档body的高度
    5. $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
    6. $(window).width()   //浏览器时下窗口可视区域宽度
    7. $(document).width() //浏览器时下窗口文档对于象宽度
    8. $(document.body).width()      //浏览器时下窗口文档body的高度
    9. $(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding

    __EOF__

    作  者YXH
    出  处https://www.cnblogs.com/YxinHaaa/p/17421738.html
    关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
    版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
    声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!

    posted @   YxinHaaa  阅读(10)  评论(0编辑  收藏  举报
    相关博文:
    阅读排行:
    · [翻译] 为什么 Tracebit 用 C# 开发
    · 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
    · Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
    · DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
    · RFID实践——.NET IoT程序读取高频RFID卡/标签
    0
    0
    关注
    跳至底部
    点击右上角即可分享
    微信分享提示