jquery 回顾

自从用了 Angular 框架，jquery 的使用率直线下降，不过还是得捡起来。

 

#、jquery有哪些优点？

轻量级框架

强大的选择器，出色的 DOM 操作封装

可靠的事件处理机制（事件绑定）

完善的 ajax

出色的浏览器兼容性

链式操作

行为层和结构层分离，支持丰富插件，文档丰富

 

#、$()：

是 jQuery() 函数的别称，它用于将任何对象包裹成 jQuery 对象，接着就可以调用定义在 jQuery 对象上的多个不同方法。甚至可以讲一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

 

#、jquery 的选择器 ？

大致分为：基本选择器、层次选择器、表单选择器

基本选择器：id 选择器（返回单个元素）、标签选择器（返回一组相同标签的元素）、类选择器（返回一组具有相同 css class 的元素）

层次选择器：$('form input') 所有 form 元素中的 input 元素；$('#main > *') 选择id为 main的所有子元素

过滤选择器：$('tr:first') 选择所有 tr 元素的一个   $('input[type=checkbox]')  选择所有 type 为 checkbox 的 input  元素。

表单选择器：$(':input') 选取所有 input、textarea 、select等表单输入元素；$(':text') 选取所有的单行文本框

 

#、属性选择器

 

#、如何点击一个按钮时使用 jQuery 隐藏其他元素？

给点击元素绑定 click 方法，将要隐藏的 元素 hide()。

 

#、js  window.onload 和 jQuery ready 有何不同？

文档进入 ready 状态时执行代码。它适用于所有浏览器；只需对 DOM 树的等待。无需对图像或外部资源加载的等待，可以在网页里多次使用。

window.onload 除了要等待 DOM 被创建，还要等到包括大型图片、音频、视频在内所有外部资源都完全加载；如果加载外部资源花费大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟；且只能使用一次。

 

#、获取选中的  checkbox：

$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')

 

#、radio 单选组第二个元素为当前选中的值

$('input[type=radio]')[1].checked = true;

 

#、找到所有 HTML select 标签的选中项？

$('[name=NameOfSelectedTag] : selected')

这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取 <select> 标签。

 

#、jQuery 的 each()

允许遍历一个元素集合。

 

#、如何将一个 HTML 元素添加到 DOM 树中？

 

#、用 jQuery 代码选择所有在段落内的超链接

$('p a');

 

#、$(this) 和 this 有何不同？

$(this) 返回的是 jQuery 对象，可以调用多个 jQuery 方法，比如 text() 获取文本， vla() 获取值等。

this 代表当前元素，它是 js 关键词中的一个，表示上下文中的当前 DOM 元素。

 

#、如何使用 jQuery 来提取一个 HTML 标记的属性：例如 链接的 href？

attr() 方法被用来提取任意一个 HTML 元素的一个属性的值。

首先需要利用 jQuery 选择及选取到所有的链接或者一个特定的链接，然后可以用 attr() 方法获取 href 属性值

$('a').each(function() {

　　console.log($(this).attr('href'));

})

 

#、设置一个属性值、删除一个属性？

对象.attr('name', '值');

删除属性：removeAttr()

 

#、设置和获取元素内容

text()：设置或返回所以选元素的文本内容

html()：设置或返回所选元素的内容（包括 HTML 标记）

val()：设置或返回表单字段的值

 

#、attr 和 prop 的区别

prop 方法可以操作布尔类型的属性。

自定义属性 用 attr 获取，prop获取或设定属性值时都会返回 undefined

例：

$('#chk1').prop('checked') == false;

$('#chk1').prop('checked') == true;

$('#chk1').prop('checked') == undefined;

$('#chk1').prop('checked') == 'checked';

 

#、detach 和 remove 方法区别

 remove 是直接移除了，找不回来。

detach 则是 移除了，但是能找回来。

例：

a = $('p a').detach();

$('p').append(a);

ps：empty() 删除匹配的元素集合中所有的子节点

 

#、添加删除 css 类

addClass 和 removeClass

 

#、cdn 加载 jquery 库的主要优势？

更快的下载速度

如果已经从同一个 cdn 下载相同版本的 jquery，不会再去下载一次。

 

#、get() 和 ajax() 区别

get() 方法是一个只获取一些专门数据的专门化方法

ajax() 则更加强大，更具可配置性、可以设置等待或如何处理错误等

 

#、jquery 中的方法链

是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方便=面更加出色。

（回调，回调函数作为参数传递到另一个函数中，一旦事件发生或者某一个任务完成时被执行，经常使用在异步代码中。）

 

#、在一个 jquery 事件处理程序里返回了 FALSE，会怎么样

通常用于阻止事件向上冒泡

 

#、document.getElementbyId('id') 和 $('#id') 哪种更高效？

document 更高效，直接调用了 javascript 引擎

$('#id') 虽然内部使用的同样是 getElementById 处理 id 获取，但是经过处理返回的是 jQuery 对象

 

#、jquery 动画
显示、隐藏：show()、hide()

淡入、淡出：fadeIn()、fadeOut()

上划、下滑：slideUp()、slideDown()

 

#、显示和隐藏效果代码？

document.getElementById('p').style.display = 'block/none';

$('p').css('display': 'block/none');

show/hide(speed, [callback]); 

 

#、jquery 遍历节点？

 

#、delegate 方法？

需要给父元素下子元素添加事件时，可以使用。（子元素可能在未来出现）

可以发现所有新追加在 button 后面的 p 元素，也绑定了 click 方法，同样点击之后会被折叠；且并不会影响到 div 以外的 p 元素。

demo引用：https://www.w3school.com.cn/tiy/t.asp?f=jquery_event_delegate_newelement

 

#、禁用浏览器前进后退

<script type="text/javascript" language="javascript">
$(document).ready(function() {
     window.history.forward(1);
     //OR
     window.history.forward(-1);
});
</script>

 

#、匹配索引值

偶数：$('tr: even')

奇数：$('tr:odd')

给定索引值：$('tr:eq(1)')

大于索引值：$('tr:gt(0)')

小于索引值：$('tr:lt(2)')

 

#、阻止事件冒泡

stopPropagation()

 

#、bind() 方法绑定

bind(type, [data], fn)

绑定类型： blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, select, submit , keydown, keypress, keyup, error, mousemove, mouseover, mouseout, mouseenter, mouseleave, change

$('#btn').bind('click', function () {});

$('.txt').bind('focus', { msg: message }, function (event) { event.data.msg });