创建节点

在jQuery中使用$("html字符串")来创建相应的Dom节点;动态创建常用的元素节点,如div,按钮,图片,文本框,单选框,复选框,下拉框,代码中有其常用属性

<script src="jq/jquery-3.5.1.js"></script><script type="text/javascript">        $(function () {           //创建div,span等标签           $("<div>动态创建一个div元素</div>");           //src图片的url alt图片不显示时的文本,利于seo  title 鼠标停留图片上显示的文本               $('<img src="; alt="这是一张美女图" title="美女图片"/>');           //创建表单标签:按钮,单选按钮,复选框,下拉框,其它的与此类似           //type 表示input标签类型   value 表示按钮上显示的文本           $("<input type='button' value='创建一个按钮'/>");           //id 选择器使用  name 需要提交给服务器数据的,必备   value 文本框内容           $('<input id="txtName" name="txtName" type="text" value="文本框"/>');           //单选按钮的name值必须一样   checked 表示默认选中项  value 提交给服务器的值           $('<input id="rdoMale" name="rdGender" type="radio" checked="checked" value="1"/>男');           $('<input type="checkbox" name="ppq" value="1" checked="checked"/>乒乓球');           $('<select name="gj"><option value="1">中国</option></select>');    });        </script>

1 新增方法:前两个添加子元素,后三个添加兄弟元素

1.1 append() 将创建的元素添加到div内部的最后面

1.2 prepend() 将创建的元素添加到div内部的最前面

1.3 appendTo() 将创建的元素追加到某元素内部的后面

1.4 after() 将创建的元素添加到div外部紧挨着的后面

1.5 before() 将创建的元素添加到div外部的最前面

$(function () {    $('#dv1').append("<input type='button' value='append'/>");    $('#dv1').prepend("<input type='button' value='prepend'/>");    $("<input type='button' value='appendTo'/>").appendTo('body');    $('#dv1').after("<input type='button' value='after'/>");    $('#dv1').before("<input type='button' value='before'/>");});

新增元素

2 获取/修改方法

2.1 获取/修改文本或内容:html(),text(),val()三个方法无参数是获取元素的文本内容,传入参数就是设置元素的文本内容

2.1.1 html()用为读取或修改元素的HTML标签

2.1.2 text()用来读取或修改元素的纯文本内容

2.1.3 val()用来读取或修改表单元素的value值,基本只用于input标签

$(function () {            //获取元素的文本内容            console.log($('#dv2').html());            console.log($('#dv2').text());            console.log($('#btn2').val());            //设置元素的文本内容            $('#dv2').html();            $('#dv2').text();            $('#btn2').val('设置input标签按钮的文本');        });

获取元素的文本内容

$(function () {             //设置元素的文本内容            //$('#dv2').html("<button id='btn3'>html设置的按钮</button>");            //$('#dv2').text("<button id='btn3'>html设置的按钮</button>");            $('#btn2').val('设置input标签按钮的文本');});

html()与text()方法取值/设置的区别:

取值:如果内有html的标签则标签与文本一并获取,text只取html标签的文本内容

设置:如果内有html的标签则生成相应的标签,text原样输出

2.2 获取/修改属性的方法

attr('属性名','属性值'):只有一个参数'属性名'是取值;两个参数的是设置值

$(function(){ //获取属性值 console.log($('#btn2').attr('id'));//btn2 //设置属性值 $('#btn2').attr('id','btnSet');});

获取/设置属性值

3 清除方法

3.1 empty() 只删除自己所有的子节点,不包括自身

3.2 remove()删除自身及其所有的子节点

empty()与remove()清除方法的结果

两种方法的区别:

remove()删除自身及子节点,而empty()只会删除(清空)子元素

remove()方法还可接受一个参数,允许对被删的元素进行过滤,而empty()不可以

remove()方法有返回值(刚刚删除的节点),empty()无返回值