jquery部分

remove()  删除元素

使用 jQuery 的 appendTo 方法移动元素

jQuery 有一个 clone() 方法，可以复制标签

jQuery 有一个 parent() 方法，可以访问被选取标签的父标签。

jQuery 有一个 children() 方法，可以访问被选取标签的子标签

jQuery 可以用 CSS 选择器（CSS Selectors）选取标签。 target:nth-child(n) CSS 选择器可以选取指定 class 或者元素类型的的第 n 个标签。

也可以用基于位置的奇 :odd 和偶 :even 选择器选取标签。

sass

用 Sass 变量存储数据
Sass 不同于 CSS 的一个特点是它允许使用变量。 可以在 Sass 中声明变量，并为它赋值，就像在 JavaScript 中一样。
在 JavaScript 中，变量是使用 let 和 const 关键字定义的。 在 Sass 中，变量以 $ 开头的，后跟变量名。
用 Mixins 创建可重用 CSS
在 Sass 中，mixin 是一组 CSS 声明，可以在整个样式表中重复使用。
对于所有具有 box-shadow 属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。 Mixins 就像 CSS 的函数。 以下是一个例子：

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}
定义以 @mixin 开头，后跟自定义名称。 参数（$x，$y，$blur，以及上例中的 $c ）是可选的。 现在在需要 box-shadow 规则的地方，只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 @include 指令调用。

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

使用 @for 创建一个 Sass 循环
可以在 Sass 中使用 @for 循环添加样式，它的用法和 JavaScript 中的 for 循环类似。
@for 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 to 结束”不包括结束数字，而“开始 through 结束”包括 结束号码。
这是一个开始 through 结束的示例：
<style type='text/scss'>
@for $i from 1 through 5 {
  .text-#{$i} { font-size: 15 * $i; }
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

使用 @each 遍历列表中的项目
上一个挑战显示了 @for 指令如何通过起始值和结束值循环一定次数。 Sass 还提供 @each 指令，该指令循环遍历列表或映射中的每个项目。 在每次迭代时，变量将从列表或映射分配给当前值。

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}
map 的语法略有不同。 这是一个示例：

$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}
使用 @while 循环创建样式
Sass 中的 @while 指令与 JavaScript 中的 while 类似。 只要满足条件，它就会一直创建 CSS 代码。
@for 挑战提供了一个创建简单网格系统的示例。 用 @while 也可以实现。
$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}
首先，定义变量 $x 并将其设置为 1。 接下来，使用 @while 指令，while $x 小于 13 时创建网格系统 。 在设置 width 的 CSS 规则后，$x 增加 1 以避免无限循环。

用 Partials 将样式分成小块
Sass 中的 Partials 是包含 CSS 代码段的单独的文件。 这些片段可以导入其它 Sass 文件使用。 可以把类似代码放到模块中，以保持代码结构规整且易于管理。
partials 的名称以下划线（_）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。 此外，Sass 文件以 .scss 文件扩展名结尾。 要将 partial 中的代码放入另一个 Sass 文件中，使用 @import 指令。
例如，如果所有 mixins 都保存在名为 “_mixins.scss” 的 partial 中，并且在 “main.scss” 文件中需要它们，下面是使用方法：
@import 'mixins'
请注意，import 语句中不需要下划线——Sass 知道它是 partial。 将 partial 导入文件后，可以使用所有变量、mixins 和其它代码。
将一组 CSS 样式扩展到另一个元素
Sass 有一个名为 extend 的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
例如，下面的 CSS 规则块设置了 .panel class 的样式。 它有 background-color，height 和 border。
.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
现在需要另一个名为 .big-panel 的面板。 它具有与 .panel 相同的基本属性，但还需要 width 和 font-size。 可以从 .panel 复制并粘贴初始 CSS 规则，但是当添加更多类型的面板时，代码会变得重复。 extend 指令是一种重用为一个元素编写的规则的简单方法，可以为另一个元素重用并添加更多规则：
.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}
除了新样式之外，.big-panel 将具有与 .panel 相同的属性。

React 是由 Facebook 创建和维护的开源视图库。 它是渲染现代 Web 应用程序用户界面（UI）的好工具。

