JS重点部分

简介: JS重点部分

操作BOM对象

BOM:浏览器对象模型

window:代表浏览器窗口(里面的方法是求出浏览器窗口的长宽高信息)

Navigator:封装了浏览器的信息

screen:代表屏幕的尺寸

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

***location.assign(‘域名’) 这个方法使所有想要进去原网站的用户进入你已经设置的网站中

document:代表当前的页面,HTML DOM文档树

<d1 id="app">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</d1>
<script>
    var di =  document.getElementById('app');   //可以动态的增加和删除节点
</script>


获取cookie document.cookie 服务器端可以设置:cookie:httpOnly

history


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


操作DOM对象

文档对象类型:浏览器王爷就是一个DOM树形结构

更新:更新DOM节点

遍历DOM节点:得到DOM节点

删除:删除一个DOM节点

添加:添加一个新的dom节点

要操作一个DOM节点就得先获得一个DOM节点,只要定位到某一结点就可以找到他周围的节点(上一个下一个节点)

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    var childrens = father.children;   //获取父节点下的所有子集
</script>


更新节点

<div id="lll">
</div>
<script>
    var lll = document.getElementById('lll');
    lll.innerText = '666';    //吧空白的div标签添加上666   操作文本
    lll.innerHTML = '<strong>123</strong>>';  //可以操作HTML语言
    lll.style.color='red';  //还能更新颜色
    lll.style.fontStyle = '200px';  //还能传递大小
</script>


删除节点

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

<div id="fu">
<h1 id="h1">h1</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    var fu = document.getElementById('fu');
    var h1 = document.getElementById('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    fu.removeChild('p2');   //这个步骤是删除p2节点
    var p1 = document.getElementById('p1');
    var fu = p1.parentElement;  //这是间接的通过p1来找她的父类
    fu.removeChild(p1)
</script>


创建和插入DOM节点

我们获得了某个DOM节点,假设这个节点是空的可以通过innerHTML来增加一个元素了,但是DOM节点已经存在元素了,就会产生覆盖

追加

<p id="js">javaScript</p>
<div id="list">           //把js放到div里
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>     
    var js = document.getElementById('js');//先获取js
    var list = document.getElementById('list');//在获取list
    list.appendChild(js)   //这样追加 
</script>


创建新的节点:

var newP = document.createElement('p');   //创建一个p标签
newP.id = 'newP';          //定义它的id
newP.innerText = 'dsds';    //给他赋值
list.appendChild(newP);    //放到list里面


标签节点

var myscript =  document.createElement('script');
myscript.setAttribute('type','text/javascript')
var myStyle = document.createElement('style'); //创建了一个空style标签
myStyle.setAttribute('type','text/css');       
myStyle.innerHTML = 'boby{background-color:chartreuse;}';//设置标签的内容
document.getElementsByTagName('head')[0].appendChild(myStyle);


插入到前面

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);  //要插入的节点.insertBefore(前节点,后节点);


操作表单(验证)

表单是: form DOM树

文本框 text

下拉框

单选框 radio

多选框 checkbox

隐藏域 hidden

密码框 password

表单目的:提交信息

<form action="post">
    <p><span>用户名:</span> <input type="text" id="username"></p>
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');  //文本框的DOM对象,用于操作文本框
    var boy_radio = document.getElementById('boy');      //单选框的DOM对象,操作单选框
    var girl_radio = document.getElementById('girl');
    input_text.value  //得到单选框的值
    boy_radio.checked; //查看返回结果看看有没有被选中,是否为true。
</script>


提交表单

<!--表单绑定提交时间
onsubmit :绑定一个提交测试的函数, true  false   将这个测试结果返回给表单,使用onsubmit接收
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名:</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <spqn>密码:</spqn><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件onclick,被点击的时候会发生什么-->
    <button type="submit" onclick="aaa()">提交</button>
</form>
<script>
    function aaa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容,true是通过  
        return true;
    }
</script>


相关文章
|
5月前
|
Web App开发 JavaScript 前端开发
技术好文共享:非常好的一个JS代码(CJL.0.1.js)
技术好文共享:非常好的一个JS代码(CJL.0.1.js)
20 0
|
6月前
|
JavaScript
js一些基础
js一些基础
27 1
|
存储 JavaScript 前端开发
JS——基础(一)
JS——基础(一)
|
JavaScript
一道JS题,让我更深刻的理解了JS的执行机制
闲逛摸鱼发现一道有趣的题,题目如下,本来是不想拿出来单独写一篇文章的,因为太短了,但是我需要存在感,沸点没人看,所以还是写一篇文章吧;
73 0
一道JS题,让我更深刻的理解了JS的执行机制
|
前端开发 JavaScript API
一篇文章掌握Next.js的核心要点
一篇文章掌握Next.js的核心要点
1512 0
一篇文章掌握Next.js的核心要点
|
存储 JavaScript 前端开发
js基础学习
JavaScript 是一门跨平台、面向对象的脚本语言,它能使网页可交互(例如拥有复杂的动画,可点击的按钮,通俗的菜单等)。另外还有高级的服务端 Javascript 版本,例如 Node.js,它可以让你在网页上添加更多功能,不仅仅是下载文件(例如在多台电脑之间的协同合作)。在宿主环境(例如 web 浏览器)中,JavaScript 能够通过其所连接的环境提供的编程接口进行控制。
|
移动开发 前端开发 JavaScript
趣味 js —— 通过趣味案例走进 js 的世界
getElementById只能获取一个元素。 2.getElementsByTagName根据标签获取多个元素,并返回一个伪数组。及时获取的元素只有一个,也是以数组的形式储存。 3.style只能设置某一个元素的属性,但是getElementsByTagName返回的是一个数组,所以必须遍历这个数组才可以使用。(可以使用for循环遍历数组。)4.通过JavaScript操作的css属性,与css不相同
102 0
趣味 js —— 通过趣味案例走进 js 的世界
|
存储 JSON JavaScript
JS基础-方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
113 0
|
JavaScript 前端开发
JS基础(3)
JS基础(3)
82 0
|
JavaScript
JS基础(4)
JS基础(4)
108 0