第七节课-javascript的继承和jquery介绍

最新推荐文章于 2022-07-09 21:29:27 发布

原创最新推荐文章于 2022-07-09 21:29:27 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了JavaScript中的继承机制，特别是通过原型链实现继承的过程，并展示了如何在子类中调用父类构造函数。同时，文章还讲解了jQuery的基础用法，包括选择器、DOM操作等关键特性。

javascript的继承

如何继承某个构造函数的属性呢？通过原型来继承

 function Person(name){
       this.name= name;
 }
 Person.prototype.sayHello=function(){
   console.log("my name is "+this.name);
   }

 function Student (name,age,mark){
  this.age  = age;
  this.mark = mark;

  console.log(this.__proto__);
 //Object {constructor: function}
 //constructor:function Student(name,age,mark)
 //__proto__:Object

  this.__proto__ =  new Person(name);//父类构造函数赋值之后

  console.log(this.__proto__);
 //Person {name: "xiaoMing"}，现在子类的原型变成父类的构造函数，
 //子类没有自己的原型了，如果在子类构造函数外定义子类的其他方法就会报typeError错误。
 //例如 Student.prototype.study=function(){ console.log();} 会报错

 //下面这么写相当于在用父类构造函数来写子类想要实现的方法
  this.__proto__.study=function(){
  console.log("my name is "+this.name+",my age is " 
   +this.age+",my mark is "+this.mark);
   }
}
 
 //再定义其他函数只能这么定义
Person.prototype.sing=function (argument) {
 console.log("hello ");
}
 //如果是Student.prototype.sing=function 这样会报TypeError错误

 var stu1 = new Student("xiaoMing", 5,89.0);
 stu1.sayHello();
 stu1.study();
 stu1.sing(); //hello

jquery知识点介绍
为什么要用到jquery呢？
- jquery 不仅有对象定位的能力，而且拥有统一浏览器兼容的能力，比 Dom Api 更加好用和强大。
- 浏览器中堆空间中拥有大量的对象，可以认为是对象的海洋，那jquery可以简单的查询到适合需求的对象
- 在jquery中，window.οnlοad=function(){} 这种方法在浏览器中兼容不是特别好，用jquery会自动适用全部的浏览器
js 的主要工作
定位内存中的网页元素
执行操作（根据Dom Api）
传统的内存定位方法
getElementById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
了解用jquery获取页面元素div中的继承关系
div - HTMLDIVElement - HtmlElement - -----》 Node ----Object
用jquery获取了多个div元素，要对每个div进行操作，怎么做？
for（var i =0； i<div.length ; i++ ）
｛ if(i+1)%2 !=0 //这样是对奇数的求法｝
这么写会怎样呢？
for(var div in divs ) //这种不能进行每个div的操作，这种写法是属性遍历
理解Wrapped set 的概念
通过jquery方法获取页面元素构成的元素集合
jquery的几个小知识点简介
$("p").text("<b>hello world</b>") ; //没有显示粗体字体，都当作字符串输出
$("p").html("<b>hello world</b>") ; //有显示粗体字体
- jquery方法书写可以接着好多个
- jquery选择器学习
  $("a[href $=.jsp]") //结尾为.jsp 的
  $("a[href *=test]") //包含有test
位置选择器：伪类：：伪元素
$("p:even" ) //偶数，从0开始
$("p:odd" ) //奇数，从0开始
$("p:eq(3)" ) //偶数，从0开始
相对位置选择器相对与父亲
自定义选择器
$("p:input" )
$("div Form.myForm :checkbox ：checked" )
$("div Form.myForm :checkbox ：not（：checked）" )
对象转换的问题
如果是普通的html页面元素可以用js的DOm API
如果是jquery对象不能使用js的Dom 的API