zoukankan      html  css  js  c++  java
  • Web前端JQuery面试题(二)

    Web前端JQuery面试题(二)

    Web前端JQuery面试题(二)

    1.请写出jquery的语法?

    <script type="text/javascript">
     $(document).ready(function(){
      // 程序段
     })
    </script>
    
    window.function(){
     // 程序段
    }
    
    前者效率高
    $(function(){
     // 程序段
    })
    

    2.请问什么是DOM对象?

    DOM对象,DOM为文本对象模型,DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象,就是DOM对象。

    var txt = document.getElementById("text").value;
    

    3.请问什么是jquery对象?

    通过jquery自身的方法获取页面元素的对象,就是jquery对象。

    var txt = $("#text").val();
    $("#text").toggleClass("txtClick").html("点击后切换样式");
    

    4.jquery选择器有哪些?

    jquery选择器有:基本选择器,层次选择器,过滤选择器,表单选择器四大类。

    过滤选择器分6种:简单过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象属性过滤选择器。

    基本选择器:

    #id 根据给定的id进行匹配一个元素
    element 根据给定的元素名进行匹配所有元素
    .class 根据给定的类匹配该类的所有元素
    * 匹配所有元素
    selector1,selector2 匹配给定的元素,合并一起
    

    层次选择器:

    ancestor descendant 根据祖先元素匹配所有后代的元素
    祖先和后代的关系
    parent > child 根据父元素匹配所有的子元素
    父子的关系
    prev + next 根据prev元素匹配后面的所有相邻元素
    于.next()相同,prev元素后的下一个元素
    prev ~ siblings 匹配prev元素后的所有兄弟元素
    于.nextAll()相同,prev元素后的所有相邻元素,获取元素后面的全部相邻元素
    .siblings()方法,获取前后所有相邻的元素
    

    简单过滤选择器器:

    :animated 获取执行正在动画效果的元素
    :header 获取所有标题类型的元素
    :lt(index) 获取小于给定索引值的元素
    :gt(index) 获取大于给定索引值的元素
    :eq(index) 获取给定的索引值的元素,从0开始
    :odd 获取奇数的元素
    :even 获取偶数的元素
    :not(selector) 获取除给定选择器外的所有元素
    first() 或 :first 获取第一个元素
    last() 或 :last 获取最后一个元素
    

    内容过滤选择器:

    :contains(text) 获取包含给定文本的元素
    :empty 获取所有不包含子元素或文本的空元素
    如:<div></div>
    :has(selector) 获取含所选择器的所有元素
    :parent 获取含有子元素或文本的元素
    如:<div>dashu</div>, <div><p></p></div>
    

    可见性过滤选择器:

    :hidden 获取所有不可见元素
    :visible 获取所有的可见元素
    

    属性过滤选择器:

    [attribute]
    获取给定属性的元素
    [attribute = value] 
    匹配给定的属性是某个特定值的元素
    [attribute != value] 
    匹配所有不含有特定的属性
    [attribute ^= value]
    匹配给定的属性以某值开始的元素
    [attribute $= value]
    匹配给定的属性以某值结尾的元素
    [attribute *= value]
    匹配有包含某些值的特定元素
    [selector1][selector2]
    同时满足多个条件使用
    

    子元素过滤选择器:

    :nth-child 
    从1开始的,匹配每个父元素下第n个元素
    $("ul li:nth-child(2)"); 获取2 3 4。。
    
    :first-child
    匹配每个父元素下的第一个子元素
    
    :last-child
    匹配每个父元素下的最后一个子元素
    
    :only-child
    匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配
    

    表单对象属性过滤选择器:

    :enabled
    匹配所有可用元素
    :disabled
    匹配所有不可用元素
    :checked
    匹配所有选中元素
    :selected
    匹配所有选中option元素
    

    表单选择器:

    :input
    会获取所有input,textarea,select,button
    :text
    匹配所有单行文本元框
    :password
    匹配所有密码框
    :radio
    匹配所有单选按钮
    :checkbox
    匹配所有复选框
    :submit
    匹配所有提交按钮
    :image
    匹配所有图像
    :reset
    匹配所有重置按钮
    :button
    匹配所有按钮
    :file
    匹配所有文本域
    

    5.请问你能写出dom结构吗?

    html下head,body
    head下title,style
    body下table,div,p,ul
    table下tr
    div下span
    ul下li

    6.给定属性操作,描述作用

    attr(): 可以获取元素的属性和属性值

    attr(key,value):可以设置元素的属性

    removeAttr():可以删除指定的属性

    html(): 获取Html内容
    html(val): 设置Html内容

    text(): 获取元素的文本内容
    text(val): 设置元素的文本内容

    val():
    获取元素的值
    val(val):
    为元素设置值
    val().join(","):
    获取选中的多个选项值,用于获取select中多个选项值

    设置元素样式
    css(name,value); name 样式名称,value样式值

    添加样式
    addClass(class) 和 addClass(class0 class1 ...)

    切换样式
    toggleClass(class) 如果有该类class就删除,如果没有就添加
    进行方法间的切换效果

    删除类
    removeClass(class);

    创建节点元素,动态创建页面元素: $(html)

    var $p = $("<p>dashucoding</p>");
    

    内部插入

    append(content) : 向所选择的元素内部插入内容
    $("body").append($div);
    append(function (index,html)) 同上

    appendTo: 把选择的元素追加到另一个指定的元素中

    appendTo(content)将一个元素插入另一个指定的元素中
    前部分的内容插入其后部分的内容

    $("span").appentTo($("div"));
    

    prepend(coontent): 向每个所选择的的元素内部前置内容
    prepend(function(index,html))
    prependTo(content)

    外部插入

    after(content): 向所选择的元素外部后面插入内容
    after(function)

    before(content): 向所选择的元素外部前面插入内容
    before(function)

    insertAfter(content) 选择的元素插入另一个元素外部后面
    insertBefore(content) 选择元素插入另一个元素外部前面

    复制节点

    clone()复制元素本身和clone(true)复制元素和所有功能

    $(this).clone().appendTo("span"); 和 $(this).clone(true).apendTo("span");
    

    替换节点

    replaceWith(content)
    将选择的元素替换成指定内容

    $("span").replaceWith("<p>dashu</p>");
    

    replaceAll(selector)
    将选择的元素替换成指定的selector的元素

    $("<p>dashu</p>").replaceAll("#text");
    

    包裹节点

    wrap(html): 将所有选择的元素用其他字符串代码包裹起来
    wrap(elem): 将所有选择的元素用其他Dom元素包裹起来

    wrap(fn)
    unwrap() 移除所选元素的父元素或包裹的标记

    wrapAll(html),wrapAll(elem)

    wrapInner(html),wrapInner(elem)

    wrapInner(fn)

    wrap(html), wrapInner(html);
    
    包裹外部元素
    包裹元素内部的文本
    
    <p><span>da</span></p>
    
    $("p").wrap("<b></b>");
    <b><p><span>da</span></p></b>
    
    $("span").wrapInner("<i></i>");
    <p><span><i>da</i></span></p>
    

    遍历元素

    each()方法进行元素的遍历

    删除元素

    remove()删除该元素和empty()清空全部节点或所有后代元素

    结言

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

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

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

    结语

    • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
  • 相关阅读:
    Building Seam 2.0 Application with NetBeans 6.1
    Better Builds with Maven学习笔记
    NetBeans Globel Translation Team Tshirt!
    Participate in MySQLGlassFish Student Contest and Win $500
    NetBeans Globel Translation Team Tshirt!
    Better Builds with Maven学习笔记
    Building Seam 2.0 Application with NetBeans 6.1
    Maven2 的新特性
    Participate in MySQLGlassFish Student Contest and Win $500
    数据库设计及数据缓存
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140324.html
Copyright © 2011-2022 走看看