js页面加载

js页面初始化加载

1：$(function(){});

2：$(document).ready(function(){});

3：$(window).load(function(){});

4：window.onload = function(){};

5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执行aaa()方法。

注：第1种是第2种的简写方式。两个是document加载完成后就执行方法。第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。

js页面动态加载

setInterval()是一个实现定时调用的函数，可按照指定的周期（以毫秒计）
来调用函数或计算表达式。setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
</script>
 <p id='time'></p>
 <button onclick="myFunction()">点我</button>
 <script>
function myFunction() {
    setInterval(function(){ document.getElementById("time").innerHTML=Date(); }, 1000);        
}
</script>
 
 </body>
</html>

 标签属性设置，更改，查询

相同点
window.getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
不同点
element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
总结
我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。

例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<style>
div {color:red;height: 50px;}
p {margin-left:20px;}
body {background-color:white;}
</style>
    
</head>
<body>
<p>点击按钮计算 DIV 的背景颜色。</p>
<p><button onclick="myFunction()">点我</button></p>
<div id="test" style="background-color: rgb(178, 116, 230);width:130px;">测试 DIV</div>
<p>计算值为: <span id="demo"></span></p>

<script>
var elem = document.getElementById("test");
document.getElementById("demo").innerHTML = window.getComputedStyle(elem).getPropertyValue("height") +" and " +elem.style.width

    
</script>
</body>
</html>

window.getComputedStyle(elem).getPropertyValue("height")相当于window.getComputedStyle(elem)["height"]

JS和JQuery设置/获取CSS属性区别

JS:

