前端 ----jQuery的文件操作

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子:

var oUl = document.getElementsByTagName(‘ul‘)[0];
var oLi = document.createElement(‘li‘);
oLi.innerHTML = ‘赵云‘;
oUl.appendChild(oLi);

一.插入操作

知识点1:

语法:

父元素.append(子元素)

解释:追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素

代码如下:

var oli = document.createElement(‘li‘);
oli.innerHTML = ‘哈哈哈‘;
$(‘ul‘).append(‘<li>1233</li>‘);
$(‘ul‘).append(oli);
$(‘ul‘).append($(‘#app‘));

PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作。

知识点2:

语法:

子元素.appendTo(父元素)

解释:追加到某元素 子元素添加到父元素

$(‘<li>天王盖地虎</li>‘).appendTo($(‘ul‘)).addClass(‘active‘)

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

知识点3:

语法:

父元素.prepend(子元素);

解释:前置添加, 添加到父元素的第一个位置

$(‘ul‘).prepend(‘<li>我是第一个</li>‘)

知识点4:

语法:

子元素.prependTo(父元素);

解释:前置添加, 添加到父元素的第一个位置

 $(‘<a href="#">路飞学诚</a>‘).prependTo(‘ul‘)

知识点5:

语法:

兄弟元素.after(要插入的兄弟元素);要插入的兄弟元素.inserAfter(兄弟元素);

解释:在匹配的元素之后插入内容

$(‘ul‘).after(‘<h4>我是一个h3标题</h4>‘)
$(‘<h5>我是一个h2标题</h5>‘).insertAfter(‘ul‘)

知识点6:

语法:

兄弟元素.before(要插入的兄弟元素);要插入的兄弟元素.inserBefore(兄弟元素);

解释:在匹配的元素之后插入内容

$(‘ul‘).before(‘<h3>我是一个h3标题</h3>‘)
$(‘<h2>我是一个h2标题</h2>‘).insertBefore(‘ul‘)

二、克隆操作

语法:

$(选择器).clone();

解释:克隆匹配的DOM元素

$(‘button‘).click(function() {

  // 1.clone():克隆匹配的DOM元素
 // 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

三、修改操作

知识点1:

语法:

$(selector).replaceWith(content);

将所有匹配的元素替换成指定的string、js对象、jquery对象。

//将所有的h5标题替换为a标签
$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)
//将所有h5标题标签替换成id为app的dom元素
$(‘h5‘).replaceWith($(‘#app‘));

知识点2:

语法:

$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);

解释:替换所有。将所有的h2标签替换成p标签。

$(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘)

4、删除操作

知识点1:

语法:

$(selector).remove(); 

解释:删除节点后,事件也会删除(简言之,删除了整个标签)

$(‘ul‘).remove();

知识点2:

语法:

$(selector).detach(); 

解释:删除节点后,事件会保留

 var $btn = $(‘button‘).detach()
 //此时按钮能追加到ul中
 $(‘ul‘).append($btn)

知识点3:

语法:

$(selector).empty(); 

解释:清空选中元素中的所有后代节点

//清空掉ul中的子元素,保留ul
$(‘ul‘).empty()

原文地址:https://www.cnblogs.com/liuafan/p/9525886.html

时间: 2024-10-10 21:41:53

前端 ----jQuery的文件操作的相关文章

前端 ----jQuery的属性操作

jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr() DOM属性操作:对DOM元素的属性进行读取,设置和移除操作.比如prop().removeProp() 类样式操作:是指对DOM属性className进行添加,移除操作.比如addClass().removeClass().toggleClass() 值操作:是对DOM属性value进行读取和

37.前端jQuery之属性操作

属性操作主要分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 HTML属性操作:属性的读取,设置,以及移除,如attr().removeAttr() DOM属性操作:属性的读取,设置,以及移除,如prop().removeProp() 类样式操作:指对DOM属性className进行添加,移除操作.比如addClass().removeClass().toggleClass() 值操作:对DOM属性value进行读取和设置操作.比如html().text().val() att

36.前端jQuery之动画操作及相关演示

1.显示动画 1.1无参数,直接让指定的元素显示出来 $("div").show(); 1.2通过控制宽高,透明度,display属性逐渐显示,指定时间现实完毕 $('div').show(3000); 1.3特定参数类型 $("div").show("slow"); 参数: slow:600ms normal:400ms fast:200ms 1.4动画执行完毕,立即执行回调函数 //show(毫秒值,回调函数; $("div&quo

前端学PHP之文件操作(认真读读)

前面的话 在程序运行时,程序本身和数据一般都存在内存中,当程序运行结束后,存放在内存中的数据被释放.如果需要长期保存程序运行所需的原始数据,或程序运行产生的结果,就需要把数据存储在文件或数据库.一般地,小型数据存储在文件中,海量数据存储在数据库中.本文主要介绍php中目录和文件的基本操作 文件类型 文件一般指存储在外部介质上具有名字(文件名)的一组相关数据集合.用文件可长期保存数据,并实现数据共享 PHP是以UNIX的文件系统为模型的.因此在Windows系统中我们只能获得"file"

前端学PHP之文件操作

前面的话 在程序运行时,程序本身和数据一般都存在内存中,当程序运行结束后,存放在内存中的数据被释放.如果需要长期保存程序运行所需的原始数据,或程序运行产生的结果,就需要把数据存储在文件或数据库.一般地,小型数据存储在文件中,海量数据存储在数据库中.本文主要介绍php中目录和文件的基本操作 文件类型 文件一般指存储在外部介质上具有名字(文件名)的一组相关数据集合.用文件可长期保存数据,并实现数据共享 PHP是以UNIX的文件系统为模型的.因此在Windows系统中我们只能获得"file"

Web前端JQuery基础

JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨     是"write Less,Do More",即倡导      写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模       式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuer

前端-jQuery介绍

目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: 筛选器方法 操作标签 样式操作 位置操作 尺寸: 文本操作 属性操作 文档处理 事件 常用事件 事件绑定 移除事件 阻止后续事件执行 阻止事件冒泡 页面载入 事件委托 动画效果 补充 each .data() jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQ

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

C# WPF Application 下的文件操作

好气哦,电脑好烂,每天花大把的时间在等电脑反应上. 没有钱买新电脑,连组台式机的钱都没有.好气哦. 啊啊啊啊文件操作是什么鬼???C++下我都懵了,C#下好多东西要学!!!我不会!我不会!我不会!!!啊啊啊啊啊啊!!! 怎么办啊?用windows API写我要怎么样移植到Linux下? WINDOWS API的文件操作 一.常用函数 CreateFile 创建.打开文件 ReadFile 读取文件内容 WriteFile 写入文件内容 SetFilePointer 移动文件指针 SetEndOf