学习 jQuery选择器

1- jQuery 介绍

• jQuery是一个快速、简洁的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，同时也解决了浏览器的兼容问题。

2- jQuery 对象和 DOM 原生对象的区别，及之间的转化

• jquery 对象和 DOM 原生对象有什么区别:
  • DOM对象就是JavaScript 固有的一些对象。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法
  • jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象，可以认为是DOM对象的一种“集合”。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法
• jquery对象和DOM原生对象的转换：

 test 

3- jQuery中如何绑定事件？bind、unbind、delegate、live、on、off的作用，推荐使用哪种？使用on绑定事件使用事件代理的写法？

• 绑定事件 on(enents [,selector] [,data],handler(event))

  • 参数说明: events:一个或多个空格分隔的事件类型和可选的命名空间.例如"click","click.mybutton"
  • selector:一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素
  • data:当一个事件被触发,要传递给事件处理函数的数据,在事件处理函数中通过event.data来使用
  • handler(event):事件被触发时,执行的函数 * 其他: click([[data],fn]) keydown([[data],fn])等

$('#ele').bind('click',function(){
    
});
$('#ele').unbind('') //不传参数，解绑所有事件
$('#ele').unbind('click') //传入参数，解绑指定事件

• 事件相关

  • bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。
  • unbind(type,[data|fn]]):从每一个匹配的元素中删除绑定的事件。
  • delegate(selector,[type],[data],fn):指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序
  • live(type, [data], fn):给所有匹配的元素附加一个事件处理函数
  • on(enents [,selector] [,data],handler(event)):在选择元素上绑定一个或多个事件的事件处理函数。
  • off(events,[selector],[fn]):在选择元素上移除一个或多个事件的事件处理函数。

• bind、unbind、delegate、live、on、off都是绑定，解绑或解绑某个命名空间的事件的方法。但是bind、unbind、delegate、live是以前的老版本的方法，on和off是新版本的方法，推荐使用 on 和 off

• 使用on绑定事件使用事件代理的写法
  $('#ele').on(events,[data],[selector],function)

// 普通事件绑定，最简单的用法
$('div').on('click', function(e){
    console.log(this);
    console.log(e);
});

// 事件委托或者事件代理，想让div下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

4- jQuery 展示/隐藏元素的方法：

• 隐藏元素有 .hide() 和.css("display", "none") 方法
• 展示元素有 .show() 和 .css("display", "block") 方法
• 展示/隐藏 相互切换: .toggle()方法

    
展示
    show
    hide
    none
    block
    change
    



    

6- 怎样设置和获取元素内部 HTML 内容，怎样设置和获取元素内部文本

• 设置和获取元素内部HTML
  $(selector).html() //设置或返回所选元素的内容（包括 HTML 标记）
  .html(): 获取元素内部HTML
  .html(string):修改元素内部HTML内容
  var inner = element.innerHTML: 获取元素内部HTML
  element.innerHTML = "hello world!!"; 修改元素内部HTML内容
• 设置和获取元素内部文本
  $(selector).text() //设置或返回所选元素的文本内容
  .text(): 获取元素内部文本
  .text(string): 设置元素内部文本
  var inner = element.innerText; 获取元素内部文本
  element.innerText = "hello world"; 设置元素内部文本

7- 关于如何设置和获取表单用户输入或者选择的内容，如何设置和获取元素属性

• 设置和获取表单用户输入或者选择的内容
  .val():获取input的value值
  .val(string):设置input的value值
  var value = document.querySelector('input').value; 获取input的value值
  document.querySelector('input').value = "new value"; 设置input的value值
• 设置和获取元素属性
  .attr("attributeName"): 获取指定属性的值
  .attr("attributeName", "newAttribute"): 设置元素属性
  element.getAttribute("attributeName"); 获取指定属性的值
  element.setAttribute("attribute name", " newAttribute"); 设置元素属性

8- 使用 jQuery实现效果

demo

预览：使用 jquery实现导航效果

9- 使用 jQuery 实现效果

预览：
使用jquery实现tab切换效果

• 可参考这里

10- 实现如下效果

Ps:当点击按钮时使用如下数据

var products = [
     {
    img:'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',  
    name: '珂兰 黄金手 猴哥款',
    price: '￥405.00'
 },{    
    img:'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',  
    name: '珂兰 黄金转运珠 猴哥款',   
    price: '￥100.00'
 },{    
    img:'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',  
    name: '珂兰 黄金手链 3D猴哥款',  
    price: '￥45.00' 
   }
];

预览：实现代理添加效果

• 可参考这里