js入门小结（2）

狐狸丘

已于 2022-03-14 00:23:55 修改

阅读量395

点赞数 2

文章标签： javascript

于 2021-12-26 21:35:11 首次发布

本文链接：https://blog.csdn.net/qq_53280201/article/details/122158672

版权

自定义函数

function ：（提升代码的复用率）

1、封装代码(逻辑性)、功能模块封装
参数：
类型：可选参数、必选参数
形参：封装函数过程中定义的参数
实参：调用的时候传递的参数
return 关键字;
2、事件的方法体
3、构造函数：构建类、产生对象

// Object()
// 定义一个对象:字面量方式
var obj = {}; //json 对象  json 数组
console.log(obj)
// 实例化 object 构造函数（function）
var obj2 = new Object();
console.log(obj2)  // 取出对象的里面的元素
  // . 调用符

递归：函数自身调用自身(死循环)

成员：属性、方法

属性: 描述外部特性

方法: 描述对象的行为

自定义一个函数方法：

playGame:function(){
        console.log(" i can play。。。")
    },

es6 写法：

 test(){
        console.log("zzzzz")
    }

举个例子：自定义一个person（人）的具体信息

 var person = {
             // 属性
             //属性名:值
             name:"tom",
             sex:"男",
             type:"man",
             age:22,

             // 方法
             // 属性(方法)名:function(){}
             doing:function(){
                 //此时this 当前对象 == person
                 // 数据逻辑
                console.log(this.name)
                console.log(this.sex)
                console.log(this.age)
                this.eat()
                this.sleep()
                console.log("i can play lol...")
             },
             eat:function(){
                console.log("i like eatting...")
             },
             sleep:function(){
                console.log("i like sleepping...")
             }

         }

    //调用
        console.log(person)
        console.log(person.sex)
        console.log(person.age)
        person.eat() 
        person.sleep()
        console.log("-----")
        person.doing()

给函数添加属性和方法，举个例子

var phone = {
    
        
  }

//添加属性
    phone.much =7888;
    phone.color = "black";

//添加方法
     phone.call = function(){
       // this == phone
       console.log(this)
       console.log(this.color)
       console.log(" i can call everybody...")
   }  
   
//也可以
 phone.testFn = ()=>{
       that=phone;
     // 没有this 指向  
    //console.log(this) // window
       console.log(that.color)
       console.log("i am es6 function....")
   }

{ } json对象（存储数据）:
[
{sid:"32434",name:"ftrette",age:"22",sex:"男"},
{...},
{...}
]

遍历:

for(k in object){
        object[k]
}

举个例子：

  var dataList ={
            id:"1",
            size:"ipone13",
            price:"￥7688",
            color:"white",
            rom:"64G"
        }

    //遍历var

      for(k in dataList){
            console.log(k)
            // console.log(dataList.k)
            console.log(dataList[k])
        }

还有另一种写法：


  var fn = ()=>{
           // ....
        }

例如：


        var fn1 =(a,b)=>a+b;
        var fn2 = a=>a*100;

        console.log(fn2(100))
    //同样可以输出

面向对象：是编程思路(将程序抽象成对象)

构造函数(类)：构建对象(面向对象)

js 构造函数的作用相当于类，js底层没有class概念

（功能上来讲，构造函数和自定义函数没有太大区别，所以人为约束构造函数统一大驼峰命名）

封装：插件类
swiper()

new swiper()

Object()

String()

Number()

Array()

构建构造函数：

 function String(){

          }

举个例子：

function Person(name,age,sex){
          // 属性
          this.name=name;
          this.age =age;
          this.sex=sex 

          // 方法：
          this.eat=function(){}
          this.sleep=function(){}
      } 

//调用并输出
var obj = new Person("张三","22","男")
       obj.doing=function(){
           console.log("外卖")
       }
      var obj2 = new Person("李四","22","女")
      obj2.doing = function(){
          console.log("带货")
      }
      console.log(obj)
      console.log(obj2)

new 关键字：
new String()
【实例化】对象：
new 做了什么事情?
1、生成一个空对象（var obj={}）
2、绑定构造函数、填充对应构造函数内置的属性方法
3、继承父类的属性、方法
4、执行构造函数，让对象具备实体属性与方法
var str="sfdsdf";(继承)

定时器

周期性定时器:没间隔多久执行一次
window.setInterval(function(){},时间)
window.setInterval('fn()',时间)
window.setInterval('fn()',1000)

一次性定时器:页面在加载完毕后的多久调用一次
window.setTimeout(function(){},时间);
window.setTimeout(fn,时间);
window.setInterval('fn()',1000)

定时器生成会返回一个定时器标识，用于清除定时器
var t1 = window.setInterval('fn()',1000)
var t2 = window.setTimeout('fn()',1000)
清除定时器:
clearInterval(id)
clearTimeout(id)

//如何让一次性定时器实现周期性定时器的功能：


    function hello(){
        console.log("333333")
        setTimeout("hello()",3000)
    //    // 递归
    //     hello();
        
    }
    hello();