function attribute() {

        var val=document.getElementById("in1").value,
            a1=document.getElementById("a1"),
            d2=document.getElementById("d2");

        //第一种直接设置本身自有属性方法
        a1.href="https://www."+val+".com";

        //第二种设置自定义属性方法
        d2.setAttribute("url","https://www."+val+".com");

        //获取选中属性的值
        var d1Url=d1.getAttribute("url");
        console.log(d1Url);

        //设置样式
        d2.style.background="#FAB2C9";

JQuery:在jQuery下直接使用$("element").css("属性"，"设置的值"),进行获取和修改。

  //设置属性、值
        $("#a2").attr("href","http://www.w3school.com.cn/");

        //同时设定多个
        $("#a2").attr({
            "data-num":"50",
            "target":"view_window"
        });

        //获取选择属性的值：
        var a2Href=$("#a2").attr("href");
        console.log("a2链接地址为："+a2Href);


        //设定样式
        $("#d2").css("border","5px solid #8E00FF");

        //同时设定多个
        $("#d2").css({
            "width" : "200",
            "height" : "50",
            "background":"#E058EA"
        });

在jQuery中,提供了attr函数来操作元素属性,具体如下:

函数名 说明 例子
attr(name) 取得第一个匹配元素的属性值. 
$("input").attr("value")
attr(property) 将一个"名/值"形式的对象设置为所有匹配元素的属性 
$("input").attr({ value: "txt", title: "text" });
attr(key,value) 为所有匹配的元素设置一个属性值 
$("input").attr("value","txt");
attr(key,fn) 为所有匹配的元素设置一个计算的属性值 
$("input").attr("title", function () { return this.value });
removeAttr(name) 从所有匹配的元素中删除一个属性 
$("input").removeAttr("value");

注意:

1.如果要设置对象的class属性时,必须使用className作为属性名.

2.我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已

根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值:

$("#txt1").attr("value")
$("#txt1").attr("value", "1234");

$("#dv1").attr("innerHTML", 'this is a div');
$("#dv1").attr("innerHTML");

实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下:

函数名 说明 例子
val() 获取第一个匹配元素的value值 
$("#txt1").val()
val(val) 为匹配的元素设置value值 
$("#txt1").val("txt1")
html() 获取第一个匹配元素的html内容 
$("#dv1").html()
html(val) 设置每一个匹配的元素的html内容 
$("#dv1").html("this is a div")
text() 取得所有匹配文本节点的内容,并将其连接起来 
$("div").text()
text(val) 将所有匹配元素的置为val 
$("div").text("divs")

使用jQuery操作CSS

1.修改CSS类

函数名 说明 例子
addClass(classes) 为每个匹配的元素添加指定的类名 
$("input").addClass("colorRed borderBlack");
hasClass(class) 判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回true 
alert($("input").hasClass("borderBlack"));
removeClass([classes]) 从匹配元素中移除所有或指定的css类 
$("input").removeClass("colorRed borderBlack");
toggleClass(classes) 如果存在(不存在)就删除(添加)指定类 
$("input").toggleClass("colorRed borderBlack");
toggleClass(classes,switch) 当switch是true时,添加类,switch为false时,删除类 
$("input").toggleClass("colorRed borderBlack", true);

注意:

1.addClass、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开

2.removeClass方法的参数可选,如果有参数,则删除指定class,如果无参数,则删除匹配元素的所有class

3.在调用toggleClass(classes,switch)时,我们可以有更多的用法,例如:

//每当按钮被点击三次时,添加样式
var i = 0;
$("#btn").click(function () {
    $("input").toggleClass("colorRed borderBlack", true);
});

2.修改CSS样式

函数名 说明 例子
css(name) 访问第一个匹配元素的样式属性 
$("input").css("color")
css(properties) 把一个"名/值"对设置给所有匹配元素的样式属性 
$("input").css({border:"solid 3px silver",color:"red"})
css(name,value) 为匹配的元素设置同一个样式属性
如果是数字,将自动转换为像素值		 
$("input").css("border-width","5");

注意:

对于样式值为数字的代码示例及结果:

示例 生成的源码 
$("input").css("border-width","5");

<</span>input style="BORDER-RIGHT-WIDTH: 5px; 
    BORDER-TOP-WIDTH: 5px; 
    BORDER-BOTTOM-WIDTH: 5px; 
    BORDER-LEFT-WIDTH: 5px" 
    id="txt1" />

注意:

对于一些常用的属性,例如width,height之类,使用attr("width")和css("width")是无法正常获取其值的,现在,我们来介绍一些常用的属性.

获取常用的属性

1.宽、高相关

函数名 说明 例子
width() 获取第一个匹配元素的宽度,默认为px 
$("#txt1").width()
width(val) 为匹配的元素设置宽度值,默认为px 
$("#txt1").width(200)
height() 获取第一个匹配元素的高度,默认为px 
$("#txt1").height()
height(val) 为匹配的元素设置宽度值,默认为px 
$("#txt1").height(20)
innerWidth() 获取第一个匹配元素内部区域宽度(包括padding,不包括border) 
$("#txt1").innerWidth()
innerHeight() 获取第一个匹配元素内部区域高度(包括padding,不包括border) 
$("#txt1").innerHeight()
outerWidth([margin]) 获取第一个匹配元素外部区域宽度(包括padding,border)
margin为true则包括margin,否则不包括		 
$("#txt1").outerWidth()
outerHeight([margin]) 获取第一个匹配元素外部区域高度(包括padding,border)
margin为true则包括margin,否则不包括		 
$("#txt1").outerHeight(true)

注意:

返回的高度、宽度均为数字,不带px

参照一张图,会更容易理解些.

image

2.位置相关

在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我们提供了位置相关的各个函数.

函数名 说明 例子
offset() 获取匹配元素在当前窗口的相对偏移
只对可见元素有效		 
$("#btn").offset().top
$("#btn").offset().left
position() 获取匹配元素相对父元素的偏移
只对可见元素有效		 
$("#btn").position().top
$("#btn").position().left
scrollTop() 获取匹配元素相对滚动条顶部的偏移
对可见元素和隐藏元素均有效		 
$("div").scrollTop()
scrollTop(val) 设置垂直滚动条顶部偏移为该值
对可见元素和隐藏元素均有效		 
$("div").scrollTop(200)
scrollLeft() 获取匹配元素相对滚动条左部的偏移
对可见元素和隐藏元素均有效		 
$("div").scrollLeft()
scrollLeft(val) 设置水平滚动条左侧的偏移
对可见元素和隐藏元素均有效		 
$("div").scrollLeft(200)

注意:

offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移

posted @ 2021-09-10 14:06  Einewhaw  阅读(1625)  评论(0)  编辑  收藏  举报