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

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