12.20Web前端第十四节课笔记

最新推荐文章于 2024-10-08 16:27:32 发布

menge2333

最新推荐文章于 2024-10-08 16:27:32 发布

阅读量46

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/menge2333/article/details/135149016

版权

笔记

构造函数【用于创建对象】

创建对象的三种方式：1.{} 2.new Object() newArrey new String()

3.用构造函数去创建

function Person(uname,age){
    this.uname=uname,
    this.age=age,
    this.sing=function(){
        console.log("sing~")
    }
}

this 指向下面创建的对象

创建对象（new 构造函数()）

let p1=new Person("zhangsan",21)
console.log(p1.age)

原型（对象）

原型（对象）：构造函数通过原型分配的函数是可以被实例化对象共享的

prototype:指向另外一个对象，因此称为原型对象

function Person(uname,age){
    this.uname=uname,
    this.age=age
}

console.dir(Person)
Person.prototype.sing=function(){
    console.log("sdssdf")
}
Person.prototype.dance=function(){
    console.log("dance~~")
}

重新赋值

加constructor指向构造函数

function Person(uname,age){
    this.uname=uname,
    this.age=age
}

console.dir(Person)
Person.prototype={
    consructor:Person,
    sing:function(){
        console.log("sing~~")
    },
    dance:function(){
        console.log("dance~")
    }
}

所有的对象都有原型对象

原型对象本身就是对象形成原型链

最顶层为object

继承

function Father(uname,age){
    this.uname=uname,
    this.age=age
}
Father.prototype.sing=function(){
    console.log("sing~")
}
function Son(){

}
Son.prototype=new Father()
let son1=new Son()
son1.sing()
console.dir(son1)

call方法

function Father(uname,age){
    this.uname=uname,
    this.age=age
}
Father.prototype.sing=function(){
    console.log("sing~")
}
function Son(uname,age){
    Father.call(this,uname)
}
let son1=new Son("zhangsan",22)
console.dir(son1)
console.log(son1.uname)

create方法

let obj={
    uname:"zhangsan",
    sing:function(){
        console.log("sing~")
    }
}
let son = Object.create(obj)
console.log(son.uname)

this的指向

全局作用域中this指向window

console.log(this)

函数调用中this指向window

function fn(){
    console.log("33")
    console.log(this)
}
fn()

对象中，this默认指向对象本身

let obj={
    a:12,
    fn:function(){
        console.log(this)
    }
}

this对于箭头函数而言指向父级作用域

let obj={
    a:12,
    fn:()=>{
        console.log(this)
    }
}
obj.fn()

构造函数中的this指向实例化对象

apply()

let obj2={
    uname:"lislislis"
}
function Person1(){
    console.log(this)
}
Person1.apply(obj2)

call()

let obj2={
    uname:"lislislis"
}
function Person1(){
    console.log(this)
}
Person1.call(obj2)

bind()

let obj2={
    uname:"lislislis"
}
function Person1(){
    console.log(this)
}
Person1.bind(obj2)()

jQuery库

$是jQuery的顶级对象 $是jQuery的别名

对元素进行封装，成为jQuery对象，调用jQuery的方法

入口函数:等待页面加载完毕后执行

    <script src="./jquery.js"></script>
</head>
<body>
    <button>点击</button>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                alert("666")
            })
        })
    </script>
</body>
</html>

    <script src="./jquery.js"></script>
</head>
<body>
    <div>
        <button>点击</button>
    </div>
    <script>
        $(function(){
            let div=document.querySelector("div")
            jQuery("button").click(function(){
                alert("666")
            })
        })
    </script>
</body>
</html>

jQuery对象装欢为dom对象

$("div")[0]// $("div").get(0)

    <script src="./jquery.js"></script>
</head>
<body>
    <div>
        <button>点击</button>
    </div>
    <script>
        $(function(){
            jQuery("button").click(function(){
                alert("666")
            })
           $("button")[0].style.backgroundColor="red"
        })
    </script>
</body>
</html>

将dom转换成jQuery

$(Dom对象)

    <script src="./jquery.js"></script>
</head>
<body>
    <div>
        <button>点击</button>
    </div>
    <script>
        $(function(){
            let box=document.querySelector("div")
            jQuery("button").click(function(){
                $(box).slideDown()
            })
        })
    </script>
</body>
</html>

选择器

$("选择器")

    <script src="./jquery.js"></script>
</head>
<body>
    <div class="box">1111</div>
    <script>
        $(".box").css("color","pink")
    </script>
</body>
</html>

存在隐式迭代：遍历内部的dom元素的过程

    <script src="./jquery.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        $("ul li").css("color","pink")
    </script>
</body>
</html>

jQuery筛选选择器

:first 第一个：last最后一个：eq(下标) odd(下标为奇数) even(下标为偶数)

    <script src="./jquery.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        $("ul li:first").css("color","pink")
        $("ul li:last").css("color","red")
        $("ul li:eq(3)").css("color","pink")
        $("ul li:odd").css("color","pink")
        $("ul li:even").css("color","red")
    </script>
</body>
</html>