• 如何操作（增、删、改、查）常见的 HTML 元素呢？（包含原生 js 和 JQuery 语法对照）

    一、通用的操作示例

    1、查询

    根据 id 查询（结果为单个对象）

    		// 原生 js 写法
    		var elementobj = document.getElementById("elementid");
    		// 原生 js 链式查询写法（注意：被查询的对象需为单个唯一对象，若为 list 则返回失败）
    		var elementobj2 = document.getElementById('direction').getElementsByTagName('span');
    		 
    		// JQuery 写法
    		var elementobj = $("#elementid");

    根据类 class 名查询（结果为一组对象，需通过序号来指定单个对象）

    		// 原生 js 写法
    		var elementobjlist = document.getElementsByClassName("elementclassname");
    		 
    		// JQuery 写法
    		var elementobjlist = $(".elementclassname");

    根据属性查询（两种写法结果不同）

    		// 原生 js 写法（若存在多个，仅返回第一个）
    		var elementobj = document.querySelector("div[dataid='elementdataid']");
    		// 原生 js 写法（返回一组元素 list）
    		var elementobjlist = document.querySelectorAll("div[dataid='elementdataid']");
    		 
    		// JQuery 写法（返回一组元素 list）
    		var elementobjlist = $("div[dataid='elementdataid']");

    根据元素类型查询（结果为一组对象，需通过序号来指定单个对象）

    		// 原生 js 写法
    		var elementobjlist = document.getElementsByTagName('div');
    		 
    		// JQuery 写法
    		var elementobjlist = $('div');

    复合查找（查询条件相同，返回均为一个 list）

    		// 原生 js 写法
    		    // 多个属性
    		var elementobjlist = document.querySelectorAll('input[type=radio][name=TestBtn]');
    		var elementobjlist = document.querySelectorAll('input[type=radio][name!=TestBtn]'); // != 不等于
    		    // 类名
    		var elementobjlist = document.querySelectorAll('textarea[class="textareaclassname"]');
    		var elementobjlist = document.querySelectorAll('textarea.textareaclassname');
    		var elementobj0 = elementobjlist[0];
    		var elementobj1 = elementobjlist[1];
    		 
    		// JQuery 写法
    		    // 多个属性
    		var elementobjlist = $('input[type=radio][name=radioname]');
    		    // 类名
    		var elementobjlist = $("textarea[class='textareaclassname']"); // 查询全部包含类名 tbox_mutiLineBox 的 textarea 元素
    		var elementobjlist = $("textarea.textareaclassname");
    		    // 其他
    		var elementobj = $("textarea:first"); // 第一个
    		var elementobj = $("textarea:last"); // 最后一个
    		var elementobjlist("textarea:gt(2)"); // 返回除了前两个元素外的，其他全部满足条件元素集合
    		var elementobjlist("textarea:lt(2)"); // 返回满足条件列表的前两个
    		var elementobjlist("div:not(#divid)"); // 返回全部 div 除了 id 为 divid 的这个元素
    		var elementobjlist("input:disabled"); // 返回全部不可用的 input 元素
    		var elementobjlist("select option:selected"); // 返回全部被选中的元素
    		    // 模糊匹配
    		var elementobjlist("div[name^='t']"); // name 以 t 开头
    		var elementobjlist("div[name$='e']"); // name 以 e 结尾
    		var elementobjlist("div[name*='four']"); // name 包含 four
    		//20230317 添加
    		// 模糊查询
    		// 原生 js
    		var elementobj = Array.from(document.querySelectorAll('a'))
    		    .find(el => el.textContent.includes('返回')); // 返回匹配的第一个元素对象
    		var elementtext = elementobj.innerText; // 取出元素的文本
    		// JQuery
    		var elementobjlist = $("a:contains('返回')");
    		var elementtext = elementobjlist.text(); // 取出全部元素的文本
    		var elementtext = elementobjlist[0].innerText; // 取出第一个元素的文本

    2、修改

    获取和修改样式 style

    		// 原生 js 方式
    		var widthvalue = document.getElementById(selector).style.width; // 获取样式的具体值
    		document.getElementById(selector).style.width='40px';
    		 
    		// JQuery 方式
    		var colorvalue = $(selector).css("color"); // 获取样式的具体值
    		$(selector).css("color","red"); // 修改样式 color 的值为 red 等，允许连续多组
    		$(selector).css({
    		    "color":"white",
    		    "font-size":"20px"
    		});

    获取和修改属性 attribute

    		// 原生 js 方式
    		document.getElementById(selector).setAttribute('style','height:400px;'); // 原先有值的直接替换
    		document.getElementById(selector).removeAttribute('style');
    		document.getElementById(selector).id = "elementid"; // 给属性赋值，注不支持自定义属性
    		var stylevalue = document.getElementById(selector).getAttribute('style');
    		 
    		// JQuery 方式
    		$(selector).attr("style","全部样式"); // 修改属性 style 的值
    		$(selector).attr({"style":"全部样式"});
    		$(selector).removeAttr('style'); // 移除名字为 style 属性
    		$(selector).attr("style"); // 获取属性 style 的值

    修改类 class

    		// 原生 js 方式
    		var classname = document.getElementById(selector).className; // 获取类型属性的值
    		document.getElementById(selector).className = 'classname'; // 若原来有值，将会被替换
    		document.getElementById(selector).className += ' classname2'; // 注意：类名前需加一个空格，且不能省略
    		document.getElementById(selector).classList.add('classname2'); // 在原有类的基础上，添加
    		document.getElementById(selector).classList.replace('classname','classname2'); // 将 classname 替换为 classname2
    		var booleannn = document.getElementById(selector).classList.contains('classname'); // 若包含就返回 true
    		 
    		// JQuery 方式
    		var classname = $(selector).attr("class"); // 获取类型属性的值
    		$(selector).addClass("classname"); // 添加类
    		$(selector).removeClass("classname"); // 删除类
    		$(selector).toggleClass("classname"); // 切换类，如果有则删除，如果没有则添加

    3、删除

    		// 删除指定的元素
    		document.getElementById('elementid').remove();
    		$("#elementid").remove();
    		$("p").remove(".italic"); // 条件删除，目的：删除 class 名为“italic”的全部 p 标签
    		 
    		// 连同父级元素一同删掉（注：此处省略了空对象 null 的判断）
    		document.getElementById('elementid').parentNode.remove();
    		$("#elementid").parent().remove();
    		 
    		// 清空一个元素，即删除一个元素的所有子元素
    		function RemoveAllChildNode(elementid)  {
    		    var elementobj = document.getElementById(elementid);
    		    while(elementobj.hasChildNodes()) // 一直循环到 elementobj 不包含子节点
    		    {
    		        elementobj.removeChild(elementobj.firstChild);
    		    }
    		}
    		$('#elementid').parent().empty(); // JQuery 一句话可搞定

    4、新增

    原生 js 创建元素示例：

    		// 创建一个元素
    		var p_first = document.createElement("p");
    		p_first.id = "pid";
    		p_first.className = "pclassname";
    		p_first.setAttribute('name', 'pname');
    		p_first.innerText='我是一个 p 标签！';
    		//   父元素 elementobj，可能是一个 list，若为单一元素，则后续引用无需加 [0]
    		const elementobj = document.querySelectorAll(selector); 
    		// 在目标元素中插入
    		elementobj[0].appendChild(p_first);//直接添加在末尾
    		// 插入元素写法，入参有四种类型：
    		// beforebegin：目标元素的前面
    		// afterbegin：目标元素中，第一个子节点之前
    		// beforeend：目标元素中，最后一个子节点之后
    		// afterend：目标元素的后面
    		elementobj[0].insertAdjacentElement('beforeend',p_first);
    		// 插入 html 写法，入参有四种类型：
    		// beforebegin：目标元素的前面
    		// afterbegin：目标元素中，第一个子节点之前
    		// beforeend：目标元素中，最后一个子节点之后
    		// afterend：目标元素的后面
    		var p_html = '
    我是一个 p 标签！
    '    ;
    		elementobj[0].insertAdjacentHTML('beforeend',p_html);
    		// 用 p_html 替换目标元素中的全部内容
    		elementobj[0].innerHTML = p_html;

    JQuery 创建元素示例：

    		var elementobj = $('
    这是一个P标签
    '    ;
    		// 五种方法 将 p 标签添加到页面中：
    		// 1、替换目标元素中的内容，原内容将清空
    		//   若查询结果为 elementlist 则全部实体均会被新内容替换
    		$(selector).html('
    这是一个P标签
    '    );
    		// 2、添加到目标元素中的末尾，原内容保留
    		//   若查询结果为 elementlist 则全部实体均会添加 elementobj
    		//   若连续添加多个元素，则会依次排列在已添加元素之后
    		$(selector).append(elementobj);
    		// 3、添加到目标元素中的开头，原内容保留
    		//   若查询结果为 elementlist 则全部实体均会添加 elementobj
    		//   若连续添加多个元素，则会依次排列在已添加元素之前
    		$(selector).prepend(elementobj);
    		// 4、添加到目标元素之前
    		//   若查询结果为 elementlist 则全部实体均会添加 elementobj
    		//   若连续添加多个元素，当前新增元素紧挨目标元素之前，已添加元素列表之后
    		$(selector).before(elementobj);
    		// 5、添加到目标元素之后
    		//   若查询结果为 elementlist 则全部实体均会添加 elementobj
    		//   若连续添加多个元素，当前新增元素紧挨目标元素之后，已添加元素列表之前
    		$(selector).after(elementobj);

    二、不同元素的取值与赋值

    常见元素的例举如下表：（object 代表元素对象）

    元素名 取值（原生 js） 取值（JQuery） 赋值（原生 js） 赋值（JQuery）

    		//表格标题

    		 //表格单元格

    object.innerText // 纯文本

    object.innerHTML // 含 html 标记

    object.text() // 纯文本

    object.html() // 含 html 标记

    object.innerText="文本" // 纯文本

    object.innerHTML="文本" // 含 html 标记

    object.text("文本") // 纯文本

    object.html("文本") // 含 html 标记