JavaScript面向对象编程，操作bom，dom，表单，jquery入门

最新推荐文章于 2021-12-22 16:55:40 发布

L Y C

最新推荐文章于 2021-12-22 16:55:40 发布

阅读量142

点赞数 1

分类专栏：前端 java学习文章标签： js java

本文链接：https://blog.csdn.net/weixin_43869261/article/details/108206693

版权

java学习同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

面向对象编程

原型：

在JavaScript中，每个对象都有一个proto属性，这个属性指向该对象的原型。

原型对象可以理解为父类

Class创建对象

 //原生给JS对象增加方法
function Student(name){
    this.name= name;
}
Student.prototype.hello = function (){
    alert('hello');
}

//使用class创建对象
 class Student1{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello')
    }
 }

继承

class Pupil extends Student{
   constructor(name,grade) {
       super(name);
       this.grade = grade;
   }
}

原型链

简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。——摘自《javascript高级程序设计》

操作BOM对象

BOM:浏览器对象模型

window对象

代表浏览器的窗口

window.innerHeight;//浏览器窗口的高
window.innerWidth;//宽
window.outerHeight;//外高
window.outerHeight;//外酷安

Navigator

Navigator 封装了浏览器的信息，信息可以被人为修改，开发不建议使用

window.navigator.appName;
navigator.appVersion;//客户端信息
navigator.userAgent;//内核
navigator.platform;//32位还是64位

Screen

screen.width;
screen.height;

locaiton

//location代表当前的页面的url信息
location.href;
location.reload();//刷新网页
//设置新的地址
location.assign('www.baidu.com');//重定向

Document

<dl id="app">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</dl>

<script>
    //获取具体的文档树节点
    var dl =document.getElementById('app');
     //获取cookie
    document.cookie;
    /*劫持cookie原理
    前端获取cookie上传到他的服务器
    * */
</script>

History

代表浏览器的历史记录

history.back();//返回
history.forward();//前进

操作DOM对象

文档对象模型

核心

浏览器网页是一个Dom树形结构

更新Dom节点
遍历Dom节点：得到Dom节点
删除Dom节点
添加新节点

获得Dom节点

<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>


<script>
    var name=document.getElementById('p1');
    document.getElementsByTagName('h1');
    document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    
    var childrens = father.childen; //获取父节点下的所有子节点
</script>

更新Dom节点

<div id="1">
</div>
<script>
    //操作文本
    var id1=document.getElementById('1');
    //插入数据
    id1.innerText='534';
    id1.innerHTML='<strong>ceshi</strong>>';
    
    //操作css
    id1.style.color='yellow'; 
    id1.style.fontSize='20px';
    id1.style.padding= '2em'
</script>

删除Dom节点

先获取父节点，再通过父节点删除自己

<div id="1">
    <p id ="2">2323</p>
</div>
<script>
    var self = document.getElementById("2");
    var fathter=self.parentElement;
    fathter.removeChild(self);
</script>

插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.append(js);//追加
    
     //通过js创建一个新的节点
    var np=document.createElement('p');
    np.id='123';
    np.innerText='23323';
    list.append(np);
     //创建标签节点
    let myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    myScript.setAttribute('src','www.naodi.com');
</script>

操作表单

<form action="text" method="post">
    <span>用户名：</span><input type="text" id="username">
</form>

<script>
    //得到输入框的值
    var username = document.getElementById('username');
    username.value
    //查看选择框是否被选中
    username.checked
</script>

提交表单

使用md5加密

    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="ti.html" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">
    <button type="submit" onclick="check()"></button>
</form>
<script>
    function check(){
        var username = document.getElementById('username');
        var password = document.getElementById('input-password');
        var md5password = document.getElementById('md5-password');

        md5password.value = md5(password.value);
        return true;
    }
</script>

jQuery

js方法工具类

获取jQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

jQuery公式

<!--
jQuery
公式：$(selector).action()  选择器加行为
-->
<a href="" id="test-jquery">点我</a>

<script>
    $('#test-jquery').click(function(){
        alert('1');
    })
</script>

jQuery选择器

$('p').click();//标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //class选择器

其余选择器可参考：http://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件

操作Dom

<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>


<script>
    $('#test-ul li[name=python]').text();
</script>

ick(); //id选择器
$(’.class1’).click(); //class选择器


其余选择器可参考：http://jquery.cuishifeng.cn/

## 事件

鼠标事件，键盘事件

## 操作Dom

```html
<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>


<script>
    $('#test-ul li[name=python]').text();
</script>

L Y C

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript面向对象编程，操作bom，dom，表单，jquery入门

面向对象编程原型：在JavaScript中，每个对象都有一个proto属性，这个属性指向该对象的原型。原型对象可以理解为父类Class创建对象 //原生给JS对象增加方法function Student(name){ this.name= name;}Student.prototype.hello = function (){ alert('hello');}//使用class创建对象 class Student1{ constructor(name) {
复制链接

扫一扫