Web前端JQuery面试题(一)
Web前端JQuery面试题(一)
一:选择器
基本选择器
- 什么是
#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> ]
- 基本选择器
:
?
: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"
匹配所有的可见元素
- 属性选择器的描述?
[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']")
- 选择器-子元素有哪些?
: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("<span>da</span>");
<p></p> <span>da</span>
- 文档处理
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面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端JQuery面试题(二)
Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
- Web前端面试笔试题总结
最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面 ...
- web前端经典面试题大全及答案
阅读目录 JavaScript部分 JQurey部分 HTML/CSS部分 正则表达式 开发及性能优化部分 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在 ...
- 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
##2017.10.30收集 面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
- 【编码题篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
编写一个方法 求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- web前端-----jQuery
web前端之jQuery篇 一 jQuery是什么? [1] jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2] j ...
- 2018最新Web前端经典面试试题及答案
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
随机推荐
- JS 中常见数组API使用方法(join、concat、slice、splice、reverce)
刚接触前端不久,个人觉得学习程序还是需要经常总结的.下面是我的一些知识的归纳总结,如果哪里说得不对的还请各位大神指点! 1.to str (1)String(arr)将数组中的每个元素转为字符串并用逗 ...
- python生成器 获取 目录下文件
# os.walk()和os.list 都是得到所有文件的列表, 如果目录下文件特别多, 上亿了, 我们就需要生成器的方式获取 # 要求目录下面没有目录, 会递归到子目录下面找文件, (如果有子目录可 ...
- weblogic安装升级配置
本次操作是主要围绕如何搭建weblogic服务器升级weblogic软件及配置服务,总共有三大步骤,可划分为六个小步骤: 选取已有环境,准备weblogic压缩包,java包等 准备操作系统环境用户目 ...
- mercury水星路由wifi连接不上的坑
如题,房东发给我的水星路由,是有些bug的,比方说我的手机会偶尔某天连上了没有网络,但是其他wifi设备和有线就没问题. 这种wifi网络很差甚至没有网络的问题会随机在你的wifi设备上发生,你甚至连 ...
- java将pdf文件转为word
import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.Output ...
- Mac更改PHP默认目录
在Mac上搭建了PHP服务器以后,默认的路径为/Library/WebServer/Documents下面,但这让人很不爽,我想修改到自己定义的路径下.经过好一番折腾,终于成功了. PHPEclips ...
- 现网环境业务不影响,但是tomcat启动一直有error日志,ERROR org.apache.catalina.startup.ContextConfig- Unable to process Jar entry [module-info.class] from Jar [jar:file:/home/iufs/apache-tomcat/webapps/iufs/WEB-INF/lib/asm
完整的错误日志信息: 2019-03-19 15:30:42,021 [main] INFO org.apache.catalina.core.StandardEngine- Starting Ser ...
- 第52章:Java操作MongoDB-[Mongo-Java-3.x]
①范例:连接数据库 package cn.mldn; import com.mongodb.MongoClient; import com.mongodb.MongoClientURI; import ...
- PYTHON进阶(3)
学习内容: 1.Python模块redis 2.Python模块memcach 3.Python模块SQLAlchemy 一.Python模块redis redis介绍 二.Python模块memca ...
- 逆向暴力求解 538.D Weird Chess
11.12.2018 逆向暴力求解 538.D Weird Chess New Point: 没有读好题 越界的情况无法判断,所以输出任何一种就可以 所以他给你的样例输出完全是误导 输出还搞错了~ 输 ...