jQuery基础知识点总结(DOM操作)

2020-05-27 18:14:02易采站长站整理

$(selector).append('<div></div>');

(了解)不常用操作:(用法跟append()方法基本一致)


// appendTo()
//作用:同append(),区别是:把$(selector)追加到node中去
$(selector).appendTo(node);

// prepend()
//作用:在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);

// after()
//作用:在被选元素之后,作为兄弟元素插入内容或节点
$(selector).after(node);

// before()
//作用:在被选元素之前,作为兄弟元素插入内容或节点
$(selector).before(node);

7.3 html创建元素(推荐,重点)

①作用:设置或返回所选元素的html内容(包括 HTML 标记)

②设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的 innerHTML属性相同


// 动态创建元素
$(selector).html(‘<span>大方啊</span>');
// 获取html内容
$(selector).html();

 7.4 清空元素


// 清空指定元素的所有子元素(光杆司令)
// 没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀” 把自己(包括所有内部元素)从文档中删除掉
$(selector).remove();

 7.5 复制元素


//作用:复制匹配的元素
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();

【总结】:推荐使用html(“<span></span>”)方法来创建元素或者html(“”)清空元素

8、操作form表单(重点)

    8.1属性操作

①设置属性:


// 第一个参数表示:要设置的属性名称
// 第二个参数表示:改属性名称对应的值
$(selector).attr(“title”, “小花啊”);

②获取属性:


// 参数为:要获取的属性的名称,改操作会返回指定属性对应的值
$(selector).attr(“title”); // 此时,返回指定属性的值

③移除属性:


// 参数为:要移除的属性的名称
$(selector).removeAttr(“title”);

【注意】:checked、selected、disabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性。例如:input和button的disabled特性,以及checkbox的checked特性。

8.2 值和内容

①val()方法:


// 作用:设置或返回表单元素的值,例如:input,select,textarea的值