用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();匹配的所有元素清空子元素,看清楚是清空不是删除;
用jQuery实现简单的DOM操作的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery(3)——DOM操作
---恢复内容开始--- jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...
- jQuery学习笔记(DOM操作)
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
- jquery学习:选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- jQuery 第二章 实例方法 DOM操作选择元素相关方法
进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(&qu ...
- jquery接触初级-----juqery DOM操作 之二
DOm 操作之: 1.1 children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...
- jQuery基础知识点(DOM操作)
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
- jQuery使用(五):DOM操作之插入和删除元素
插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remov ...
随机推荐
- 采集音频和摄像头视频并实时H264编码及AAC编码
转自:http://www.cnblogs.com/haibindev/archive/2011/11/10/2244442.html 0. 前言 我在前两篇文章中写了DirectShow捕获音视频然 ...
- docker容器互连
三种方式 1.使用容器连接的示例如下: $ docker run --name some-app --link itbilu-mysql:mysql -d application-that-uses- ...
- Vivado的helloword程序:软件工程部分
建立工程 Export结束后,会自动启动SDK.界面如下.可以看到工程浏览器Project Explorer中已经有一个硬件平台hw_platform_0,里面有一系列配置和初始化文件.不要修改这些文 ...
- mysql替换成指定字符
,,, ), 'XXXX' )-- 隐藏从第四位开始的6个字符,包括第四个字符,替换成X
- Jquery学习笔记(10)--ajax删除用户,使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: <!DOCTYPE html> <html lang=&quo ...
- GEEK学习笔记— —程序猿面试宝典笔记(二)
所谓笔记,就是比較个人的东西,把个人认为有点意思的东西记录下来~~ 程序猿面试宝典笔记(一)基本概念 程序猿面试宝典笔记(二)预处理.const和sizeof 程序猿面试宝典笔记(三)auto_ptr ...
- LeetCode 145 Binary Tree Postorder Traversal(二叉树的兴许遍历)+(二叉树、迭代)
翻译 给定一个二叉树.返回其兴许遍历的节点的值. 比如: 给定二叉树为 {1. #, 2, 3} 1 \ 2 / 3 返回 [3, 2, 1] 备注:用递归是微不足道的,你能够用迭代来完毕它吗? 原文 ...
- android6.0 adbd深入分析(二)adb驱动数据的处理、写数据到adb驱动节点
上篇博客最后讲到在output_thread中.读取了adb驱动的数据后.就调用write_packet(t->fd, t->serial, &p)函数,把数据网socket ...
- VirtualBox错误ID: PAEmode解决
今天在导入virtualbox的虚拟机ubuntu系统时,报错,无法打开虚拟机 报错内容如下: 错误 ID: PAEmode 严重: 致命错误 The guest is trying to switc ...
- 【Mac + Appium + Python3.6学习(四)】之常用的IOS自动化测试API总结
环境: Appium:1.9.1 Appium-desktop:1.7.1 Xcode:10.0 IOS:iPhone5S(10.3.3) Mac:10.13.6 ①获取手机屏幕size:长.宽 &l ...