Web前端JQuery面试题

Posted dashucoding

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端JQuery面试题相关的知识,希望对你有一定的参考价值。

技术图片

Web前端JQuery面试题(一)

一:选择器

基本选择器

  1. 什么是#idelement.class*selector1, selector2, selectorN

答:

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

案例:查找idda3的元素

html代码:
<div id="da1"></div>
<div id="da2"></div>
<div id="da3"></div>

jquery代码:
$("#da3");

结果:
[ <div id="da3"></div> ]

html代码:
<div id="da:q"></div>

jquery代码:
$("#da\:q");

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

案例,查找div元素:

html代码:
<div> da1 </div>
<div> da2 </div>
<p>da3</p>

jquery代码:
$("div");

结果:
[ <div> da1 </div> , <div> da2 </div> ]

根据给定的类匹配元素

html代码:
<div class="dashu"> dashu </div>
<div class="da"> da </div>

jquery代码:
$(".da");

结果:
[ <div class="da"> da </div> ]

匹配所有元素*

html代码:
<div> 1 </div>
<p> 2 </p>

jquery代码:
$("*");

结果:
[ <div> 1 </div>, <p> 2 </p> ]

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

html代码:
<div class="da"></div>
<p></p>
<span></span>

jquery代码:
$(".da, p, span");

结果:
[ <div class="da"></div>, <p></p>, <span></span> ]

层级选择器

2.后代选择器,子代选择器,nextsiblings描述?

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

html代码:
<table>
 <input id="da"></input>
 <input id="da2"></input>
 <p></p>
</table>

jquery代码:
$("table input");

结果:
[ <input id="da"></input>, <input id="da2"></input> ]

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

html代码:
<table>
 <input id="da"></input>
 <p>
 <input id="da2"></input>
 </p>
 <p></p>
</table>

jquery代码:
$("table > input");
结果:
[ <input id="da"></input> ]

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

html代码:
<table>
 <p>
 <input id="da"></input>
 </p>
 <p>
 <input id="da2"></input>
 </p>
 <p></p>
</table>

jquery代码:
$("p + input");

结果:
[ <input id="da"></input>, <input id="da2"></input> ]

匹配prev元素后的所有siblings元素:
找出同辈的元素

html代码:
<table>
 <p>
 <input id="da"></input>
 </p>
 <p>
 <input id="da2"></input>
 </p>
 <p></p>
</table>
<input id="da3"></input>

jquery代码:
$("table ~ input");

结果:
[ <input id="da3"></input> ]
  1. 基本选择器:?
:first :last :not :even :odd :eq :gt :lt :header :animated

获取第一个元素

<ul>
 <li>1</li>
 <li>2</li>
</ul>

$("li").first();
或
$("li :first");

[ <li>1</li> ]

获取最后一个元素

<ul>
 <li>1</li>
 <li>2</li>
</ul>

$('li').last();
$("li :last");

[ <li>2</li> ]

去除所有与给定选择器匹配的元素
查找所有未选中的 input 元素

<input name="da1" />
<input name="da2" checked="checked" />

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

[ <input name="da1" /> ]

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

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:even")

[ <tr><td>0</td></tr>, <tr><td>2</td></tr> ]

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

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

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:odd")

[ <tr><td>1</td></tr> ]

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

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:eq(1)")

[ <tr><td>1</td></tr> ]

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

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:gt(0)")

[ <tr><td>1</td></tr>, <tr><td>2</td></tr> ]

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

<table>
  <tr><td>0</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
</table>

$("tr:lt(2)")

[ <tr><td>0</td></tr>, <tr><td>1</td></tr>]

匹配标题元素

<h1>1</h1>
<p>1</p>
<h2>2</h2>
<p>2</p>

$(":header");

[ <h1>1</h1>, <h2>2</h2>] 

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

4.内容选择器的描述?

:contains :empty :has :parent