创建一个简单的 JSX 元素
const JSX = <h1>Hello JSX!</h1>

const JSX = (<div>
<h1>kk</h1>
<p>学这个哟佣吗</p>
<ul>
<li>ddsds</li>
<li>ddsds</li>
<li>ddsds</li>
</ul>

要将注释放在 JSX 中，可以使用 {/* */} 语法来包裹注释文本。

渲染 HTML 元素为 DOM 树
const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// 修改这行下面的代码
ReactDOM.render(JSX,document.getElementById('challenge-node'));

在 JSX 中定义一个 HTML Class
现在已经习惯了编写 JSX，可能想知道它与 HTML 有什么不同。
到目前为止，HTML 和 JSX 似乎完全相同。
JSX 的一个关键区别是你不能再使用 class 这个单词来做为 HTML 的 class 名。 这是因为 class 是 JavaScript 中的关键字。 而 JSX 使用 className 来代替。
事实上，JSX 中所有 HTML 属性和事件引用的命名约定都变成了驼峰式。 例如，JSX 中的单击事件是 onClick，而不是 onclick。 同样，onchange 变成了onChange。 虽然这是一个微小的差异，但请你一定要记住。

 JSX 的自动闭合
 <br/> 这些要写成<br />

后面的具体看这个网站https://react.docschina.org/，不过也还好理解

将 class 组件渲染到 DOM 树
还记不记得在之前的挑战中使用 ReactDOM API 将 JSX 元素渲染到 DOM， 这与渲染 React 组件的过程十分相似。 过去的几个挑战主要针对组件和组合，因此渲染是在幕后完成的。 但是，如果不调用 ReactDOM API，编写的任何 React 代码都不会渲染到 DOM。
复习一下语法： ReactDOM.render(componentToRender, targetNode)。 第一个参数是要渲染的 React 组件。 第二个参数是要在其中渲染该组件的 DOM 节点。
传递到ReactDOM.render() 的React 组件与 JSX 元素略有不同。 对于 JSX 元素，传入的是要渲染的元素的名称。 但是，对于 React 组件，需要使用与渲染嵌套组件相同的语法，例如ReactDOM.render(<ComponentToRender />, targetNode)。 此语法用于 ES6 class 组件和函数组件都可以。
在后台引入了 Fruits 和 Vegetables 组件。 将两个组件渲染为 TypesOfFood 组件的子组件，然后将 TypesOfFood 渲染到 DOM 节点， 在这个挑战中，请渲染到 id='challenge-node'的 div 中。
class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        <Fruits />
        <Vegetables />
        {/* 修改这行上面的代码 */}
      </div>
    );
  }
};
 ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))

组件传值例子

const CurrentDate = (props) => {
  return (
    <div>
      <p>The current date is: {props.date}</p>
    </div>
  );
};

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        <CurrentDate  date={Date()}   />
      </div>
    );
  }
};

使用 this.props 访问 Props
前几项挑战涵盖了将 props 传递给子组件的基本方法。 但是，倘若接收 prop 的子组件不是无状态函数组件，而是一个 ES6 类组件又当如何呢？ ES6 类组件访问 props 的方法略有不同。
任何时候，如果要引用类组件本身，可以使用 this 关键字。 要访问类组件中的 props，需要在在访问它的代码前面添加 this。 例如，如果 ES6 类组件有一个名为 data 的 prop，可以在 JSX 中这样写：{this.props.data}。
在父组件 ResetPassword 中渲染 ReturnTempPassword 组件的一个实例。 在这里，为 ReturnTempPassword 提供一个 tempPassword prop，并赋值一个长度至少为 8 个字符的字符串。 在子组件 ReturnTempPassword 中，访问 strong 标签中的 tempPassword prop，以确保用户看到临时密码。
class ReturnTempPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
            <p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
        </div>
    );
  }
};

class ResetPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
          <h2>Reset Password</h2>
          <h3>We've generated a new temporary password for you.</h3>
          <h3>Please reset this password from your account settings ASAP.</h3>
<ReturnTempPassword tempPassword="1234567890"  />
        </div>
    );
  }
};

使用 defaultProps 来定义 Props 的默认值
Items.defaultProps = {
  quantity: 0
};
使用 PropTypes 来定义 Props 的类型
MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }   isRequired 表示必须

