美文网首页我爱编程
jQuery选择器_Dom操作_样式_事件处理_动画

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

作者: Taaaaaaaurus | 来源:发表于2017-09-02 00:22 被阅读0次

    题目1: jQuery 能做什么?

    • 方便快捷获取DOM元素
        如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码,而使用jQuery只需要一行代码就足够了。例如,找到所有应用了.content class样式的div中所有的P标签,只需要下面的一行代码:
      $('div.content').find('p');
    • 动态修改页面样式
        使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如,找到页面所有的ul标签的第一个li子标签,然后为它们增加名为active的样式,代码如下:
      $('ul > li:first').addClass('active');
    • 动态改变DOM内容
        使用jQuery我们可以很容易地对页面DOM进行修改,例如,为ID为"Container"的元素添加一个链接:
      $('#container').append('<a href="more.html">more</a>');
    • 响应用户的交互操作
        jQuery提供了截获形形色色的页面事件(比如用户单击某个链接)的适当方式,而不需要使用事件处理程序拆散HTML代码。此外,它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。
       $('button.show-details').click(function() {
         $('div.details').show();
       });
      
    • 为页面添加动态效果
        jQuery中内置的一批淡入、擦除之类的效果,以及制作新效果的工具包,为此提供了便利。
      $(function () {
       $("#btnShow").click(function () {
         $("#msubject").hide("slow");
        });
      });
      

    上面的代码表示:为使用的.show-details样式的button元素添加一个click事件,事件就是:显示使用.details样式的DIV。

    • 统一Ajax操作
        jQuery统一了多种浏览器的Ajax操作,使得开发人员更多的专注服务器端开发。
       function (data, type) {
          // 对Ajax返回的原始数据进行预处理
          return data // 返回处理后的数据
       }
      
    • 简化常见的JavaScript任务。
        除了这些完全针对文档的特性之外,jQuery也改进了对基本的javascript数据结构(例如迭代和数组操作等)。
      $.each(obj, function(key, value) {
         total += value;
      });
      

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

    • DOM原生对象:w3c标准用于操作文档的API。

    • jQuery对象:通过jQuery包装DOM对象后产生的对象。

    • 区别:

      • jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,两者不等价;
      • jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
        例如:
          $("#id").html();
          document.getElementById("id").innerHTML;
          意思是指:获取ID为id的元素内的html代码。这两段代码结果相同,但中间的取值过程不同。
          即:$("#id").innerHTMLdocument.getElementById("id").html()之类的写法都是错误的。
    • 相互转换:
      jQuery对象转成DOM对象---两种转换方式:[index].get(index)

      • jQuery对象是一个数据对象,通过[index]的方法
          如:
          var $v = $("#v") ; //jQuery对象
          var v = $v[0]; //DOM对象
          alert(v.checked) //检测这个checkbox是否被选中
      • jQuery本身提供,通过.get(index)方法
          如:
          var $v = $("#v"); //jQuery对象
          var v = $v.get(0); //DOM对象
          alert(v.checked) //检测这个checkbox是否被选中
        DOM对象转成jQuery对象:
          对于DOM对象,只需用$()把DOM对象包装起来,就可得到jQuery对象
          如:
          var v=document.getElementById("v"); //DOM对象
          var $v=$(v); //jQuery对象

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

    • jQuery绑定事件用bind、或delegate、或live、或on
    • bind() 为一个元素绑定一个事件处理程序,示例如下:
      • $(‘button’).bind(‘click’,function(){console.log(this)});
      • $(‘p’).bind(‘mouseenter mouseleave’,function({$(this).toggleClass(‘change’)});
    • unbind() 从元素上删除一个以前附加事件处理程序,示例如下:
      • $('p').unbind('mouseenter');
        在最简单的情况下,不带参数的.unbind() 将移除元素上所有绑定的处理程序
    • delegate() 为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。
    • live() 附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。这种方法是将页面的document元素作为事件代理元素,太消耗资源,已经过时。
    • on() 在选定的元素上绑定一个或多个事件处理函数。
      $('button').on('click',function(){
        $('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>');
         console.log($('p').length);
       });
      
    • off() 移除用.on()绑定的事件处理程序

    绑定事件和解绑事件推荐使用on()off()

    • 使用on绑定事件使用事件代理
      //让.ct>ul中的所有li绑定事件
      $('.ct>ul').on('click','li',function(){
        var $this=$(this);
        var str=$this.text();
        $('.wrap').text(str);
      })
      

    题目4:jQuery 如何展示/隐藏元素?

    • jQuery展示元素:
      $('.btn').on('click',function(){
        $('.show').show(3000,'linear',function(){
          alert('welcome');
        });
      });
      
      2.通过淡入的方式显示匹配元素
      $('.btn').on('click',function(){
        $('.show').fadeIn(3000);
      });
      
      3.用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式
      $(.btn).on('click',funtion(){
        $('.show').sildeDown(3000);
      })
      
    • jQuery隐藏元素
      1.$('.show').hide(1000);
      2.通过淡出的方式隐藏匹配元素
      $('.btn').on('click',funtion(){
        $(.show).fadeOut(3000,'slow');
      });
      
      3.用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。 display 样式属性将被设置为none,以确保该元素不再影响页面布局。
      $('.btn').on('click',funtion(){
        $(.show).fadeOut(3000,'slow');
      });
      

    题目5: jQuery 动画如何使用?
    .animate( properties [, duration ] [, easing ] [, complete ] )
    用法:jquery对象.animate(执行动作(一般都是css样式),回调函数(可选));
    例子:

    <!DOCTYPE html>
    <html>
    <head>
        <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
        <meta charset="utf-8">
        <title>JS Bin</title>
        <style>
            #ct {
                border: 1px solid black;
                width: 100px;
                height: 100px;
                background: red;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="ct">animate</div>
        <button type="button">动画</button>
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $('button').on('click', function a() {
                $('#ct').animate({
                    left: '300px',
                }, 3000);
                $('#ct').animate({
                    top: '300px',
                    left: '0'
                }, 'slow');
                $('#ct').animate({
                    left: '300'
                }, 'slow');
                $('#ct').animate({
                    left: '0',
                    top: '0'
                }, 'slow');
            });
        </script>
    </body>
    </html>
    

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

    • 获取元素内部HTML内容
      console.log($('.html').html());
      
    • 设置元素内部内容
      $('.html').html('<p>设置内部HTML内容</p>');
      
    • 获取元素内部文本
      console.log($('.text').text());
      
    • 设置元素内部文本
      $(.text).text('设置元素内部文本');
      

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

    • 获取和设置表单用户输入或者选择的内容
      $('input').val();
      $('input').val('newValue');
      当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值
    • 获取和设置元素属性
      //获取元素特定属性的值
      var title = $( "em" ).attr( "title" );
      //为元素属性赋值
      $( ".greatphoto" ).attr( "alt", "Beijing Brush Seller" );
      
      $( ".greatphoto" ).attr({
        alt: "Beijing Brush Seller",
        title: "photo by Kelly Clark"
      });
      
      $( ".greatphoto" ).attr( "title", function( i, val ) {
        return val + " - photo by Kelly Clark";
      });
      

    代码8
    )
    代码9
    代码10
    代码11

    相关文章

      网友评论

        本文标题:jQuery选择器_Dom操作_样式_事件处理_动画

        本文链接:https://www.haomeiwen.com/subject/tdnkjxtx.html