首页 > 编程知识 正文

web前端开发笔试题,js和jquery面试题及答案

时间:2023-05-04 19:32:41 阅读:150881 作者:1247

Web前端JQuery面试问题(1) )。

一)选择器

基本选择器

#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代码:

$ () ) );

结果:

[

一、二

]合并每个选择器匹配的元素,然后一起返回。

html代码:

jquery代码:

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

结果:

[

]电平选择器

2 .后代选择器、子选择器、next、siblings的说明?

在祖先元素下匹配所有后代元素

html代码:

jquery代码:

$('table input ' );

结果:

[,]

匹配父元素下的所有子元素:

html代码:

jquery代码:

$('table input ' );

结果:

[]

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

html代码:

jquery代码:

$(pinput );

结果:

[,]

与prev元素匹配后的所有siblings元素:

发现伙伴的要素

html代码:

jquery代码:

$(table )输入;

结果:

[]

基本选择器:

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

获取第一个元素

12$(Li ) ).first );

或者

$ (Li :第一次);

[

1 )获取最后一个元素

12$(Li ) ).last );

$(Li:last );

[

2 )删除与给定选择器匹配的所有元素

查找所有未选择的输入元素

$(input:not ) :checked ) )

[]

所有索引值都与偶数元素匹配

012 $ (tr :事件) )。

[

0,2 )所有索引值与奇数的元素一致

所有索引值都与奇数元素匹配

012$(tr:odd ) )。

[

1 )匹配给定索引值的元素

012$(tr:eq ) (1) ) )

[

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

012$(tr:gt )0) )

[

1,2 )使小于给定索引值的所有要素一致

012$(tr:lt )2) )

[

0,1 )与标题要素一致

1 1

2 2

$ (' :标题);

[

1,2 )与运行动画效果的所有元素一致

4 .内容选择器的说明?

3360容器3360 empty : has :零件

匹配包含指定文本的元素

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

选择器与包含匹配元素的元素匹配

与子元素或文本匹配的元素

5 .可见性选择器

:隐藏式:可视化

匹配所有不可见元素

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 点赞

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。