在代码编辑器中有一个 CampSite 组件，它把 Camper 组件渲染为自己的子组件。 定义 Camper 组件，并为其分配默认 props { name: 'CamperBot' }。 可以在 Camper 组件内部渲染任何你想要的代码，但是要确保有一个 p 元素，它只包含作为 prop 传递的 name 值。 最后，在 Camper 组件上定义 propTypes，要求提供 name 作为 prop，并验证它是 string 类型。
class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
const Camper = (props) => {
  return (
    <div>
      这里传来参数的名字是:<p>{props.name}</p>
    </div>
  );
};
Camper.defaultProps = {
  name: 'CamperBot'
};
Camper.propTypes = { name: PropTypes.string.isRequired } 
写个简单计数器

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    //绑定3个按键事件
     this.increment = this.increment.bind(this);
  this.decrement = this.decrement.bind(this);
  this.reset = this.reset.bind(this);
  }
 
increment() {
    this.setState(state => ({
      count: state.count+1
    }));
  }
decrement(){
  this.setState(state => ({
      count: state.count-1
    }));
  }
reset(){
  this.setState(state => ({
      count: 0
    }));
  }

  render() {
    return (
      <div>
        <button className='inc' onClick={this.increment}>Increment!</button>
        <button className='dec' onClick={this.decrement}>Decrement!</button>
        <button className='reset' onClick={this.reset}>Reset</button>
        <h1>Current Count: {this.state.count}</h1>
      </div>
    );
  }
};

传递回调作为 Props
可以将 state 作为 props 传递给子组件，但不仅限于传递数据。 也可以将函数或在 React 组件中定义的任何方法传递给子组件。 这就是子组件与父组件交互的方式。 可以把方法像普通 prop 一样传递给子组件， 它会被分配一个名字，可以在子组件中的 this.props 下访问该方法的名字。
例子：

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
      <GetInput  
      input={this.state.inputValue} 
      handleChange={this.handleChange}/>
      <RenderInput input={this.state.inputValue}/>
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};
React生命周期方法
当组件被挂载到 DOM 时，componentWillMount() 方法在 render() 方法之前被调用。
React 的最佳实践是在生命周期方法 componentDidMount() 中对服务器进行 API 调用或任何其它调用。 将组件装载到 DOM 后会调用此方法。 此处对 setState() 的任何调用都将触发组件的重新渲染。 在此方法中调用 API 并用 API 返回的数据设置 state 时，一旦收到数据，它将自动触发更新。
 componentDidMount() 方法也是添加特定功能所需的任何事件监听器的最佳位置。 React 提供了一个合成事件系统，它封装了浏览器中的事件系统。 这意味着，不管用户用的是什么浏览器，合成事件系统的行为都完全相同 -- 即使不同浏览器之间的本地事件的行为可能不同。

componentDidMount() 方法也是添加特定功能所需的任何事件监听器的最佳位置。
componentWillUnmount() 中移除相同的事件监听器。 在卸载和销毁 React 组件之前，最好在这个生命周期方法中对它们进行清理。移除事件监听器就是这样一个清理操作的例子。

使用 shouldComponentUpdate 优化重新渲染
到目前为止，如果任何组件接收到新的 state 或新的 props，它会重新渲染自己及其所有子组件。 这通常是好的。 但是 React 提供了一种生命周期方法，当子组件接收到新的 state 或 props 时，可以调用该方法，并特别声明组件是否应该更新。 这个方法就是 shouldComponentUpdate()，它将 nextProps 和 nextState 作为参数。
这种方法是优化性能的有效方法。 例如，默认行为是，当组件接收到新的 props 时，即使 props 没有改变，它也会重新渲染。 可以通过使用 shouldComponentUpdate() 比较 props 来防止这种情况发生。 该方法必须返回一个 boolean（布尔值），该值告诉 React 是否更新组件。 可以比较当前的 props（this.props）和下一个 props（nextProps），以确定你是否需要更新，并相应地返回 true 或 false。

内联渲染 用对象类型渲染，双括号。然后必须用驼峰法 如<div   style={{color:"red",fontSize:"72px"}} >Big Red</div>