码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript

时间:2020-07-08 01:33:54      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:数据类型   jquer   var   --   百度   ons   uname   屏幕尺寸   创建   

1.快速入门

引入方式:<script>标签必须成对出现!

  内部:<script>  <script>

  外部:<script src="xxx">  <script>

2.基本语法

数据类型:

var let

数:number,不区分小数和整数     NaN//not a number  Infinity//无穷大

字符串: ‘abc’  "abc"

布尔值 true,false

null 空 定义了没有值

Undefined 未定义

数组:[ ] 类型可以不一样 如果越界报Undifined

对象:{ }

Map和Set:

逻辑运算:

&& 与运算,两个 为真,结果为真

|| 或运算,一个为真,结果为真

!非 

比较运算符:

= 赋值

== 等于(类型不一样,值一样,结果为true)不推荐

===绝对等于(类型一样,值一样,结果true)

‘use strict‘  EC6严格检查模式,必须写在第一行,预防js的随意性产生的一些问题

3.函数

函数定义:

方式一,直接定义一个函数

  function 函数名(参数...){

      xxx...;

      return xxx;

  }

方式二,用一个变量表示函数

var 变量名=function(参数...){

      xxx...‘

      return xxx;

}

arguments可以获得传进来的所有参数,可以比实际的参数多

4.变量的作用域

  。。。

5.方法

方法就是把函数放在对象的里面,对象只有两个东西:属性和方法

方法一定带括号

this是无法指向的,是默认指向调用它的那个对象  但是js中apply可以控制指向的对象

6.内部对象

typeof 判断对象类型
Date 日期 new Date();

  .getFullYear() 年

  .getMonth() 月

  .getDate() 日

  .getTime() 时间戳

  ...

JSON 任何js支持的类型都可以用JSON来表示

格式:对象{},数组[],键值对key:value

  JSON.stringgi fy(js对象) 对象转换为json字符串

  JSON.parse(‘{key:value,...}‘) json字符串转对象

7.面向对象

ES6引入class关键字

8.BOM对象操作

BOM:浏览器对象模型

    window 代表浏览器窗口对象,可以得到浏览器窗口的一些信息,宽高等

    navigator:封装了浏览器的信息,一般不使用改对象,因为会被认为修改

    screen 代表屏幕尺寸

    location 代表当前页面的URL信息

        host

        href

        protocol

        reload刷新网页

        assign设置新网址

    document 代表当前的页面,获取具体的文档树节点,可以直接获取cookie信息

9.DOM操作对象

DOM:文档对象模型

  更新:遍历;删除;添加;

  • 获得DOM节点,原生代码,后续尽量都是用jquery
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">段落一</p>
    <p class="p">段落二</p>
</div>

<script>
    //对应CSS选择器
    let father = document.getElementById(‘father‘);
    document.getElementsByTagName(‘h1‘);
    document.getElementById(‘p1‘);
    let p = document.getElementsByClassName(‘p‘);

    let children = father.children;
    let firstChild = father.firstChild;
    let lastChild = father.lastChild;
</script>
</body>
  • 更新节点
let father = document.getElementById(‘father‘);
father.innerText="father";//修改文本的值
father.innerHTML=‘<strong>123</strong>‘//可以解析html标签

father.style.color=‘red‘;//颜色属性
father.style.fontSize=‘60px‘;//字体,-转驼峰命名
father.style.padding=‘10px‘;
  • 删除节点

删除节点的步骤:先找到父节点,通过父节点删除自己,删除节点children是时刻变化的

<body>
<div id="father">
    <h1>标题</h1>
    <p id="p1">段落</p>
    <p class="p2">段落二</p>
</div>

<script>

    //对应CSS选择器
    let father = document.getElementById(‘father‘);
    let h1 = document.getElementsByTagName(‘h1‘);
    let p1 = document.getElementById(‘p1‘);
    let p2 = document.getElementsByClassName(‘p2‘);
    
    //father.removeChild(h1);//参数不能接受标签选择器得到的对象
    father.removeChild(p1);
</script>
</body>
  • 插入节点

获得某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素,但是如果该节点本身存在元素,就不能这么做了,会产生覆盖!

追加

<body>
<p id="p">测试</p>
<div id="father">
    <h1>标题</h1>
    <p id="p1">段落</p>
    <p class="p2">段落二</p>
</div>

<script>

    //对应CSS选择器
    let father = document.getElementById(‘father‘);
    let p = document.getElementById(‘p‘);
    let h1 = document.getElementsByTagName(‘h1‘);
    let p1 = document.getElementById(‘p1‘);
    let p2 = document.getElementsByClassName(‘p2‘);
    father.appendChild(p);//已存在的节点
    let p3 = document.createElement(‘p‘);//创建一个 节点
    p3.id=‘p3‘;
    p3.innerText=‘p3‘;
    p3.setAttribute(‘class‘,‘newp‘);//万能的操作
    father.appendChild(p3);
</script>
</body>

10表单操作

 md5加密,使用隐藏域

<body>
<form action="#" method="post" onsubmit=myCheck()>
    <span>用户名</span><input type="text" id="uname" name="username"> <br>
    <span>密码</span><input type="password" id="input-pwd"> <br>
    <input type="hidden" id="md5-password" name="password"><!--隐藏起来进行加密-->
    <!--<input type="submit">-->
    <button type="submit">提交</button>
</form>
<script>
    function myCheck() {

        let username = document.getElementById(‘uname‘);
        let pwd = document.getElementById(‘input-pwd‘);
        let md5pwd = document.getElementById(‘md5-password‘);
        md5pwd.value=md5(pwd.value);//隐藏密码
    }
</script>
</body>

11.Jquery

公式:$(selectot).acton()

cdn jquery:百度即可得到找到在线的,可进去复制下来

  • jquery选择器

选择器就是CSS选择器

  $(‘标签‘) 标签选择器

  $(‘#id‘) id选择器

  $(‘.class‘) ;类选择器

  ...css中的选择器全部都能用

  • jquery事件

    技术图片

  • jquery操作DOM对象 

节点文本操作

.text();获得值

.text(‘设置值‘)

.html()

.html(‘设置值‘)

.attr("src") 获取src属性的值

.attr("key","value")或者.attr({"key1":"value","key2":"value2"})  设置属性

css样式操作

.css("key","value")或者.css({"key1":"value","key2":"value2"})  设置属性

,css("color") 获取属性的值

元素的显示和隐藏

.show()

.hide()

    jquery中有attr()和css()两种方法,attr()主要是针对元素的属性进行操作,如img的src属性和alt属性,a链接的href属性等等;css()修改的是样式里面的属性,即是style里面的属性

JavaScript

标签:数据类型   jquer   var   --   百度   ons   uname   屏幕尺寸   创建   

原文地址:https://www.cnblogs.com/baconZhang/p/13260832.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!