Web前端JQuery面试题（一）

Web前端JQuery面试题（一）

一：选择器

基本选择器

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

答：

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

案例：查找id为da3的元素

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.后代选择器，子代选择器，next，siblings描述？

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

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面试题（一）

原文地址：https://www.cnblogs.com/dashucoding/p/10409989.html