jQuery常见面试题之DOM操作详析

前言

关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。

面试题一：JQ中html()、text()和val()区别？

面试题二：JQ中find()、has()和filter()区别？

面试题三: closet()和parents()区别？

答案请在文中查找...

DOM操作有三类：DOM-core、HTML-DOM 、CSS-DOM

一、插入节点

我们用的最多的就是append和apendTo，其实共有8种方法。


插入节点

二、删除节点

remove() ：删除节点，并删除元素节点绑定的事件。

empty() ：清空节点元素的内容，类似$().html(' ') 。

三、克隆（复制）节点

$().clone() ，只复制节点，不复制方法和事件。

添加clone(true) ，不仅复制节点，也复制方法，也叫深度克隆。

四、替换节点

$('new').replaceWith('old')  ，返回new元素。

$('old').replaceAll('new') ，返回old元素。

如果在替换之前，已为元素绑定事件，替换后原有绑定事件将会被替换的元素一起消失，需要在新元素上重新绑定事件。

五、包裹节点

$('span').wrapAll('<div>') ：将所有元素用一个元素包裹。

wrap() ：将所有元素单独包裹。

wrapInner：包裹元素内容。

unwrap() ：删除包裹，删除父元素，不包含body。

六、遍历节点

children() ：只考虑子元素，不考虑后代元素。

next() ：同辈紧邻后面一个元素。

nextAll() ：同辈紧邻后面所有兄弟元素。

prev() ：同辈紧邻前一个兄弟元素。

prevAll() ：同辈紧邻前所有兄弟元素。

siblings() ：同辈所有兄弟元素。

find('span') ：返回被选元素的后代元素，括号内必填写，如果查找所有后代使用 "*"，起查找作用。

filter('div') ：指定选择器的xx元素，括号内必填写，符合条件的同级元素，非后代元素，起过滤作用。

