Javascript

最新推荐文章于 2024-11-08 14:35:14 发布

终极秃头怪

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量154

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44801321/article/details/119754234

版权

简介

Javascript是一门弱语言性脚本语言。

入门

书写方式：

直接在head中使用script标签书写

 <script>
        alert("Hello,World");
    </script>

新建一个Javascript文件，在html文件头部中中引用。

<script src="js.js"></script>

所有的变量都是使用var。
浏览器调试

方法一
alert（变量）
方法二在浏览器控制台打印变量
console.log()变量

数组定义：
var array=[1,2,4,6,8];
对象定义：
var person={
name:“huang”,
age:18,
id:1554546
}
(属性之间用逗号隔开，最后的属性不用加逗号)

建议使用严格检查模式

‘use strict’(严格检查模式，必须写在第一行)。
如果定义局部变量，建议使用let。

输出多行字符串

在``中拼接。
模板字符串

<script>
       'use strict'
        let name="huang";
       let age=18;
       let chat=`你好啊,${name}`;
       console.log(chat);
    </script>

字符串长度

str.length

获取指定元素第一次出现下标

str.indexOf('x')

截取字符串

str.substring(4,6)

（[),包头不包尾）

数组操作

数组长度

arr.length

指定元素下标

arr.indexOf(3)

获取指定部分数组

arr.slice(3)

pop() 弹出数组最后一个元素
push() 在数组最后压入元素（可以多个）
unshift() 压入头部
shift() 弹出头部元素
sort() 排序
reverse() 反转

数组拼接（不会改变原数组）

arr
(3) ["a", "b", "c"]
arr.concat(['c','b','a'])
(6) ["a", "b", "c", "c", "b", "a"]

连接符(将数组元素用指定字符连接)

arr
(3) ["a", "b", "c"]
arr.join('-')
"a-b-c"

对象

可以对对象类的属性进行增删。
使用in可以判断某属性是否在对象中

'toString' in boy
true

判断一个属性是否是这个对象自身拥有的

falseboy.hasOwnProperty('toString')
false

Set和Map

Map

map.delete(键值) 删除指定元素
map.set(键值，值) 修改或者添加元素

Set(不包含重复元素)

set.delete(值) 删除指定值
set.add(值) 添加元素
set.has() 是否包含某元素

函数

arguments是js免费赠送的关键词，表示传递进来的所有参数是一个数组.

function abs(x) {
            console.log("num=>"+x);
            for(let i=0;i<arguments.length;i++)
            {
                console.log(arguments[i]);
            }
       }

ES6新特性 reset（多余元素会存入数组）

 function abs(x,...rest) {
            console.log("num=>"+x);
           console.log(rest);
       }
 结果
abs(1,2)
 num=>1
 [2]

变量的作用域

由于我们定义的全局变量都是绑定在windows上面的，所以当我们在不同的文件下面定义同样的变量时会产生冲突。为了避免产生冲突，我们要将变量都放在自己定义的唯一空间下。

<script>
       'use strict'
       //唯一全局变量
       var huang={}
       //定义全局变量
       huang.name="huang";
       huang.age=18;
    </script>

定义方法

var huang={
           name:huang,
           birthday:2000,
           age:function () {
                let temp= new Date().getFullYear();
                return temp-this.birthday;
           }
       }

可以通过apply指定调用对象。

JSON

利用JSON可以将字符串和对象相互转换
JSON.parse() 将字符串转化为对象
JSON.stringify() 将对象转换为字符串

var huang={
           name:huang,
           birthday:2000,
           age:18
           }
       var json=JSON.parse(JSON.stringify(huang));

操作BOM对象

screen

screen.width
1536
screen.height
864

location
代表当前页面的URL信息。

host: "www.baidu.com" //主机
href: "https://www.baidu.com/"   //指向地址
protocol: "https:"  //协议
reload: ƒ reload()  //重新加载
location.assign() //设置新的地址

document
代表当前页面

获取具体的文档树节点

<dl id="dcm">
    <dt>Java</dt>
    <dd>Javascript</dd>
    <dd>HTML</dd>
</dl>

<script>
    'use strict'
    var hh=document.getElementById('dcm');
</script>

获取cookie

document.cookie

history

history.back() 后退
history.forward() 前进

操作DOM对象

文档对象模型

1. 获取DOM节点

<div id="div">
    <h1>标题</h1>
    <ul>
        <li class="li"> java</li>
    </ul>
</div>

<script>
    'use strict'
    var hh=document.getElementById('div');
    var hhh=document.getElementsByClassName('li');
    var h=document.getElementsByTagName('标题');
</script>

2. 更新节点

<div id="div">
</div>
<script>
    'use strict'
   var div=document.getElementById('div');
</script>

操作文本

修改节点值 div.innerText=‘123’
div.innerHTML=‘123’ 可以转义超文本语句

操作css

div.style.color='pink' div.style.fontSize='82px'

3. 删除节点

删除节点需要先找到他的父节点，然后才能进行删除。

<div id="father"> <h1 id="p3">标题</h1> <p id="p1"> p1</p> <pand id="p2">123</pand> </div> <script> 'use strict' var p3=document.getElementById('p3'); var father = p3.parentElement;//找到他的父节点 father.remove(p3); </script>

4. 插入节点

在和我们获取一个节点后，如果这个节点是空的，那么我们可以用innerHTML来插入元素，但是当这个节点不为空时，我们不能这么做，因为innerHTML会覆盖掉原来的节点。

追加

<body> <p id="js">js</p> <div id="father"> <h1 id="p3">标题</h1> <p id="p1"> p1</p> <pand id="p2">123</pand> </div> <script> 'use strict' var js = document.getElementById('js'); var father = document.getElementById('father'); father.appendChild(js); //追加 </script>

创建一个新的节点插入

var father = document.getElementById('father'); var newp = document.createElement('p'); //创建新节点 newp.id="p"; //节点id newp.innerText='huang'; //节点内容 father.appendChild(newp); //追加

将一个节点插到某节点前面

<script> 'use strict' var father = document.getElementById('father'); var newp = document.createElement('p'); var p1 = document.getElementById('p1'); newp.id="p"; newp.innerText='huang'; father.insertBefore(newp,p1);//前一个参数是要被插入的节点，后一个参数是要插入的节点（位置）。 </script>

获得和设置表单的值

form action="" > <p>账号: <input type="text" id="username"></p> <p> <span>性别:</span> 男 <input type="radio" value="man" name="sex" id="boy"> 女 <input type="radio" value="women" name="sex" id="girl"> </p> </form> <script> 'use strict' var user = document.getElementById('username');(user.value即可获得) var radio_one = document.getElementById('boy'); var radio_tow = document.getElementById('girl'); //单选框和多选框要通过checked判断是否被选中。 radio_one.checked true

jQuery

格式

$(选择器).事件() 事件括号内可以加函数 <body> <a href="" id="jQuery">点我有惊喜</a> <script> $('#jQuery').click(function () { alert('hhh'); }) </script>

事件

<body> mouse: <span id="mouseMove"></span> <div id="divMove"> 移动鼠标试试： </div> <script> //当界面加载完成，响应事件 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY) }) }); </script> </body>

css

<body> <ul id="myul"> <li class="java">Java</li> <li name="python">Python</li> </ul> <script> $('.java').css('color','pink'); </script> </body>

隐藏和显示

$('.java').show(); //显示 $('.java').hide(); //隐藏