Web前端JQuery面试题（一）

野性酷女 2021-09-18 02:46 472阅读 0赞

![Web前端JQuery面试题][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][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

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

[Web_JQuery]: /images/20210724/8c319923bb844b06bfc22d1cb515e4bb.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1