day 11/11 JQ复习和Vue学习

JQ复习

什么JQ 写更少的代码 做更多的事 javascript的类库

1.选择器

1.1基本选择器

• ID选择器 #ID名称
• 类选择器 .类名
• 元素选择器 元素名称 不需要任何前缀
• 通配符选择器 * 找出页面上所有元素
• 选择器分组 选择器1,选择器2

1.2层级选择器

• 后代选择器 选择器1 选择器2 找到1下的所有2 子孙
• 子元素选择器 选择器1>选择器2 找到1下的所以子节点 儿子
• 相邻兄弟选择器 选择器1+选择器2 找到紧挨自己选择器的弟弟标签
• 兄弟选择器 选择器1~选择器2 找出所有弟弟标签
• 找出所有同胞标签 $("#box").siblings()

1.3属性选择器

• 选择器[title]
• 选择器[title=‘demo’]
• 选择器[title=‘demo’] [style]

1.4过滤选择器 选择器:过滤器 $(“div:first”)

• :first 找到第一个元素
• :last 找到最后一个元素
• :even 偶数
• :odd 奇数
• gt(index) (greater than) 大于
• lt(index) less than 小于
• eq(index) equal 等于

1.5表单选择器

• :input 找到所有的输入项
• :password
• :text
• :radio

1.5.1表单对象属性的过滤器

:selected

:checked

2.常用函数

• prop() properties
  • 传入一个参数 表示获取值 prop(“src”,"…/img/…")
  • 传入两个参数 表示去设置值
• attr() 设置熟悉那个
  • 操作自定义属性 porp是用来操作元素的固有属性，用prop比较多
• css() 修改css样式
• addClass() 添加calss样式
• removeClass 移出
• blur 失去焦点
• focus 获取焦点
• click
• dbclick 双击
• change() 当选择框发生改变时
• append 给自己添加子元素
• appendTo 把自己添加给别人
• prepend 在自己的子节点前添加节点
• after
• before
• 数组遍历
  • jq对象.each(function(index, element))
  • $.each(数组对象, function(i, e))

3. JSON

JavaScript Object Notation,轻量级的数据交换格式。他其实时ECMAScript的一个子集。

json是完全独立与编程语言的文本格式。

• json的格式

  ‘{“username“：”“张三”}’

• json数组

• ‘[]’

VUE.js

3-5 学习VUE的基础知识 (语法和概念) 打包工具 Webpack, Glup

下周上项目

VUE到底是什么 view

• Vue最火的前端框架 React最流行的前端框架(React 除了开发网站之外 还可以开发app Vue也可以进行app 借助其他工具)
• Vue.js React.js Angular.js 作为前端的三大主流框架
• Vue就是构建用户界面(UI)的框架 ，只关注视图层(MVC),容易上手， 便于整合
• 前端主要工作 就是MVC中V , 和界面打交道 ，来制作前端页面

学习流行框架

• 企业讲究效率 流行框架可以提高开发效率

开发效率的发展历程

​ 原生js —1-----> jquery之类的类库 --------2------------> 前端模板引擎 --------3------- > 框架

• 1
  • 1.简化代码量
  • 2.jq帮助我们解决兼容性问题
• 2
  • 1.简化代码量
  • 2.更好的帮助我们去渲染数据
• 3
  • 1.能够较少很多DOM操作
  • 2.提高渲染效率
  • 3.双向数据绑定的概念
  • 核心目的 让程序员的关注点旨在数据的业务逻辑上 不需要关心DOM如何渲染的

类库和框架的区别

框架: 软件的半成品 是一套完整的解决方案 对项目侵入性较大

类库 提供某一部分功能 对项目侵入性较小

MVC 中V的分层概念MVVM