Javascript

JavaScript

（1）JavaScript

  > 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

（2）作用
  > Ø网页特效 (监听用户的一些行为让网页作出对应的反馈)
  > Ø表单验证 (针对表单数据的合法性进行判断)
  > Ø数据交互 (获取后台的数据, 渲染到前端)
  > Ø服务端编程 (node.js) 

 (3)JavaScript组成
  > ECMA: 定制了JavaScript基本语法结构
         数据类型、变量、运算符、条件结构、循环结构、数组...
  > DOM : 文档对象模型
          javaScript也是面向对象语言，万事万物皆对象。
  > BOM : 浏览器对象模型

 4)javaSritp使用
    >外部式，引入.js文件，推荐写在</body>标签和</html>

 <script type="text/javascript" src="js/hello.js"></script>

 >行内式

  <button οnclick="javascript:alert('Hello')">点击</button>  

 特点：
      *javaScript是一门弱类型的语言。
      *javascript语法没有像java语言严格语法规范。
     

对象:

对象的创建:	1.对象申明    *[var|let] 对象名称 = {};    例如：    let student = {             name: "张三",             age: 18,             sex: '男',             study: function() {                 console.log("学生学习的行为...");             }    };    注意：js对象使用某些或者给某些对象不存在的属性赋值时，则会自动创建在内存中。    对象属性赋值和调用：    对象.属性(对象['属性'])    对象.函数(参数)    删除属性或函数    delete 对象.属性
	2)通过object创建对象    var obj = new Object();    obj.name = "李四";    obj.age = 22;    obj.teach = function() {     console.log("教书育人")    }
	3)通过函数创建对象    function Student(name, age, sex) {     this.name = name;     this.age = age;     this.sex = sex;     this.showMe = function() {         console.log("姓名：" + this.name + ",年龄:" + this.age)             }    }    let stu = new Student("王五", 22, '男');

  4)ES6: ES6引入类的改变。
   *定义类
   Class 类名{
        constructor(参数){
       参数赋值
    }
    函数列表
   }
   例如：
   class Teacher {
            /* 构造函数 */
            constructor(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            /* 函数 */
            showMe() {
                console.log("姓名：" + this.name + ",年龄:" + this.age)
            }
            teach() {
                console.log("教书育人")
            }
   }
 

 JQuery选择器:

*JQuery选择器
     JQuery语法：$(selector).action()
     1.基础选择器
     $("*"):通配选择器
     $("#id")：ID选择器
     $(".class"):class选择器
     $(".element"):element选择器
     $("a,b,c.."):群组选择器
     $(".a.b"):并集选择器
     $("[href]") 所有带有 href 属性的元素 
     $("[href='#']") 所有 href 属性的值等于 "#" 的元素 
     $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素 
     $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
     $("[href^='.jpg']") 所有 href 属性的值包含以 ".jpg" 开头的元素
     $("[href*='.jpg']") 所有 href 属性的值包含以 ".jpg" 包含的元素
     $("E F"): 所有E的后代F的元素
     $("E>F"): 所有E的子元素F的元素
     $("E+F"): 所有E的相邻兄弟F的元素
     $("E~F"): 所有E的兄弟F的元素
     $("E:first-child"): 所有第一个子元素E
     $("E:first-of-type"): 所有第一个类型元素E
     $("E:eq(index)"): 所有第一个类型元素E

 常用事件:

*事件函数
  click()：点击事件
  dblclick()：双击事件
  change()：域内容被改变
  focus()：聚焦事件
  blur()：失去焦点事件
  mouseover()：鼠标移至元素上事件
  mouseout()：鼠标从元移开素事件
  keydown()：键盘按下

*复合事件
  1.bind() [on()]向匹配元素附加一个或更多事件处理器.
  unbind() [off()]从匹配元素移除一个被添加的事件处理器 
  $(selector).bind({event:function, event:function, ...})
  
  2.delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 
  undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来 
  $(selector).delegate(childSelector,event,data,function)
  

  3.live() 为当前或未来的匹配元素添加一个或多个事件处理器 
  die() 移除所有通过 live() 函数添加的事件处理程序。 
  $(selector).live(event,data,function)

  4.toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行 
  $(selector).toggle(function1(),function2(),functionN(),...)
  默认:该方法也可用于切换被选元素的 hide() 与 show() 方法。