JavaScript学习Day23笔记

Day23笔记

一、普通构造函数继承

• 继承是一种关系，类与类之间的关系。
• 继承实现了数据共享。
• 节省内存空间。

// 声明一个父类
function Father(形参1,形参2) {
    this.属性1 = 形参1
    this.属性2 = 形参2
    this.方法1 = function(){ }
}
Father.prototype.方法2 = function() { }
// 声明一个子类
function Son(形参1,形参2,形参3) {
    // 构造函数继承不能继承父类prototype原型对象中的属性和方法
    Father.call(this,形参1,形参2)
    this.属性3 = 形参3
}
// 拷贝继承父类prototype原型对象中的属性和方法
for(let key in Father.prototype){
    Son.prototype[key] = Father.prototype[key]
}
// 原型继承父类prototype原型对象中的属性和方法
Son.prototype = new Father()
Son.prototype.方法3 = function() { }

二、class类继承

• ES6 的继承很容易，而且是固定语法。

// 声明一个父类
class Father{
    constructor(形参1,形参2){
        this.属性1 = 形参1
        this.属性2 = 形参2
    }
    方法1() { }
}
// 声明一个子类
class Son extends Father{
    constructor(形参1,形参2,形参3){
        super(形参1,形参2)
        this.属性3 = 形参3
    }
    方法2() { }
}

三、什么是jQuery框架

• jQuery是一个快速、小巧且功能丰富的JavaScript库。

• jQuery就是1个JS文件，对JS进行了简化。

• jQuery由美国人John Resig在2006年创建。

• 分为1.X、2.X、3.X三个大版本，提供的方法基本一致，只不过2.X 3.X不再兼容IE 6、7、8之类的低版本浏览器。

• 宗旨：Write less,do more.  写得少，做得多
  

四、jQuery的功能

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX异步请求

五、jQuery语法

$(selector).action()
// action动作为链式调用
$(selector).action().action()

六、jQuery基本选择器

• jQuery的选择器完全继承了CSS选择器的风格。

元素选择器

$('元素名')

id选择器

$('#id名')

class选择器

$('.类名')

群组选择器

$('选择器1,选择器2,……,选择器n')
// 群组选择器中，两个选择器之间必须用,（英文逗号）隔开。

*选择器

$('#list*')
// 表示选择id为list的元素下面的所有元素。

七、jQuery层次选择器

后代选择器

$('M N')
// 选择M元素内部后代所有的N元素

子代选择器

$('M>N')
// 选择M元素内部子代中所有的N元素

兄弟选择器

$('M~N')
// 选择M元素后所有的同级N元素
// 可以使用 $('M元素').nextAll() 代替

相邻选择器

$('M+N')
// 先择M元素相邻的下一个元素
// 可以使用 $('M元素').next() 代替

八、jQuey属性选择器

• selector => 选择器
• attr => 属性(attribute)
• value => 属性值

选择含有该属性的元素

$('selector[attr]')

选择含有该属性及属性值的元素

$('selector[attr=value]')

选择含有该属性但属性值不同的元素

$('selector[attr!=value]')

选择含有该属性且属性值含有给定内容的元素

$('selector[attr*=value]')

选择含有该属性且属性值以给定内容开头的元素

$('selector[attr^=value]')

选择含有该属性且属性值以给定内容结尾的元素

$('selector[attr$=value]')

复合属性选择器（同时满足）

$('selector[selector1][selector2]…[selectorN]')

九、jQuery伪类选择器

简单伪类选择器

伪类选择器	说明
:not(selector)	选择除了某个选择器之外的所有元素
:first/first()	选择某元素的第一个元素（非子元素）
:last/last()	选择某元素的最后一个元素（非子元素）
:odd	选择某元素的索引值为奇数的元素
:even	选择某元素的索引值为偶数的元素
:eq(index)	选择给定索引号的某元素
:lt(index)	选择所有小于给定索引号的元素
:gt(index)	选择所有大于给定索引号的元素
:header	选择h1~h6的标题元素
:animated	选择所有在执行动画效果的元素
:root	选择页面的根元素
:target	选择当前活动的目标元素（锚点）

子元素伪类选择器

伪类选择器	说明
:first-child	选择父元素中的第1个子元素
:last-child	选择父元素中的最后1个子元素
:nth-child(n)	选择父元素中第n个或奇偶元素，n => 整数|odd|even
:only-child	选择父元素中唯一的一个子元素
:first-of-type	选择同类型元素的第1个同级兄弟元素
:last-of-type	选择同类型元素的最后1个同级兄弟元素
:nth-of-type	选择同类型元素的第n个奇偶同级兄弟元素，n => 整数|odd|even
:only-of-type	选择父元素中特定类型的唯一子元素

表单伪类选择器

伪类选择器	说明
:input	选择所有input元素
:button	选择所有type="button"的input元素
:submit	选择所有type="submit"的input元素
:reset	选择所有type="rest"的input元素
:text	选择所有单行文本框
:textarea	选择所有多行文本框
:password	选择所有密码文本框
:radio	选择所有单选框
:checkbox	选择所有复选框
:image	选择所有图像域
:hidden	选择所有隐藏域
:file	选择所有文件域

表单属性伪类选择器

伪类选择器	说明
:checked	选择所有被选中的选择框radio/checkbox
:option:selected	选择所有被选中的option元素
:enabled	选择所有的可用元素
:disabled	选择所有的不可用元素
:read-only	选择所有只读元素
:focus	选择获得焦点的元素

十、jQuery查找方法

方法	说明
first()	获取当前元素的第一个子元素
last()	获取当前元素的最后一个子元素
parent()	获取当前元素的父元素
parents()	获取当前元素结构上所有的父元素
parents(选择器)	获取当前元素结构上符合选择器的父元素
children()	获取当前元素所有的子元素
children(选择器)	获取当前元素符合选择器的子元素
find()	获取当前元素后代中符合选择器的元素
prev()	获取当前元素的上一个元素
prevAll()	获取当前元素上面所有兄弟元素
prevUntil(选择器)	获取当前元素上面的兄弟元素，直到选择器元素为止（不包含选择器元素）
next()	获取当前元素的下一个元素
nextAll()	获取当前元素后面所有的兄弟元素
nextUntil(选择器)	获取当前元素后面的兄弟元素，知道选择器元素为止（不包含选择器元素）
siblings()	获取所有兄弟元素
eq(index)	查找元素集合中指定索引号的元素
index()	查找该元素在父元素中的索引号