JS及JQery

最新推荐文章于 2022-07-26 20:26:11 发布

郭立影

最新推荐文章于 2022-07-26 20:26:11 发布

阅读量93

点赞数

分类专栏：第二阶段

本文链接：https://blog.csdn.net/weixin_42540340/article/details/89444418

版权

第二阶段专栏收录该内容

20 篇文章 1 订阅

订阅专栏

01.JS

------001数组-----
数组的声明
var 数组名 = new Array(数组大小)
----#长度默认为0，可以扩容（默认10个），随数据扩容#------
数组定义及赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr0 = new Array();
        var arr1 = new Array(1);
        var arr2 = new Array("a","s","d");

        arr0[0] = "q";
        arr0[1] = "w";

        arr1[0] = "e";
        arr1[1] = "r";
        console.log(arr0);
        console.log(arr1);
        console.log(arr2);


    </script>
</head>
<body>

</body>
</html>

数组的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr2 = new Array("a","s","d");
        var i;
        for(i = 0; i < 3; i++){
            document.write(arr2[i]);
        }

    </script>
</head>
<body>

</body>
</html>

join — 将数组中的元素组合成字符串
reverse – 颠倒数组元素的顺序，使第一个元素成为最后一个，而
最后一个元素成为第一个
sort — 对数组元素进行排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组属性方法的使用</title>
    <script language = "javascript">
        var player = new Array(3);
        player[0] = "Ryan Dias";
        player[1] = "David Greene";
        player[2] = "Graham Browne";
        document.write("数组的长度是：<hr>");
        document.write("player.length = " +player.length + "<br><br>");

        player.reverse();
        document.write("颠倒元素顺序：<hr>");
        document.write(player[0] + "<br>");
        document.write(player[1] + "<br>");
        document.write(player[2] + "<br><br>");

        player.sort();
        document.write("排序结果是：<hr>");
        document.write(player[0] + "<br>");
        document.write(player[1] + "<br>");
        document.write(player[2] + "<br>");

        document.write("连接各元素：<hr>");
        document.write(player.join("-") + "<br><br>");
    </script>
</head>
<body>

</body>
</html>

-----------002字符串------------
JS字符串对象
属性—length
方法:indexOf() 检索字符串
split() 将字符串分割为字符串数组
substring()提取字符串中两个指定的索引号之间字符
toLowerCase() 把字符串转为小写
toUpperCase() 把字符串转为大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组属性方法的使用</title>
    <script>
        var s = "q-d-f-w-e-d-f-y";
        //document.write(s);
        /*

        */
        /**
         *
         */
        /*document.write(s.length);
        document.write(s.indexOf("df"));
        document.write(typeof(s.split(""-"")));*/
        /*var arr = s.split("-");
        for(var i = 0; i < arr.length; i++){
            document.write(arr[i]+"   ")
        }*/
        document.write(s.substring(2,5));
        document.write(s.toUpperCase());
    </script>
</head>
<body>

</body>
</html>

003Math对象
Math 对象方法
abs(x) 返回x的绝对值
sin(x) 返回x的正弦，返回值以弧度为单位
cos(x) 返回x的余弦，返回值以弧度为单位
tan(x) 返回x的正切，返回值以弧度为单位
min(x,y) 返回x和y中的较小数
max(x,y) 返回x和y中的较大数
random() 返回0或1
round(x) 四舍五入
sqrt(x) 返回x的平方根

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组属性方法的使用</title>
    <script>
        document.write(Math.abs(-12));

    </script>
</head>
<body>

</body>
</html>

004Date对象方法
Date 对象的方法
Date()返回当日的日期和时间
getDate()从Date对象返回一个月中某一天（1~31）
getDay()从Date对象返回一周中某一天（0~6）
getMonth()从Date对象返回月份（0~11）
getFullYear()从Date对象以四位数返回年份
getYear()从Date对象以两位或四位数字返回年份
getHours()返回Date对象的小时（0~23）
getMinutes()返回Date对象的分钟（0~59）
getSeconds()返回Date对象的秒数（0~59）
getMilliseconds()返回Date对象的毫秒（0~999）
getTime() 返回1970年1月1日至今的毫秒数

005JS函数声明
**JS函数声明
function 函数名([参数1],[参数2]…){
函数体
[return] //返回值
}
**
006JS 内置顶层函数
JS 内置顶层函数
Number()
BOM–操作浏览器
DOM–操作HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>asd</title>

</head>
<body>
<p class = "q" name = "s" id = "p1">南邮苏大强</p>
<p class = "q" name = "s" id = "p2">北邮谢广坤</p>
<script>
    /*var p = document.getElementById("p1");
    document.write(p.innerHTML)
    p.innerText = "苏大强会玩";*/
    //document.write(window.location.href)
    window.location.href = "https://www.baidu.com"
</script>
</body>
</html>

007JS事件
JS事件
onclick—单击
ondbclick–双击
onmousedown–按下不抬
onmouseup–抬起
onmousemove–移动
onmouseover–滑上去
onmouseout–离开
-----------jquery--------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>asd</title>
    <script src = "jquery-1.11.3.js"></script>
    <script>
        function asd(){
            $('p').hide(2000);
        }
        function asd1(){
            $('p').show(2000);
        }
        function asd2(){
            $('p').css("color","green")
        }
        function asd3(){
            $('p').css("color","black")
        }
        function asd4(c){
            if(!c){
                $('p').show(2000);
            }else{
                $('p').hide(2000);
            }
        }
    </script>
</head>
<body>
<p onmouseover = "asd2()" onmouseout = "asd3">苏大强</p>
<button onclick = "asd()">消失</button>
<button onclick = "asd1()">出来</button>
显示/消失<input type="checkbox" value = "消失/显示" onchange = "asd4(checked)">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>asd</title>
    <script src = "jquery-1.11.3.js"></script>
    <script>
       
    </script>
</head>
<body>
<p class = "mypc" id = "mypi">苏大强</p>
<script>
    $('p').html("苏大爷");
    $('.mypc').html("啥啥啥");
    $('#mypi').html("是的呢");
    $('p').css("background-color","#ff0000")
    $('p').css("color","green")
    $('p').attr("class","dddd")
</script>
</body>
</html>

-----------flask---------------------------------------------------

郭立影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS及JQery

01.JS------001数组-----数组的声明var 数组名 = new Array(数组大小)----#长度默认为0，可以扩容（默认10个），随数据扩容#------数组定义及赋值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
复制链接

扫一扫

专栏目录