jQuery:DOM和事件

1.说说库和框架的区别?

  • 库是一个方法的集合,提供了很多封装好的函数,添加库之后可以直接使用这些方法。
  • 框架是一个产品,用于解决一类问题,如同他的名字,已经有了一个大体的框架,需要开发者向其中填写内容。

2.jquery 能做什么?

  • 更加方便的获取DOM元素:利用$和一些内置函数
  • 动态地修改页面样式:利用addClass
  • 动态地修改DOM:append等函数
  • 响应用户操作:事件监听函数
  • 动画效果:animate,show,hide等函数
  • 兼容性很好

3.jquery 对象和 DOM 原生对象有什么区别?如何转化?

  • jQuery的对象是数组对象,是对DOM原生对象的一种包装。
  • DOM转化为jQuery需要使用$(对象)
  • jQery转化为DOM原生需要$(对象).eq(对应的位置)

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

  • 可以使用on、bind、live、delegate等函数来绑定。
    <pre>
    var $('.btn').on('click',fuction(){
    #code....
    })
    </pre>
  • bind:bind(type,data,callback)直接绑定在元素上
  • live:live(type,data,callback)是bind的升级版本,不仅可以绑定在元素上,还因为自身的“事件委托”的实现方法,对后添加的后代元素同样起作用,比如$('.a').live('click',callback)只要有一个事件click冒泡到document并且还是a元素,就都符合。
  • unbind:移除之前的绑定的事件
  • delegate:指定的元素(被选元素的子元素)绑定一个或多个事件
    $("#container").delegate("a","click",function(){alert("OK");})就是对里面的a标签绑定事件
  • on:on(events,[selector,data,callback])在选择元素上绑定一个或多个事件的事件处理函数(live、bind、delegate在1.7版本之后被其代替)
  • off:用于移除on函数的事件绑定

推荐使用on,因为是最新的支持的比较多,而且前几个绑定函数功能比较乱还停用了。
<pre>
$('.target').on('click','selector',function(){
#code.......
})
</pre>

5.jquery 如何展示/隐藏元素?

<pre>
$('.target').show();
$('.target').hide();
</pre>

6.jquery 动画如何使用?

<pre>
$('.target').animate({left:"200px",top:"100px"},100,function(){
#code
})//第二个时间可以换成fast或者slow
.stop:停在当前位置
.finish:立即执行完列表中的动画
.clearQueue:删除列表中的所有项目
</pre>

7.如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

<pre>
//无参数获取
$(".target").html()
$(".target").text()
//有参数设置
$(".target").html('< p >nihao< p >')//设置内部的html标签
$(".target").text('nihao')//设置文本
</pre>

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

获取表单输入内容:<pre>$("#input").val()</pre>
获取表单选择内容:<pre>$("#input:checked").val()</pre>
获取元素属性:<pre>$('.target').attr()</pre>
设置元素属性:<pre>$('.target').attr('src',$img.attr('data-img'))</pre>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容