js基础

最新推荐文章于 2022-07-29 18:33:57 发布

feitian_love

最新推荐文章于 2022-07-29 18:33:57 发布

阅读量258

点赞数

分类专栏： python运维文章标签： javascript

本文链接：https://blog.csdn.net/feitainlovey/article/details/79111082

版权

python运维专栏收录该内容

19 篇文章 0 订阅

订阅专栏

alert

方式一

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>js1</title>
        <script src='js/js1.js'></script>
        <!--
        这个意思是当前文件夹文下的js文件夹下的js1.js文件
        -->
    </head>
    <body>
    </body>
</html>

#js1.js文件
alert('feitian');

这里写图片描述

方式二

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>js1</title>
    </head>
    <body>
        <div style='width:500px;height:300px;border:1px solid #ddd;margin:0 auto;'>
        </div>
        <script type='text/javascript'>
            alert('feitian')
        </script>
    </body>
</html>

变量和函数的声明和调用

//函数声明
name = 'feitian'
var name = 'feitian'
//加上var就局部变量

//定义函数
function Foo(name) {
    console.log(name);//打印日志
}
//调用函数
Foo('feitian')

函数中的默认参数

function Foo(name) {
    var arg2 = arguments[1]
    //函数执行的时候取第二个参数,从0开始,0就是name,1就是feitian2
    console.log(name);
    console.log(arg2);
    //打印日志
}
Foo('feitian','feitian2')

匿名函数

//就是将一个函数赋值给一个变量
var temp = function() { 
}

自执行函数

//自执行函数就是不用调用，自动执行函数的内容
(function(name){
    console.log(name);
})('feitian')
//这里name是形参，feitian是实参，行参是在第二个括号中直接传进去的

字符串相关的方法

name.trim（）
去除字符串两边的空格

feitian3
var name = '   feitian   '
name
"   feitian   "
name.trim()
"feitian"

name.charAt(index)
通过索引查找字符串中的字符，超过下标就是没有。

name='feitian'
"feitian"
name.charAt(0)
"f"

name.substring(start,end)

name='feitian'
name.substring(2,3)
"i"

name.length
打印字符串的长度
name.indexOf(‘i’)
通过字符查找第一个出现字符的位置

数组(js数组的索引可以不连续)

声明

var array = Array();　或者 var array = [];

添加

array. push(‘ele’);
将一个或多个新元素添加到数组结尾，并返回数组新长度
array.unshift(‘ele’);
将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
array.splice(index,0, ‘ele’);
将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回”“。中间的值为0，是只插入

var array=[1,2,3,4,5];
array.push('feitian');
console.log(array);
array.unshift('love');
console.log(array);
array.splice(1,0,'you');
console.log(array);
#结果
[1, 2, 3, 4, 5, "feitian"]
["love", 1, 2, 3, 4, 5, "feitian"]
["love", "you", 1, 2, 3, 4, 5, "feitian"]

删除

array.pop();
移除最后一个元素并返回该元素值
array.shift();
移除最前一个元素并返回该元素值，数组中元素自动前移
array.splice(deletePos,deleteCount);
删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

截取

array.slice(start, end);
以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

names = [1,2,3,4,5,6,7]
[1, 2, 3, 4, 5, 6, 7]
names.slice(1,5)
[2, 3, 4, 5]
names.slice(1)
[2, 3, 4, 5, 6, 7]

array.concat(arrat());
将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

name = [1,2,3,4]
[1, 2, 3, 4]
names = [4,5,6,7]
[4, 5, 6, 7]
name.concat(names)
"1,2,3,44,5,6,7"
name.concat([,1,2,3,4])
"1,2,3,4,1,2,3,4"
#这里合并大家一定要注意

字符串的翻转

names.reverse()

数组字符串化

names.join()

数组长度

names.length

字典

dic = {'name':'feitian','age':18}
Object {name: "feitian", age: 18}
dic = {'name':{'feitian':'loveyou'},'age':18}
Object {name: Object, age: 18}
//这个可以展开，通过console.log查看起来很方便

for 循环

第一种用法

打印的是key，如果要获取值，嵌套一下

var array = [1,2,3,4,5,6]
var dict = {'name':'feitian','age':18}
for(var item in array) {
    console.log(item)
}
for (var item in dict) {
    console.log(item)
}
#输出结果
0
1
2
3
4
5
feitian
18

