用jQuery实现简单的DOM操作

通过jQuery创建元素节点:$oLi = $("<li></li>");这样我们就创建了一个li标签

如果想在元素节点中添加文本的话也挺简单:$oLi = $("<li>文本</li>");这样就可以在元素节点中添加文本了;

当然如果你要写一个动态的文本也可以:$oLi = $("<li>"+index+"</li>");这样子,只要把你所获得的文本赋给变量index就行了;

如果要写一些有属性,类名,id名的元素节点也挺简单:$oLi = $("<li title=‘title‘ class=‘li‘ id=‘lI‘></li>);在添加属性和类名时别忘了和外围的引号区分开来;

向匹配的元素内部追加内容:$("ul").append("<li></li>");

将所有匹配的元素追加到指定的元素中:$("<li></li>").appendTo("ul");

将每个匹配的元素内部前置添加符合的元素:$("<li></li>").prepend("ul");

将元素添加到每个匹配的元素内部前置:$("<li></li>").prependTo("ul);

向匹配的元素后面添加元素,新添加的元素作为目标元素后的紧邻的兄弟元素:$("p").after("<div></div>;

将新建的元素插入到查找到的目标元素后,作为目标元素的兄弟节点:$("<p></p>").insertAfter("span");

在每一个匹配的元素之前插入,做为匹配元素的前一个兄弟节点:$("p").before("<span></span>");

将新建元素添加到目标元素前,做为目标元素的前一个兄弟节点:$("<a href=‘#‘>锚点</a>).inserBefore("ul");

当然如果有不想要的节点咱也可以删除

比如:删除所有匹配的元素 $("ul").remove();匹配的所有元素都删除;

还有:$("ul").empty();匹配的所有元素清空子元素,看清楚是清空不是删除;

时间: 2024-11-04 23:10:53

用jQuery实现简单的DOM操作的相关文章

jquery学习:选择器&amp;dom操作

分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值")  获得与指定id属性值匹配的元素 3.类选择器 *  语法:$(".class的属性值")  获得与指定的class属性值匹配的元素 4.并集选择器: *  语法:$("选择器1,选择器2....")  获得多个选择器选中的所有元素 $(function (){ /

Jquery基础入门-3-JQuery DOM操作-3、4、5

11-JQuery DOM操作-332:00 12-JQuery DOM操作-421:38 13-JQuery DOM操作-520:59 八.节点属性操作</strong><br /> 1.设置获取属性方法:attr(),删除属性的方法:removeAttr().<br /> ◆ alert($(“li:eq(1)”).attr(“title”));//获取第二个li元素的title属性.<br /> ◆ $(“ul”).attr({“title”:”列表”

jQuery基础知识点(DOM操作)

使用jQuery的方式来操作DOM更加的简洁.方便,统一的调用方式方便学习并且可降低学习成本. 1.样式属性操作   1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, “red”); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({“color”: “red”, “font-size”: “30px”}); 2)获取样式属性操作 // 参数

【学习笔记】锋利的jQuery(二)DOM操作

一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev()/prevAll() siblings() 二.元素节点操作 $(html) //创建DOM append()/appendTo() //内部追加 prepend()/prependTo() //内部前置 after()/insertAfter() //后面插入 before()/insertBef

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

JavaScript复习 js登录简单实现 dom操作练习

js登录简单实现: html源代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="denglu.js/dengluyanzheng.js"></script&g

jQuery (三)DOM 操作

一般jquery在web项目的只要作用就是取值和赋值了. 下面了入门下,这些值得获取. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery HTML</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js&qu

jQuery 第二章 实例方法 DOM操作取赋值相关方法

取赋值相关方法:   .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底层原理 是用原生js的 innerHTML 实现的,接下来,来看一下怎么使用它, 有什么区别. 其实基本使用跟innerHTML 差不多,但是正常的jquery 方法来讲,$('ul li').html() 像这样,你选的是ul 下面的全部li,正常来讲,取出的值应该是 有多少个li  就取多少个

封装一些简单的 dom 操作

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .div{ color:yellow; padding:30px; font-size:80px } </style> </head> <body> <div id='d