jquery_基本语法

// jquery对象
  // $ == jQuery == new jQuery
  
  // jquery 选择器

  // jQuery事件
  // $(selector).event([data], fn)
  //   selector: 选择器
  //   event: 事件对象，鼠标事件，键盘事件
  //     键盘事件 fromCharCode方法，将Unicode编码转换成字符
  //   data：传入参数提供给callback使用，callback使用event.data获取参数
  //   fn: 在每一个匹配元素的事件中绑定处理的函数，接收一个参数，为event对象

  // jQuery 属性方法
  // .text([val]):  设置或获取当前元素的文本内容
  // .html([val])： 设置或获取当前元素的html内容
  // .val([val]):   设置或获取当前表单元素的内容
  // .attr(attr [,val]):  设置或获取当前元素的标签特性,
  // 
  // jQuery创建DOM节点
  //   $('<p>')
  //   $('<p></p>')
  //   
  // jQuery 文档处理
  // 
  // elem.append(content): 向每个匹配的元素内部末尾追加内容。
  // elem.appendTo(content): 与 content.append(elem)相同
  // elem.prepend(content): 要插入到目标元素内部前端的内容
  // elem.prependTo(content): 与 content.prepend(elem)相同
  // 
  // elem.after(content): 在每个匹配的元素之后插入内容。
  // elem.insertAfter(content): 与 content.after(elem)相同
  // elem.before(content): 在每个匹配的元素之前插入内容。
  // elem.insertBefore(content): 与 content.before(elem)相同
  // 
  // elem.remove(): 从DOM中删除所有匹配的元素。包括自身节点
  // elem.empty(): 从DOM中删除所有匹配的子元素，自身元素不会被删除
  // 
  // 
  // jQuery css样式
  // 
  // .addClass(class|fn): 添加样式 
  //   fn: ()=> {return 'blue'}
  // .removeClass(class|fn): 删除样式
  // .toggleClass(class|fn): 切换样式
  // 
  // .css(name|property|[,val|fn]): 设置或获取css样式
  //   name: 要获取的属性名称
  //   property：要设置为样式属性的名/值对，{color: 'blue', height: '100px'}
  //   name, val: 要设置为样式属性的名/值对
  //   name, fn: 将属性的属性设置为一个函数, 函数接收两个参数，index为元素在对象集合中的索引位置，value为原先本来的属性值
  //   
  //   .css({ color: index, value => 'light'+value, 
  //      height: => value+200})
  // 

<button onclick="fn()">按钮1</button>
<button id="btn">按钮2</button>

  //this指向常见错误
  function fn () {
    console.log(this); // => window
  }
  btn.onclick = function () {
    console.log(this);  // => btn dom节点
  }