学习 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原生对象的转换：

<button id = "btn"> test </button>

<script>
// 获取DOM对象
var btn = document.querySelector("#btn");
// 获取jquery对象
var $btn = $('#btn');
// DOM对象转变为jquery对象
var domToJquery = $(btn);
// jquery对象转变为DOM对象
var jqueryToDom = $btn[0];
</script>

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()方法

<div class="showhidden">
    <p>展示</p>
    <button>show</button>
    <button>hide</button>
    <button>none</button>
    <button>block</button>
    <button>change</button>
    
</div>
<script src="jquery-3.1.1.js"></script>
<script>
    // show hide 方法
    $('.showhidden > button').eq(0).on('click', function() {
        $('.showhidden > p').show(3000,'linear');
    });
    $('.showhidden > button').eq(1).on('click', function() {
        $('.showhidden > p').hide();
    })
    // 设置 css 方法
    $('.showhidden > button').eq(2).on('click', function() {
        $('.showhidden > p').css("display", "none");
    });
    $('.showhidden > button').eq(3).on('click', function() {
        $('.showhidden > p').css("display", "block");
    })
    $('.showhidden > button').eq(4).on('click', function() {
        $('.showhidden > p').toggle();
    })

5- jQuery 动画的使用

• animate()方法用于创建自定义动画
  • .animate( properties [, duration ] [, easing ] [, complete ] )
  • .animate(properties, [options])

• properties:是一个CSS属性和值的对象，动画将根据这组对象移动
• optioins 是一组包含动画选项的值的集合,常用的选项：
  • duration：规定效果的时长，默认值: "normal" / 400， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
  • easing:一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
  • complete：指定了在动画完成时执行的函数

 <div class="container">
        <p>jQuery</p>
    </div>
    <button id="animation">动画变换</button>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
    var $btn = $('#animation');
    var $container = $('.container').eq(0);
    var $p = $('.container p').eq(0);
    console.log($btn);
    $btn.on('click', function(){
        $container.animate({
            width: '300px',
            height: '150px',
            marginLeft: '100px',
            opacity: '0.5'
        });
        $p.animate({
            fontSize: '25px',

        })
});
</script>

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' 
   }
];

预览：实现代理添加效果

• 可参考这里