jQuery简单介绍

题目1： jQuery 能做什么？

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

  • DOM原生对象：
    • 是对象；
    • 拥有原生对象的属性和方法；
  • jQuery对象：
    • 是DOM元升级对象经过包装之后，拥有jQuery的属性和方法（对原生DOM对象的封装）；
    • 是类数组；
$('body')[0]//可以转为DOM原生对象
$(document.querySelector('body))//可以转为jQuery对象

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

  • bind(type,[data],fn)
    为每个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法，请用 on()代替。
$("p").bind("click", function(){
  alert( $(this).text() );
});
  • unbind(type,[data|fn]])
    bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
    jQuery 3.0中已弃用此方法，请用 off()代替。
    如果没有参数，则删除所有绑定的事件。
    你可以将你用bind()注册的自定义事件取消绑定。
    如果提供了事件类型作为参数，则只删除该类型的绑定事件。
    如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

$("p").unbind("click", foo); // ... 再也不会被触发 foo
  • delegate(selector,[type],[data],fn)
    指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
    jQuery 3.0中已弃用此方法，请用 on()代替。
    使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
  • live(type, [data], fn)
    jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
    从 jQuery 1.7 开始，不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。
$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});
  • on(events,[selector],[data],fn)
    在选择元素上绑定一个或多个事件的事件处理函数。
    on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one() 
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)
  • off(events,[selector],[fn])
    在选择元素上移除一个或多个事件的事件处理函数。
    off() 方法移除用.on()绑定的事件处理程序。有关详细信息，请参阅该网页上delegated和directly绑定事件。特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。 
var validate = function () {
  // code to validate form entries
};
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate); 
// remove event handlers in the ".validator" namespace
$("form").off(".validator");

推荐使用.on()、.off()

$('ul').on('click','li',function(){
console.log()this
})

题目4：jQuery 如何展示/隐藏元素？题目5： jQuery 动画如何使用？

 <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
    ul>li {
      list-style: none;
      border: 1px solid;
    }
     p {
       display: none;
     }
  </style>

  <div class="box"></div>
  <ul>
    <li>
      <h1>我是标题1</h1>
      <p>我是段落1</p>
    </li>
    <li>
      <h1>我是标题2</h1>
      <p>我是段落2</p>
    </li>
    <li>
      <h1>我是标题3</h1>
      <p>我是段落3</p>
    </li>
  </ul>
  <button id="show">显示</button>
  <button id="hide">隐藏</button>
  <button id="more">多个动画</button>
  <button id="finish">完成</button>
  <button id="stop">停止</button>

  <script>
    var $box = $('.box')
    $('#show').on('click', function () {
      $box.show(1000, function () {
        $(this).text('animation is done')
      })
    })
    $('#hide').on('click', function () {
      $box.hide(1000)
    })
    $('ul').on('click','li',function () {
      $(this).find('p').toggle(1000)//动态效果为从右至左。横向动作。
      $(this).find('p').slideToggle(1000)//动态效果为从下至上。竖向动作。
      $(this).find('p').slideUp(1000)//通过高度变化（向上减小）来动态地隐藏示所有匹配的元素
      $(this).siblings().find('p').slideDown(1000)//通过高度变化（向下增大）来动态地显示所有匹配的元素
      $(this).find('p').fadeIn(1000)//通过不透明度的变化来实现所有匹配元素的淡入效果
      $(this).find('p').fadeOut(1000)//通过不透明度的变化来实现所有匹配元素的淡出效果
      $(this).find('p').fadeToggle(1000)//通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
      $(this).find('p').fadeTo(1000,0.36)//把所有匹配元素的不透明度从0以渐进方式调整到指定的不透明度
    })
    $('#more').on('click',function(){
      $box.animate({width:'140px',height:'140px',left:'300px'},1000)
      $box.animate({top:'300px'},1000).animate({left:'0'}).animate({top:'0',width:'100px',height:'100px'})
    })

    $('#finish').on('click',function(){
      $box.finish()
    })
    $('#stop').on('click',function(){
      $box.stop(true)
    })
  </script>

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

    <ul>
        <li id="li01">
          <h1>我是标题1</h1>
          <p>我是段落1</p>
        </li>
        <li id="li02">
          <h1>我是标题2</h1>
          <p>我是段落2</p>
        </li>
        <li id="li03">
          <h1>我是标题3</h1>
          <p>我是段落3</p>
        </li>
      </ul>
      <script>
        console.log($('ul').html())//获取HTML内容
        $('ul #li01').html('<div>hello jirengu</div>')//设置HTML内容
          console.log($('ul #li02').text())//获取文本内容
          $('ul #li02').text('hello world')//设置文本内容
      </script>

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

    console.log($("#username").val())//获取input的值
    $("#username").val('jirengu')//设置input的值
    console.log($("#username").attr('type'))//获取input的type属性
    $("#username").attr('type', 'password')//设置input的type属性值为'password
    $('#city').change(function () {
      console.log($(this).val())//获取select选择时的value
    })

题目8： 使用 jQuery实现如下效果

sideNav
题目9
题目10
题目10 server.js
tab切换卡

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,286评论 0赞 8
  • jQuery 入门1
    题目1： jQuery 能做什么？ 选择网页元素改变结果集元素的操作：取值和赋值元素的操作：移动元素的操作：复制、...
    QQQQQCY阅读 1,567评论 0赞 1
  • 02-老马jQuery教程-jQuery事件处理
    本文章是老马jQuery视频的讲义和上课的代码。具体观看视频地址：https://chuanke.baidu.co...
    IT老马阅读 7,408评论 3赞 14
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,293评论 0赞 2
  • 千千阕歌之重生
    千千阙歌：这是一首我钟爱一生的歌曲，我的重生之歌！ 流年的七月 ，我在家乡租了一个精品屋，十九岁的我怀揣几万元钱，...
    雪落重阳阅读 4,383评论 51赞 23

友情链接更多精彩内容