第二种用法

//和c语言一样，这里就不在说了
for(var i=0;i<10;i++) {
}

标签的相关cs操作

创建标签

方式1

<body>
    <div id='t1'></div>
    <script type='text/javascript'>
        <!--
        创建一个标签
        -->
        var tag = document.createElement('a');
        tag.href = 'http://www.baidu.com';
        tag.innerText = '点我呀'

        <!--
        找到id为t1的标签，将他放入所找的id为t1的标签中
        -->     
        var id1=document.getElementById('t1');
        id1.appendChild(tag);
       </script>
</body>

方式2

<body>
    <div id='t1'></div>
     <script type='text/javascript'>
        var tag = "<a href='http://baidu.com;'>揍你</a>"
        var id1 = document.getElementById('t1');
        id1.innerHTML=tag;
    </script>
</body>

获取或者修改样式obj.className

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>js1</title>
    <style>
        .show {
        }
        .hide {
            display:none;   
        }
    </style>
</head>
<body>
    <div id='t1' class='show'>内容</div>
    <script type='text/javascript'>
    var id1 = document.getElementById('t1');    
    id1.className = 'hide';
    </script>
</body>
<!--
这里将id为t1的标签中的classname改为hide
-->

获取或者设置属性

获取obj.getAttribute()
修改obj.setAttribute()

<script type='text/javascript'>
var id1 = document.getElementById('t1');
console.log(id1.getAttribute('name'));
id1.setAttribute('name','loveyu');
console.log(id1.getAttribute('name'));
</script>

获取并修改样式

<body>
    <div id='t1' class='show' name='feitian'>内容</div>
    <div id='t2' style='width:500px;height:200px;border:2px solid #333'> </div>
    <script type='text/javascript'>
        var id2 = document.getElementById('t2');
        var width = id2.style.width;
        //得到id为id2的标签的width属性
        console.log(width); 
        console.log(parseInt(width))
        //将width转换成int类型的
        id2.style.width = '200px'
        //将width设置成200px
    </script>       
</body>

这里注意，在css中的background-colar在js中为style.background还有其他的比如font-size 和style.fontSize；margin-top和sytle.marginTop

提交表单

一个简单的提交，提交到搜狗的搜索。

<body>
    <form action='https://www.sogou.com/sie?hdq=AQxRG-0000&' method='GET'>
        <input type='text' name='query'/>
        <input type='submit' value='提交'>
    </form>     
</body>

通过事件使button实现真正的提交(事件有很多，这里不列出来了，大家可以百度一下，但是写法都是一样的)

<body>
    <form  id='F1' action='https://www.sogou.com/sie?hdq=AQxRG-0000&' method='GET'>
        <input type='text' name='query'/>
        <input type='button' value='伪提交' onclick='Foo();'/>
    </form>
    <script type='text/javascript'>
        function Foo() {
            document.getElementById('F1').submit()
        }
    </script>   
</body>
<!--
这里onclick就是事件，当你点击'伪提交的时候，他就会执行Foo函数'
-->

其他的一些函数

console.log()
alert()
setInterval(“alert()”,2000) clearInterval(obj)
setInterval 每两秒去服务端请求一次，看数据完成情况

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>js1</title>
    </head>
    <body>
        <div style='width:500px;background-color:#ddd;'>
            <div id='process' style='width:10%;background-color:green;height:10px;'><div>
        </div>
        <script type='text/javascript'>
            var proportion=10;
            function Foo() {
                var id = document.getElementById('process');
                proportion = proportion+10;
                if (proportion > 100) {
                    proportion = 100;
                }
                id.style.width = proportion+'%';
            }       
                setInterval('Foo()',2000);
                //设置两秒执行一次Foo函数         
    </script>
    </body>
</html>

setTimeout() clearTimeout()
setTimeout()到时间只执行一次，不管有没有循环，clearTimeout()就是取消setTimeout的动作

clearTimeout(interval)
//没到时间之前清除setTimeout的动作
interval = setTimeout('Foo()',2000);
//设置到两秒的时候执行一次Foo()函数

feitian_love

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js基础

alert方式一html> head> meta http-equiv="content-type" content="text/html; charset=utf-8"> title>js1title> script src='js/js1.js'>script> <!-- 这个意思是当前文
复制链接

扫一扫

专栏目录