Web前端JQuery面试题(一)

Web前端JQuery面试题
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”);

    da

    da

    $(“p”).insertBefore(“#foo”);


    wrap();

    $(“p”).wrap(“

    “);


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

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

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

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

    -------------本文结束感谢您的阅读-------------
    达叔小生 wechat
    欢迎您扫一扫上面的微信公众号,订阅我的博客!
    坚持原创技术分享,您的支持将鼓励我继续创作!
    0%