jQuery选择器_Dom操作_样式_事件处理_动画

jQuery 能做什么？

• 就其核心特性而言，jQuery能够满足下列需求。
  • 取得文档中的元素。jQuery为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。
  • 修改页面的外观。jQeury有较好的浏览器兼容性。
  • 改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需一个简单易用的API。
  • 响应用户的交互操作。jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式。
  • 为页面添加动态效果。jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。
  • 无需刷新页面从服务器获取信息。便利的Ajax函数。
  • 简化常见的JavaScript任务。jQuery也改进了对基本的JavaScript数据结构的操作（例如迭代和数组操作等）。

jQuery 对象和 DOM 原生对象有什么区别？如何转化？

• jQuery对象是jQuery在DOM原生对象的基础上进行封装，使其能够调用jQuery的方法。

• jQuery对象转换为DOM对象：

  1.
  var $tab = $('.tab')
  $tab[0]  // <ul>...</ul>
  
  2.
  var $tab = $('.tab')
  $tab.get(0)  // <ul>...</ul>
  

• DOM对象转换为jQuery对象：

  var tab = document.querySelector('.tab')
  var $tab = $(tab)
  

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

• bind:为一个元素绑定一个事件处理程序。

• unbind:从元素上删除一个以前附加事件处理程序。

• delegate:为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

• live:附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。

• on:在选定的元素上绑定一个或多个事件处理函数。

• off() 方法移除用.on()绑定的事件处理程序。

• 从jQuery 1.7开始，.on() 方法是将事件处理程序绑定到文档（document）的首选方法。示例：

  $('.class').on('click', function(){...})
  事件代理写法：
  <ul>
    <li>1</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
  </ul>
  <input type="text">
  $('ul').on('click', 'li', function() {
    var value = $(this).text()
    $('input').val(value)
  })
  

jQuery 如何展示/隐藏元素？

• 1.给元素换class，来实现隐藏元素，前提是换的class样式定义好了隐藏属性。
• 2.通过jquery的css方法 / attr方法，设置css属性。
• 3.通过jquery的show()、hide()方法，设置元素隐藏。
• 4.通过jquery的toggle()方法，切换 hide() 和 show() 方法。

jQuery 动画如何使用？

• animate()方法根据一组 CSS 属性，执行自定义动画。示例：

  <div id="clickme">
    Click here
  </div>
  ![](book.png)
  
  // 同时对透明度，左偏移值和高度应用动画：
  $('#clickme').click(function() {
    $('#book').animate({
      opacity: 0.25,
      left: '+=50',
      height: '+=50'
    }, 5000);
  });
  

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

• html()方法获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。示例：

  <div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
  </div>
  
  // 设置内容
  $('div.demo-container')
  .html('<p>All new content. <em>You bet!</em></p>');
  // 获取内容
  $('div.demo-container')
  .html('');
  

• text()方法得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。示例：

  <p>Test Paragraph.</p>
  <script>
    // 添加文本
    $("p").text("<b>Some</b> new text.");
  
    // 获取文本
    $("p").text();
  </script>
  

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

• val()方法获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。示例：

  <input id="ipt1" type="text" value="some text"/>
  <input id="ipt2" type="text" value="some text"/>
  <p></p>
  <script>
      $("#ipt1").keyup(function () {
        var value = $(this).val();
        $("#ipt2").val(value);
      });
  </script>
  

• attr()方法获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。示例：

  <p>
    Once there was a 
    <em title="huge, gigantic">large</em> dinosaur...
  </p>
  <script>
  var title = $("em").attr("title");
  $("em").attr("title", "gg");
  </script>
  

使用 jQuery实现二级菜单

使用 jQuery tab切换效果

实现添加图片效果

tab滑动效果