xml地图|网站地图|网站标签 [设为首页] [加入收藏]

美高梅游戏网站

当前位置:美高梅游戏网站 > 美高梅游戏网站 > JavaScript及jQuery学习小结

JavaScript及jQuery学习小结

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-05 00:32

学习目的:
1.Web相关开发越来越流行,学习JS十分有必要

  最近几天学习了很多关于JavaScript和jQuery的文章,稍作梳理后,总结如下。

2.多学习一种语言,想多了解一种语言的文化内涵

  1、jQuery入门系列

3.认识一下脚本语言,之前一直学习C,C++,换换口味

  环境搭建

 

  只需引用一个jQuery库文件,即可完成jQuery的环境搭建。

学习途径:
1.之前实习期间的项目积累

  选择器

2.互联网的各种零碎的资料

  jQuery支持利用各种各样的选择器,来筛选、过滤出我们想要的元素,并且以jQuery包装集的形式返回。

3.codecademy的在线Js教学课程(冗长细致的课程,打字打到手抽筋)

  包装集

4.各种书本,如《headfirst Js》等

  所谓包装集,就是由jQuery函数筛选出的,支持jQuery提供的各种方法和属性的DOM元素。还包括如何动态构建一个DOM元素,并且添加到文档中。

 

  利用jQuery操作元素的属性与样式

零星的感受:(一直在补充)

  jQuery提供相应的方法获取、操作元素的属性与样式。

1.js中类的属性,可以使用.也可以使用["xx"]来标识

  事件

2.JS也有封装,在类的构造函数中使用 var来定义属性或者方法而不是this

  通过jQuery,通过各种方法(比如bind、one、tigger等)为DOM元素添加各种方法。

3.Js的函数定义之后没有分好,但是变量定义之后有分号。

  Ajax

4.函数和类中的this不能省略

  jQuery提供了多种方法(load、get、getjson、getscript、post、ajax)Ajax,比利用原生XMLHttpRequest对象方便很多,并且解决了不同浏览器的兼容性问题。

5.Js的实例化是通过 new 构造函数实现的。

  动画

function Person(name,age) {

  jQuery提供了多种方法,为DOM元素实现动态效果,如渐变、闪烁、平移等等。

[javascript]
 this.name = name; 
  this.age = age; 

// Let's make bob and susan again, using our constructor  
var bob = new Person("Bob Smith", 30); 

  工具函数

  this.name = name;
  this.age = age;
}
// Let's make bob and susan again, using our constructor
var bob = new Person("Bob Smith", 30);6.使用prototype使得每个实例都有这个属性,也实现了继承
[javascript]
// the original Animal class and sayName method  
function Animal(name, numLegs) { 
    this.name = name; 
    this.numLegs = numLegs; 

Animal.prototype.sayName = function() { 
    console.log("Hi my name is "+this.name); 
}; 
 
// define a Penguin class  
function Penguin(name, numLegs) { 
    this.name = name; 
    this.numLegs = 2; 

 
// set its prototype to be a new instance of Animal  
Penguin.prototype = new Animal(); 
 
var penguin = new Penguin("Gigi"); 
penguin.sayName(); 

  jQuery提供了多种工具函数,可供直接调用,比如操作字符串、检测浏览器属性的各种方法。

// the original Animal class and sayName method
function Animal(name, numLegs) {
    this.name = name;
    this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
    console.log("Hi my name is "+this.name);
};

  2、JavaScript零散却重要的知识

// define a Penguin class
function Penguin(name, numLegs) {
    this.name = name;
    this.numLegs = 2;
}

  全局对象/变量其实是window的属性。

// set its prototype to be a new instance of Animal
Penguin.prototype = new Animal();

  声明一个全局函数fn,其实是为window添加了一个fn属性,其值是一个匿名函数。因此 function fn(){} 等价于 window.fn = function(){};等价于 fn = function(){}.

var penguin = new Penguin("Gigi");
penguin.sayName();

  JavaScript中,this究竟是什么?如果在顶层调用,this就代表window,如果在对象中调用(函数也是对象),this就指向当前对象。

 

  静态方法和实例方法,先声明一个类 function staticClass(){};直接添加到类staticClass.fn()的方法为静态方法,可以直接调用;添加到类的prototype的方法staticClass.prototype.fn()为实例方法,需要先实例化var instance = new staticClass()才能调用。

 

  3、JavaScript prototype

1.Web相关开发越来越流行,学习JS十分有必要 2.多学习一种语言,想多了解一种语言的文化内涵 3.认识一下脚本语言,之前一直...

  首先介绍三对概念:私有变量、函数;静态变量、函数;实例变量、函数;具体区别可以查看源文章,值得提到的一点是,只有实例变量、函数可以在实例化对象以后进行访问。

  当创建了一个函数,改函数就会被创建一个prototype属性,这个prototype属性又具有一个constructor属性,这个属性是一个指向该函数的指针。

  下一个结论:对于一个函数A,只要是赋给prototype的属性和方法,都会被A的所有实例共享。看如下代码:

 

  function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //输出[1,2]

 

  因此在实际操作中,对象的方法(函数也是对象)一般赋给prototype成为实例函数,对象的属性(变量)一般直接声明,因为变量一般不需要共享。

  4、JavaScript创建对象

本文由美高梅游戏网站发布于美高梅游戏网站,转载请注明出处:JavaScript及jQuery学习小结

关键词: