我爱编程

jquery

2017-08-23  本文已影响0人  Wensx

题目1: jQuery 能做什么?

jQuery能选取并操作HTML元素,修改元素属性,CSS属性操作,监听事件并进行对应的操作,设置javascript动画,Ajax

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

JQuery对象包含更多的对象属性,DOM对象就是对应的元素
J->D: $('#id')[0]
D->J: $(document.querySelector('#id'))

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

jQuery使用一般使用.on绑定事件:
如:$('element').on('click',function(){})

.on( events [, selector ] [, data ], handler(eventObject) )

events
类型: String
一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector
类型: String
一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null
或者忽略了该选择器,那么被选中的元素总是能触发事件。

data
类型: Anything
当一个事件被触发时,要传递给事件处理函数的event.data

handler(eventObject)
类型: Function()
事件被触发时,执行的函数。若该函数只是要执行return false
的话,那么该参数位置可以直接简写成 false。

.bind():为一个元素绑定一个事件处理程序。
.unbind():从元素上删除一个以前附加事件处理程序。
.delegate():为所有匹配选择器(selector参数)的元素绑定一个处理器到一个或多个事件,现在或将来, 基于根元素的一个特定的组
.on():在选定的元素上绑定一个或多个事件处理函数。
.off():移除一个事件处理函数。
.live():附加一个事件处理器到符合目前选择器的所有元素匹配,现在和未来。

推荐使用.on代理事件写法:

$('#parent').on('click',$('.child'),function(){})

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

展示:.show()
隐藏: .hide()
展示/隐藏切换: .toggle()

题目5: jQuery 动画如何使用?

jQuery动画一般使用.animate()方法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties
类型: PlainObject
一个CSS属性和值的对象,动画将根据这组对象移动。

duration (默认: 400
)
类型: Number or String
一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )

easing (默认: swing
)
类型: String
一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing")

complete
类型: Function()
在动画完成时执行的函数。

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

考虑以下的HTML:
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
获取内容
$('div.demo-container').html();
结果如下:
<div class="demo-box">Demonstration Box</div>
这种方法使用浏览器的innerHTML 属性。有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如,如果属性值只包含字母数字字符,Internet Explorer有时丢弃包裹属性值的引号。

设置内容
$('div.demo-container')
  .html('<p>All new content. <em>You bet!</em></p>');
这行代码将替换 <div class="demo-container">里的所有内容
结果:
<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>
代码$('div.demo-container').text() 将提供下面的结果:
Demonstration Box list item 1 list item 2

$('div.demo-container').text('<p>This is a test.</p>');代码语句将输出以下 DOM :
<div class="demo-container">
<p>This is a test.</p>
</div>

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

$('selector').val():获取表单用户输入值;
$('selector').val('…'):设置输入值;

$('selector').attr('name'):获取元素属性;
$('selector').attr('name','xxx'):设置元素属性的值;

题目8:

link

题目9:

link

题目10:

link

题目11:

link

上一篇下一篇

猜你喜欢

热点阅读