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");
dada
$("p").insertBefore("#foo");
wrap();
$("p").wrap("");
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通 简书博客： 达叔小生 https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞
转载于:https://my.oschina.net/xiaomaomi1997/blog/3012734