java jquery面试题_Web前端JQuery面试题（一）(示例代码)

Web前端JQuery面试题(一)

一：选择器

基本选择器

什么是#id，element，.class，*，selector1, selector2, selectorN？

答：

根据给定的id匹配一个元素，用于搜索，通过id的属性给定值。

案例：查找id为da3的元素

html代码：

jquery代码：

$("#da3");

结果：

[

html代码：

jquery代码：

$("#da\:q");

根据给定的元素名匹配所有元素

案例，查找div元素：

html代码：

da1

da2

da3

jquery代码：

$("div");

结果：

[

da1

,

da2

]

根据给定的类匹配元素

html代码：

dashu

da

jquery代码:

$(".da");

结果:

[

da

]

匹配所有元素*

html代码：

1

2

jquery代码：

$("*");

结果：

[

1

,

2

]

将每一个选择器匹配到的元素合并后一起返回：

html代码：

jquery代码：

$(".da, p, span");

结果：

[

]

层级选择器

2.后代选择器，子代选择器，next，siblings描述？

给祖先元素下匹配所有的后代元素

html代码：

jquery代码:

$("table input");

结果：

[ , ]

给父元素下匹配所有子元素：

html代码：

jquery代码:

$("table > input");

结果：

[ ]

匹配所有prev元素后的next元素：

html代码：

jquery代码:

$("p + input");

结果：

[ , ]

匹配prev元素后的所有siblings元素：

找出同辈的元素

html代码：

jquery代码：

$("table ~ input");

结果：

[ ]

基本选择器:?

:first :last :not :even :odd :eq :gt :lt :header :animated

获取第一个元素

• 1
• 2

$("li").first();

或

$("li :first");

[

1 ]

获取最后一个元素

• 1
• 2

$('li').last();

$("li :last");

[

2 ]

去除所有与给定选择器匹配的元素

查找所有未选中的 input 元素

$("input:not(:checked)")

[ ]

匹配所有索引值为偶数的元素

0

1

2

$("tr:even")

[

0, 2 ]

匹配所有索引值为奇数的元素

匹配所有索引值为奇数的元素

0

1

2

$("tr:odd")

[

1 ]

匹配一个给定索引值的元素

0

1

2

$("tr:eq(1)")

[

1 ]

匹配所有大于给定索引值的元素

0

1

2

$("tr:gt(0)")

[

1, 2 ]

匹配所有小于给定索引值的元素

0

1

2

$("tr:lt(2)")

[

0, 1]

匹配标题元素

1

1

2

2

$(":header");

[

1

,

2

]

匹配所有正在执行动画效果的元素

4.内容选择器的描述？

:contains :empty :has :parent

匹配包含给定文本的元素

匹配所有不包含子元素或者文本的空元素

匹配含有选择器所匹配的元素的元素

匹配含有子元素或者文本的元素

5.可见性选择器

:hidden :visible

匹配所有不可见元素

display:none

type="hidden"

匹配所有的可见元素

属性选择器的描述？

[attribute]

[attribute = value]

匹配给定的属性是某个特定值的元素

[attribute != value]

匹配所有不含有特定的属性

[attribute ^= value]

匹配给定的属性以某值开始的元素

[attribute $= value]

匹配给定的属性以某值结尾的元素

[attribute *= value]

匹配有包含某些值的特定元素

[selector1][selector2]

同时满足多个条件使用

$("div[id]");

获取

[

$("div [id='da']")

选择器-子元素有哪些？

:nth-child

从1开始的，匹配父元素下第n个元素

$("ul li:nth-child(2)"); 获取2 3 4。。

:first-child

匹配每个父元素下的第一个子元素

:last-child

匹配每个父元素下的最后一个子元素

:only-child

匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配

表单元素有哪些？

:input

会获取所有input,textarea,select,button

:text

匹配所有单行文本元框

:password

匹配所有密码框

:radio

匹配所有单选按钮

:checkbox

匹配所有复选框

:submit

匹配所有提交按钮

:image

匹配所有图像

:reset

匹配所有重置按钮

:button

匹配所有按钮

:file

匹配所有文本域

:hidden

匹配所有不可见元素

选择器表单对象属性有哪些？

:enabled

匹配所有可用元素

:disabled

匹配所有不可用元素

:checked

匹配所有选中元素

:selected

匹配所有选中option元素

在jquery中有哪些属性？

attr(name);

获取属性值

attr(properties);

以“名/值对”对象添加属性

attr(key,value);

为所匹配的元素设置属性值

attr(key, function(index, attr));

为所匹配的元素设置属性值

removeAttr(name);

删除属性

css 类属性有哪些?

addClass(class);

添加一个类名 $("p").addClass("selected");

addClass(function(index, class));

添加类名 $('ul li:last').addClass(function() {})

removeClass([class]);

删除指定类

removeClass(function(index, class))

删除指定类

toggleClass(class);

有切换效果，如果有这个属性值就删除如果没有就添加

toggleClass(class, switch);

switch为ture添加class，反之删除

toggleClass(function(index, class), [switch]);

switch为ture添加class，反之删除

html代码？

html()

获取html内容

html(val)

设置html内容的值

html(function(index, html));

设置html内容的值

文本有哪些？

text()

获取元素内容

text(val)

设置内容文本

text(function(index, text))

设置内容文本

关于val有哪些？

val()

获取元素的当前值

val(val)

设置匹配元素的值

val(array)

赋值作用

val(function(index, value))

设置元素值

过滤选择器

eq(index): 获取第n个元素 $("p").eq(1)

first()： 获取第一个元素 $('li').first()

last()：获取最后一个元素 $('li').last()

hasClass(class)：判断是否有给类

filter(expr)：选出表达式匹配的元素

is(expr)：进行判断

map(callback)：$.map()

has(expr)：保留 .has()

not(expr)： .not()

一些方法？

children();

获取子元素

find();

用于查找表达式

next();

获取下一个元素

nextAll();

获取下一个所有元素

parent();

获取父元素

parents();

获取所有匹配元素的祖先元素的集合

prev();

获取前一个元素

prevAll();

获取之前所有同辈元素

siblings(); $("div").siblings()

add(); $("p").add("span")

$("p").add("da");

da

文档处理

append()

中间插入

$("p").append("

appendTo();

$("p").appendTo("div");

prepend() 元素内部前置内容

hello

$("p").prepend("");

hello

$("p").prependTo("");

after(); 在后面追加

before(); 在前面追加

$("p").insertAfter("#foo");

da

da

$("p").insertBefore("#foo");

wrap();

$("p").wrap("

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注

小礼物走一走 or 点赞