正则表达式

正则表达式就是匹配规则

正则表达式的组成:
模式修正符:模式匹配
g：全局匹配模式
i: 忽略大小写
m: 多行匹配模式

元字符(字符簇): （匹配数据的类型）
\w 数字字母下划线
\W 非数字字母下划线
\d 任意数字 0-9
\D 任意非数字
\t 匹配水平制表符（tab键）
\n 匹配换行符
\s 空格
\S 非空格
. 匹配任意字符出换行与结束符
A-z
1-9
[\u4e00-\u9fa5] 中文

字符匹配模式:
[ ]：
[abcd] 匹配a b c d 中的某个字符例如： [qwer]就是匹配qwer 中的某个字符
[0-9] == \d 匹配数字（1个）
[a-z] 小写字母
[A-Z] 大写字母
[A-z] 大小写字母
( )：
1、整体
2、(x|y) (memeda|heheda|xxxx)
{}: 匹配次数
1、{m} 匹配指定的字符m次
2、{m,n} 匹配指定的字符m到n次

量词：
+ 1到多次
* 0到多次
？0-1次
^ 以某个[原子]开头
$ 以某个[原子]结尾

特殊符号:
| 或者
\ 转义 /\/\+/

例如：


var patt = /\w{10}/     // 10位及以上（数字、字母、下划线）
var patt = /\w{10}$/    //10位（数字、字母、下划线）结尾
var patt = /\w{0,10}/   // （数字、字母、下划线）最少0 最多10
var patt = /\w{5,}/     //（数字、字母、下划线） 5位起步
var patt = /^\w{10}$/   //匹配 （包含数字 字母 下划线）必须是10位

正则替换

var str ="applepie";

 var newStr = str.replace("e","xxxx");
 console.log(newStr)

因为g是全局匹配，可以匹配到所有的e，所以也可以实现替换：

var str ="applepie";
var newstr = str.replace(/e/igm,"xxx");
 console.log(newstr)

DOM操作

js：
DOM:document
BOM:window
DOM:document(文档) object model(模型)
作用：动态操作html文档的所有元素节点(写特效)
document对象：当前文档对象（html页面）

获取html元素节点的方法:
getElementById("id值") 以id属性获取元素 (一个)
getElementsByClassName("class值") 以class属性获取元素（批量）
getElementsByName("name值") 以name属性获取元素（批量）
getElementsTagByName("标签") 以标签名获取元素（批量）
querySelector("#xxx|.xxx|ul li") 以选择器来捕获元素 (一个)
querySelectorAll( ) 以选择器来捕获元素 (多个元素)

如：

console.log(document)
 // 代理 html全部的节点 不包含doctype

非主流的获取方法:
form:
document.name
body:
document.body
document.head

标签(元素节点)：
属性：
attributes：全部属性(数组)
元素内置属性（html属性）: id class align name border src href ....
Element.id
Element.className
width="300"
height="200"
...
存在自定义属性: data-xx
pNode.setAttribute("memeda","xxx")
pNode.getAttribute("data-xxx")

// js 捕获元素
 var pNode = document.getElementById("p1");

 // 操作属性： 获取属性 设置属性
 console.log(pNode) // 节点对象
 console.log(pNode.className)
 console.log(pNode.id)
 console.log(pNode.dataXxx)  // 自定义属性
 // 设置属性
 pNode.align = "center"
 pNode.className ="ApplePie"

  console.log(pNode.attributes)
  pNode.setAttribute("memeda","xxx")
  var attr= pNode.getAttribute("data-xxx")
  console.log(attr)

样式：style=" "
element.style.cssAttr ="值"
//获取元素的style
element.style.cssattr;

设置样式，举个例子：

<body>
    <div class="item">11111</div>
    <div class="item">33333</div>
    <p class="item">222222</p>
    <a href="#" class="item">44444</a>

   
</body>

<script>
    var elementList = document.getElementsByClassName("item")
    elementList[0].style.border ="1px solid red"
    elementList[1].style.border ="1px solid red"
    elementList[2].style.border ="1px solid red"
    elementList[3].style.border ="1px solid red"
</script>

内容: <span>dsfdsfds</span>
element.innerHTML
element.innerText
表单元素:
formElement.value
formElement.value="xxxx"

渲染:节点操作(元素的增删改查)
createElement("tagName") 创建元素节点
createTextNode("text...") 创建一个文本节点
appendChild(节点对象) 给元素追加子元素
children 获取父元素的子节点
parentElement 子元素的父节点
previousElementSibling 某个元素的上一个兄弟节点
nextElementSibling 某个元素的下一个兄弟节点
parent.removeChild(sonNode) 删除元素的子节点
element.remove() 删除指定元素
element.cloneNode(flase) 复制节点,flase 属性 true
father.hasChildNodes(node) 判断元素是否存在子节点
father.insertBefore(newNode,h2); 在某个元素之前查询元素