has(‘div') ：符合条件的后代元素，不包含自身，括号内必填写，起过滤作用。

parents() ：获取所有祖先元素，参数为筛选条件。

closest(‘.new') ：用来取得最近的匹配元素，包括自身。首选检查自身是否符合，如果符合返回元素本身；如果不匹配，向上查找父元素，逐级向上直到匹配到选择器的元素。如果什么没找到，返回一个空的jq对象。必须填写筛选条件，且只能找到一个元素。

parentsUntil() ：截止到xx位置的祖先节点。

七、属性及样式操作

$().css() ：修改css样式。设置后，显示为内联样式。

$().attr('title') ：获取title属性。

$().removeAttr(title') ：删除title属性。

$().addClass(‘new') ：添加class的名字，不是选择器，故不是“.new”。

$().removeClass(‘new') ：与上相反。

$().toggle() ：

$().toggleClass() ：

$().hasClass() ：判断某元素是否有某个class。

八、内容操作

$().html() ：获取内容，含html标签，可以用于XHTML，但不能用于XML。

$().text() ：获取文本内容，不含标签。可以用于XHTML和XML，支持所有浏览器，原生innerText火狐不支持。

$().val() ：获取表单元素的内容。

下面说说三者的异同点：


异同点

九、其它节点操作

$('div').slice(1,4) ，获取满足条件的div。

$('div').add('p').css() ,自由组合添加样式，给div和p都添加公有的样式。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • js/jQuery对象互转(快速操作dom元素)

    复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);

  • jquery 操作DOM的基本用法分享

    例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<

  • jQuery DOM操作小结与实例

    DOM操作的分类:DOM CORE(核心).HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法,都是dom core的组成部分. 2. HTM

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

  • jQuery使用手册之二 DOM操作

    jQuery使用手册之二 DOM操作

    属性我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • jQuery常见面试题之DOM操作详析

    jQuery常见面试题之DOM操作详析

    前言 关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了. 面试题一:JQ中html().text()和val()区别? 面试题二:JQ中find().has()和filter()区别? 面试题三: closet()和parents()区别? 答案请在文中查找... DOM操作有三类:DOM-core.HTML-DOM .CSS-DOM 一.插入节点 我们用的最多的就是append和apendTo,其实共有8种方法. 插入节点 二.删

  • jQuery原理系列-常用Dom操作详解

    1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve

  • Vue常见面试题整理【值得收藏】

    看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题.(都是一些基础的vue面试题,大神不用浪费时间往下看) 一.对于MVVM的理解? MVVM是Model-View-ViewModel的缩写. Model :代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. View :代表UI组件,它负责将数据模型转化成UI展现出

  • GO必知必会的常见面试题汇总

    GO必知必会的常见面试题汇总

    目录 引言 值类型和引用类型 值类型有哪些? 引用类型有哪些? 值类型和引用类型的区别? 垃圾回收 一图胜千言 堆和栈 栈 堆 切片 比较 比较的详解 深拷贝和浅拷贝 操作对象 区别如下: new和make new 特点 举个例子: 使用技巧 make make函数的函数签名 特点 使用技巧 小结:new与make的区别 go的map实现排序 解决思路 代码实现: 运行结果 逃逸分析 最后,听我说 引言 今年互联网的就业环境真的好糟糕啊,好多朋友被优化. 我们平常在工作中除了撸好代码,跑通项目之

  • JAVA中String介绍及常见面试题小结

    字符串广泛应用 在 Java 编程中,在 Java 中字符串属于对象,Java 提供了 String 类来创建和操作字符串. 深刻认识String 1)String为字符串常量:即String对象一旦创建之后该对象是不可更改的.(源码如下) String str1 = "abc"; String str2 = "abc"; String str3 = new String("abc"); System.out.println(str1 == st

  • java对象拷贝常见面试题及应答汇总

    为什么要使用克隆? 想对一个对象进行处理,又想保留原有的数据进行接下来的操作,就需要克隆了,Java语言中克隆针对的是类的实例. 如何实现对象克隆? 有两种方式: 实现Cloneable接口并重写Object类中的clone()方法:实现Serializable接口,通过对象的序列化和反序列化实现克隆,可以实现真正的深度克隆,代码如下: import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; impor

  • python3字符串输出常见面试题总结

    考察对于知识的理解,除了实际的代码运用,还有一种方法就是问答类的题型.不同于普通的概念叙述,小编认为即使是面试题也会带有一些数学题目的影响,不知道大家有没有想过,如果面试题是字符串方面的我们该如何作答呢?一些小伙伴也要迎来寒假的实习,小编整理了这方面的题目,我们来看看有哪些面试题. 1.将一个字符串str的内容颠倒过来,并输出.str的长度不超过100个字符. x=input("") x=x[::-1] #列表切片,逆序输出 print(x) 2.字符串的输入输出处理. n=int(i

  • Java泛型常见面试题(面试必问)

    1.泛型的基础概念 1.1 为什么需要泛型 List list = new ArrayList();//默认类型是Object list.add("A123"); list.add("B234"); list.add("C345"); System.out.println(list); for(int i=0;i<list.size();i++){ //若要将list中的元素赋给String变量,需要进行类型转换,不然会报Incompati

  • 前端常见面试题之async/await和promise的区别

    目录 async async函数定义 作用 async 函数中 return 值如何接受 方式一 方式二 await await定义 作用 关于await的注意点 [[promiseValue]] [promiseValue]哪些能赋值 三者的区别 为什么async/await更好? 总结 async async函数定义 async函数是使用关键字声明的函数.async 是“异步”的简写,所以应该很好理解 async 用于申明一个 function 是异步的. 作用 用于解决:异步程序产生的bu

  • MySQL索引的一些常见面试题大全(2022年)

    目录 为什么要建立索引? 哪些情况适合建立索引? 那么哪些情况下适合建索引? 哪些情况下不适合建索引? 为什么索引是使用B+树?(重点) 索引分为那几类? 什么是聚簇索引?(重点) 使用聚簇索引的优缺点?(知道) 为什么推荐使用自增主键作为索引?(知道) 什么叫回表?(重点) 什么叫索引覆盖?(重点) 什么是最左前缀原则?(重点) MySQL索引失效的几种情况(重点) 常见的索引优化手段有哪些? 谈一下你对MySQL索引的理解? 总结 为什么要建立索引? 当在非常大的表中进行查询,如果数据库进行

随机推荐