匹配包含给定文本的元素
匹配所有不包含子元素或者文本的空元素
匹配含有选择器所匹配的元素的元素
匹配含有子元素或者文本的元素

5.可见性选择器

:hidden :visible

匹配所有不可见元素

display:none
type="hidden"

匹配所有的可见元素

  1. 属性选择器的描述?
[attribute]
[attribute = value] 
匹配给定的属性是某个特定值的元素
[attribute != value] 
匹配所有不含有特定的属性
[attribute ^= value]
匹配给定的属性以某值开始的元素
[attribute $= value]
匹配给定的属性以某值结尾的元素
[attribute *= value]
匹配有包含某些值的特定元素
[selector1][selector2]
同时满足多个条件使用
$("div[id]");

<div>
 <p></p>
</div>
<div id="da"></div>

获取
[<div id="da"></div>]
$("div [id='da']")
  1. 选择器-子元素有哪些?
:nth-child 
从1开始的,匹配父元素下第n个元素
$("ul li:nth-child(2)"); 获取2 3 4。。

:first-child
匹配每个父元素下的第一个子元素

:last-child
匹配每个父元素下的最后一个子元素

:only-child
匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配
  1. 表单元素有哪些?
:input
会获取所有input,textarea,select,button
:text
匹配所有单行文本元框
:password
匹配所有密码框
:radio
匹配所有单选按钮
:checkbox
匹配所有复选框
:submit
匹配所有提交按钮
:image
匹配所有图像
:reset
匹配所有重置按钮
:button
匹配所有按钮
:file
匹配所有文本域
:hidden
匹配所有不可见元素
  1. 选择器表单对象属性有哪些?
:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有选中元素
:selected
匹配所有选中option元素
  1. 在jquery中有哪些属性?
attr(name); 
获取属性值
attr(properties);
以“名/值对”对象添加属性
attr(key,value);
为所匹配的元素设置属性值
attr(key, function(index, attr));
为所匹配的元素设置属性值
removeAttr(name);
删除属性
  1. 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,反之删除
  1. html代码?
html()
获取html内容
html(val)
设置html内容的值
html(function(index, html));
设置html内容的值
  1. 文本有哪些?
text()
获取元素内容
text(val)
设置内容文本
text(function(index, text))
设置内容文本
  1. 关于val有哪些?
val()
获取元素的当前值
val(val)
设置匹配元素的值
val(array)
赋值作用
val(function(index, value))
设置元素值
  1. 过滤选择器
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()
  1. 一些方法?
children();
获取子元素
find();
用于查找表达式
next();
获取下一个元素
nextAll();
获取下一个所有元素
parent();
获取父元素
parents();
获取所有匹配元素的祖先元素的集合
prev();
获取前一个元素
prevAll();
获取之前所有同辈元素
siblings(); $("div").siblings()
add(); $("p").add("span")

$("p").add("<span>da</span>");

<p></p> <span>da</span>
  1. 文档处理
append()
中间插入
<p></p>
$("p").append("<div></div>");
<p><div></div></p>

appendTo();

<p></p>
<div><div>

$("p").appendTo("div");
<div><p></p></div>
prepend() 元素内部前置内容
<p>hello</p>

$("p").prepend("<b></b>");

<p><b></b>hello</p>

$("p").prependTo("<b></b>");

<b><p></p></b>
after(); 在后面追加
before(); 在前面追加

$("p").insertAfter("#foo");
<div id="foo">da</div><p>da</p>

$("p").insertBefore("#foo");
<p></p><div id="foo"></div>
wrap();

$("p").wrap("<div></div>");

<div><p></p></div>

结言

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

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

达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

以上是关于Web前端JQuery面试题的主要内容,如果未能解决你的问题,请参考以下文章

Web前端JQuery面试题

Web前端JQuery面试题

jQuery经典面试题及答案精选

jQuery经典面试题及答案精选(转)

web前端开发JQuery常用实例代码片段(50个)

web前端整套面试题--网易的面试题