jQuery疑难解答

jQuery

1. Var、let和const声明变量的区别是什么？

var: var在全局声明的变量会自动挂载到顶层对象window上
var声明变量，存在变量提升的现象
var会先将声明变量的操作放在作用域的顶部，之后再执行赋值等操作 因为代码存在变量提升，变量可以先使用再声明，造成代码可读性非常糟糕！var可以重复声明变量

let: let声明的变量不会挂载在window上
let声明变量，存在暂时性死区 let声明的变量在声明之前使用会报错
let不可以重复声明变量

const: let声明变量的特点，const全都有
const声明的是一个常量，不可以被重新赋值
const声明的常量，必须赋初始值

2. JavaScript中的数据类型有哪些？

​ 基本数据类型：字符串 String、数字 Number、布尔Boolean
​ 复合数据类型：数组 Array、对象 Object
​ 特殊数据类型：Null 空对象、Undefined 未定义

3. 使用JSON（字面量）方式描述一台电脑，电脑有品牌、颜色、价格、种类，还可以打游戏、敲代码。

{
brand: “品牌”,
color: “颜色”,
price: “价格”,
type: “种类”,
game:function(){alert(“打游戏”);}
coding:function(){alert(“敲代码”);}
}

4. 定时器函数有哪些，写出基础语法

​ 1.倒计定时器：timename=setTimeout(“function();”,delaytime);
​ 2.循环定时器：timename=setInterval(“function();”,delaytime);

5. Document对象获取页面元素的方法有哪些，并写出含义。

document.getElementById(‘id’)：返回结果是一个对象，如果存在两个标签拥有相同id，则返回第一个标签对象document.getElementsByTagName(‘标签名’)：返回结果是一个对象集合，以数组形式放在一起
document.getElementsByName(‘标签name属性的值’)：返回结果是一个对象集合，以数组形式放在一起
document.getElementsByClassName(‘类名’)：返回一个对象集合，以数组形式放在一起
document.documentElement：专门获取html这个标签的
document.body：专门获取body这个标签的

6. 简述创建对象的两种方法，以及两者的区别

基于Object对象的方式创建对象

var flower=new Object();
    flower.name="长春花";
    flower.genera="夹竹桃科 长春花属";
    flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
    flower.uses="观赏或用药等";
    flower.showName=function(){    alert(this.name);    }
 flower.showName();

使用字面量赋值方式创建对象

var flower={
        name:"长春花",
        genera:"夹竹桃科 长春花属",
        area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",
        uses:"观赏或用药等",
        showName:function(){ alert(this.name); }
    }
 flower.showName();

7. ES6中对数组都扩展了哪些方法？

from() 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象
of() 方法用于将一组值，转换为数组。
copyWithin() 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。
find() 用于找出第一个符合条件的数组成员。返回true或者undefind
findIndex() 用于查找第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
fill() 方法使用给定值，填充一个数组。
entries() 是对键值对的遍历
keys() 是对键名的遍历
values() 是对键值的遍历
includes() 方法返回一个布尔值，表示某个数组是否包含给定的值

8. 写出下列DOM操作对应的代码：
a) 创建一个div元素
b) 给创建的div中添加内容：“我是祖国的花朵“
c) 删除页面中id是hello的div

$(selector).append("<div></div>");
$("div").append(我是祖国的花朵);
$("#hello").reomve();

9. Js中如何创建一个对象

基于Object对象的方式创建对象

var flower=new Object();
    flower.name="长春花";
    flower.genera="夹竹桃科 长春花属";
    flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";
    flower.uses="观赏或用药等";
    flower.showName=function(){    alert(this.name);    }
 flower.showName();

使用字面量赋值方式创建对象

var flower={
        name:"长春花",
        genera:"夹竹桃科 长春花属",
        area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",
        uses:"观赏或用药等",
        showName:function(){ alert(this.name); }
    }
 flower.showName();

10. 如何向JS数组对象中添加数据

使用push()方法添加数据

11. 如果某元素的id属性包含‘#’号，应该如何用jQuery获取该元素

需要使用转义字符(\\)进行获取 如$("#id\\#a");

12. jQuery对象和DOM对象，如何相互转换

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
使用$()函数进行转化：$(DOM对象)

13. jQuery中哪些方法可以操作元素样式

css(); addclass();removeClass();toggleClass()

14. 你在jquery中使用过哪些插入节点的方法，它们的区别是什么？

append(content)	$(A).append(B)表示将B追加到A中 如：$(“ul”).append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo(“ul”);
prepend(content)	$(A). prepend (B)表示将B前置插入到A中 如：$(“ul”). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo (“ul”);

after(content)	$(A).after (B)表示将B插入到A之后 如：$(“ul”).after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1. insertAfter(“ul”);
before(content)	$(A). before (B)表示将B插入至A之前 如：$(“ul”).before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1. insertBefore(“ul”);

15. jQuery中如何来设置和获取HTML 和文本的值？

html()可以对HTML代码进行操作，类似于JS中的innerHTML

获取: $("div.left").html();
设置: $("div.left").html("<div class='content'>…</div>");

16. jQuery 里的 ID 选择器和 class 选择器有何不同？

当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。

17. 网页上有 5 个

元素，如何使用 jQuery来选择它们？

$(“div”)，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。

18. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

$('#ButtonToClick').click(function(){
    $('#ImageToHide').hide();
});

19. JavaScript window.onload 事件和 jQuery ready 函数有何不同？

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 }) ;

20. 如何获取 HTML select 标签的选中项的值？

$('select option:selected').val()

21. jQuery 里的 each() 是什么函数？你是如何使用它的？

each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。

$(selector).each(function(i,n) {
    alert(i);
    alert(n);
});

22. 你如何使用jQuery设置一个属性值?

attr() 设置或返回被选元素的属性值。
prop() 设置或返回被选元素的内置属性值。

23. jQuery中detach()、empty() 和 remove() 方法的区别是什么?

remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据

24. 你如何利用jQuery来向一个元素中添加和移除CSS类?

addClass() 和 removeClass()

25. jQuery有几种选择器？分别是什么？

1)基本选择器
#id
element
.class
*
selector1,selector2,selectorN
2)层次选择器
ancestor descendant
parent > child
prev + next
prev ~ siblings
3)属性选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
4)过滤选择器
:first
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated
:focus
5)表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
6)可见性过滤选择器
:hidden
:visible
7)内容选择器
:contains(text)
:empty
:has(selector)
:parent
8)表单过滤选择器
:enabled
:disabled
:checked
:selected
9)子元素选择器
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type

26. JavaScript和jQuery是什么关系？jQuery有哪些优势？
jQuery是JavaScript的类库，可以简化js的操作。
优势：轻量级；强大的选择器；出色的dom操作封装；可靠的事件处理机制；完善的Ajax；出色的浏览器兼容性；链式操作方式；隐式迭代；丰富的插件支持；完善的文档。