JavaScript学习

最新推荐文章于 2023-08-17 15:37:16 发布

-Ausen

最新推荐文章于 2023-08-17 15:37:16 发布

阅读量478

点赞数

分类专栏： Java编程文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43971116/article/details/121716428

版权

Java编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习资源来自B站狂神说：狂神说

BOM

window对象

window代表浏览器窗口

Navigator类

封装了浏览器的信息（不建议使用）

大多数时候不会使用navigator对象，因为会被人为修改。

不建议使用这些属性来判断和编写代码。

screen对象

代表屏幕

location对象

location代表当前页面的url信息

document对象

代表当前页面 HTML DOM文档树

获取具体的文档树节点

获取cookie

document.cookie

服务端可以设置cookie：httpOnly

history对象

代表浏览器的浏览记录（不建议使用）

history.back()//后退

history.forward()//前进

DOM

DOM：文档对象模型

核心：

浏览器网页就是dom树形结构

更新：更新dom节点
遍历dom节点：得到dom节点
删除：删除一个dom节点
添加：添加一个dom节点

要操作一个dom节点，就必须要先获得一个dom节点

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

插入节点

我们获得了某个dom节点，如果这个节点是空的，我们通过innerHTML就可以添加一个元素，但是如果这个dom节点已经存在元素了，我们就不能这样干，因为会覆盖。

追加

appendChild()

创建一个新的标签

createElement(’’);//参数是节点tag

操作表单

表单是什么 form dom树

文本框
下拉框
单选框
多选框
隐藏域
密码框
…

表单的目的：提交信息

获得要提交的信息

jQuery

jQuery库，里面存在大量的javascrapt函数库

引入外部CDN，或者本地库

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

选择器

<script>
    document.getElementById("id")
    //选择器就是css的选择器
    $('#test-jQuery').click(function () {
        alert('hello,jQuery!');
    })
</script>

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName()
//id
document.getElementById()
//类
document.getElementsByClassName()

//jQuery   css中的选择器它全部都能用
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//类选择器

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divMove{
            width:500px;
            height: 500px;
            border: 1px solid #ff0000;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<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>
</html>

<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>
<script>
    //document.getElementById("test-ul")
    $("#test-ul li[name=python]").text();
    $("#test-ul").html();
</script>

元素的显示和隐藏：本质：display：none；

未来ajax();

小技巧：

巩固js - 看jQuery源码，看游戏源码
巩固HTML，CSS - 扒网站，全部down下来，然后对应修改看效果

-Ausen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

学习资源来自B站狂神说：狂神说BOMwindow对象window代表浏览器窗口Navigator类封装了浏览器的信息（不建议使用）大多数时候不会使用navigator对象，因为会被人为修改。不建议使用这些属性来判断和编写代码。screen对象代表屏幕location对象location代表当前页面的url信息document对象代表当前页面 HTML DOM文档树获取具体的文档树节点获取cookiedocument.cookie服务端可以设置cookie：httpOnly
复制链接

扫一扫