用 js 的 selection range 操作选择区域内容和图片

原创文章,转载请注明出处并保留地址.原文地址:http://www.cnblogs.com/muge10/p/6723894.html 最近在做编辑器相关的东西,遇到一个需求,用户在编辑器中插入或者粘贴的图片要支持点击以后,可以按 Backspace 键或者 Delete 键删除掉. 刚开始拿到这个需求的想法是调用编辑器自带的删除图片方法删掉图片,但后来查看源码发现这个方法是编辑器内部方法,并没有暴露出来,于是第一个思路走不通了. 第二个思路是在编辑器的顶层容器里监听 keyup 事件,然后判断…

Dom选择器及操作文本内容

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 注:一般说的JS让页面动起来泛指JavaScript和Dom 1.选择器--id属性选择器 <!DOCTYPE html><html lang="en">…

js,jQuery数组常用操作小结

一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); 结果 a:[2,3,4,5] b:1 (2) unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); 结果 a:[-2,-1,1,2,3,4,5] b:7 注:在IE6.0下测试返回值总为undefi…

GSAP JS基础教程--TweenLite操作元素的相关属性

今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! 注:要一条条撤销注释看效果哦!!!!!!!!!! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"…

js基础总结01 --操作DOM

1.选择对象通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByClassName('p')://类似的还有 document.getElementsByName.document.getElementsByName等通过css选择器来返回第一个匹配的dom节点:document.querySelector('#p1'): 通过css选择器来返回一个类数组的对象集合…

Jquery操作文本内容（三个方法：html()、text()、var()）

Jquery操作文本内容(三个方法:html().text().var()) 一.html()获取和设置文本内容和标签 1.获取标签里的结构和内容 $("ul").html() //获取标签里所有的结构和内容 2.设置标签里的文本内容 $(".a").html("你好,世界") //设置标签里的id是a里的文本内容 $("li").html("<span>你好,世界<span>")…

Gremlins.js – 模拟用户随机操作的 JS 测试库

Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输入随机数据,或者将鼠标移动到特别的元素. Gremlins.j 的目的是触发 JavaScript 错误或使应用程序失败.如果它不能让你应用程序崩溃,那么说明你的应用程序已经足够强大了,可以发布给真正的用户使用. 您可能感兴趣的相关文章 Metronic – 基于 Bootstrap 响应式后台管理…

js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var LG=(function(lg){ var objURL=function(url){ this.ourl=url||window.location.href; this.href="";//?前面部分 this.params={};//url参数对象 this.jing="&q…

js修改:before、:after的内容

一.js控制伪元素content内容二. --------------2016-7-20 13:34:03-- source:[1]js如何控制伪元素的内容…

js对字符串的操作

js对字符串的操作 concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定位置的字符. lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 . match() – 检查一个字符串是否匹配一个正则表达式. substring() – 返回字符串的一个子串.传入参数是起始位置和结束位置. replace()…

JS与PHP数组操作的不同

JS与PHP数组操作的不同 1.JS 中向数组中添加元素,必须指定下标 2.php中向数组中添加元素,可以不指定下标(追加) 3.JS 中数组元素的下标,是连续 4.PHP中数组元素的下标,可以不连续 5.JS中数组的长度是最大下标加1,数组名.length 人吃饭 6.PHP中数组的长度是数组中元素的个数,使用count(数组名) 吃饭(哪个人) 7.JS中为数组添加元素,数组必须在添加元素之前存在 8.PHP中为数组添加元素时,数组不必预先存在(PHP中添加元素时,即创建了数组) 示例:…

一个简单易懂的javascrip selection&range小案例

在制作富文本编辑器,尤其是在制作以div元素为编辑器区域时,当鼠标离开编辑区域以后会失去焦点,失去选区,这时候就要通过selection&range来重新设置选区.[以下代码尚未考虑IE低版本,请在现代浏览器下测试学习] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>range</title>…

SQL写操作设置内容（数组转字符串）

SQL写操作设置内容 (数组转字符串) SQL set内容 SQL操作数组转字符串 SQL写操作 set内容 (数组转字符串) [ 封装方法 ] function getSqlSet( $data ){ $Str = ""; foreach( $data as $k => $v ){ $Str.= $k."='".$v."',"; } $Str = substr($Str,0,-1); return $Str; } 如执行…

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理.在游戏中的资源大多数都是加载图片. 一.canvas怎么加载图片? canvas提供3种图片加载的API调用方式. drawImage( image, dx, dy ) drawImage( image, dx, dy, dw, dh…

如何在js或者jquery中操作EL表达式的一个List集合

------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型或者内存地址首先说明,从el表达式拿到的复杂类型,包括内存地址,js是无法直接进行操作的,所以得转换为简单类型,不是直接拿内存地址操作 eval也操作不了内存地址我先说明思路:就是先用jstl转换为为简单类型,然后对简单类型做操作,示例不写的复杂,看一下就好: /*最牛的判断方式!!!!!!!*…

js中的DOM操作汇总

一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attribute,属性 Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = document.createTe…

go语言之进阶篇通过range遍历channel内容

1.通过range遍历channel内容 package main import ( "fmt" ) func main() { ch := make(chan int) //创建一个无缓存channel //新建一个goroutine go func() { for i := 0; i < 5; i++ { ch <- i //往通道写数据 } //不需要再写数据时,关闭channel close(ch) //ch <- 666 //关闭channel后无法再发送数…

js实现链式操作

前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回20 当时正在问我原型链的问题,所以面试官直接用我写的person问的,我当时是这么实现的: function Person(){}; var person = new Person(); person.set = function(n){ return { get:function(){ retur…

辛星跟您玩转vim第四节之操作文本内容

首先值得一提的是.我的vim教程pdf版本号已经写完了.大家能够去下载,这里是csdn的下载地址:csdn下载,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http://download.csdn.net/detail/xinguimeng/7714213 .当然.假设你是百度网盘的忠有用户.也能够借助于百度网盘,我也同步上传到百度网盘了,下载地址例如以下:百度网盘下载 .假设地址挂了,能够在浏览器中输入:http://pan.baidu.com/s/1sj9CLX…

js 实现点击复制文本内容

js 实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" title="点击复制">张三</span></td></tr> <tr><td>姓名:<span onclick="copyContent(this);" title="点击复制&qu…

JS 数组间的操作

JS 数组间的操作(交集,并集.差集) 以下是js数组之间常用的操作,如交集,并集.差集等. 迭代 each是一个集合迭代函数,可以将一个函数作为参数和一组可以选的参数.依次将集合的每一个元素和可选参数用函数进行计算. /**fn 进行迭代判定的函数 *零个或多个可选的用户自定义参数 */ Array.prototype.each = function(fn){ fn = fn || Functuon.K; var a = []; var args = Array.prototype.slice…

js中的json操作

js中的json操作 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 本文主要是对JS操作JSON的要领做下总结. 在JSON中,有两种结构:对象和数组. 1. 一个对象以“{”(左括号)开始,“}”(右括号)结束.每个“名称”后跟一个“:”(冒号):“‘名称…

Java&Selenium调用JS实现高亮被操作页面元素高亮

Java&Selenium调用JS实现高亮被操作页面元素高亮 /* * the method of invoking js to do something * * @author davieyang * @create 2018-08-05 1:37 */ package util; import org.openqa.selenium.*; import java.util.Arrays; public class JavaScriptToDo { /** * * @param driver…

在js中将map对象转换成json 和 js对cookie的操作

在js中将map对象转换成json //msp转objectlet obj= Object.create(null); for (let[k,v] of map) { obj[k] = v; }//object转json JSON.stringify(obj); js对cookie的操作 2020-07-022020-07-02 11:49:13阅读 1490 cookie是网站为了标识用户身份而存储在用户本地终端上的数据,一般这些数据都会进行加密,以防止数据篡改而造成用户信息泄露.cook…

将PPT文件内容转换为图片放在Email邮件正文中发送

通过Email推送统计报告.一般除了要求将PPT报告文件作为附件发给用户,同时希望将报告内容在邮件中直观展示. 一份统计报告中经常包含柱状图.饼图.好看的图表,这些信息要直接在Email中展示比较复杂.本文推荐一种方式:将PPT图表内容转换为高保真的图片,将图片放到Email中发送,在不丢失用户体验的前提下,工作量尽可能小. 一. 将PPT报告转换为PNG图片文件. 有两种方式:一种是采用POI组件将图片绘制到剪切板再输出为图片文件:另一种方式是通过COM接口调用PowerPoint的接口,使用…

python scrapy爬取知乎问题和收藏夹下所有答案的内容和图片

上文介绍了爬取知乎问题信息的整个过程,这里介绍下爬取问题下所有答案的内容和图片,大致过程相同,部分核心代码不同. 爬取一个问题的所有内容流程大致如下: 一个问题url 请求url,获取问题下的答案个数(我不需要,因为之前获取问题信息的时候保存了问题的回答个数) 通过答案的接口去获取答案(如果一次获取5个答案,总计100个答案,需要计算的出访问20次答案接口)[答案的接口地址如下图所示] 答案接口返回的内容保存到mysql 提取内容中的图片地址,保存到本地爬取代码: 从mysql库中查到qu…

C#操作word之插入图片

假如我们导出一份简历到word文档,那势必可能要同时导出我们包含的简历,下面就来试一下如何和通过C#代码,将图片插入到word文档中. 为了简便起见,就简单一点.类似下面这样的姓名张三照片 protected void InsertPtctureToExcel() { Word.Application app = null; Word.Document doc = null; try { object oMissing = System.Reflection.Missing.Value…

JS实现动态瀑布流及放大切换图片效果(js案例)

整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击图片放大.上下切换效果.HTML布局写的很简单,图片加载主要是在JS中通过访问自定义的JSON字符串来实现.动态瀑布流的原理简单理解就是把新需要加载的图片放在上一排总高度最小的图片或模块下面,实现参差不齐的多栏布局效果.具体效果如下: 做这个案例我用了之前自己封装的框架,所以小伙伴需要到我的另一篇文…

scrapy操作mysql/批量下载图片

1.操作mysql items.py meiju.py 3.piplines.py 4.settings.py -------------------------------------------------------------------------------------------------------------------------- 批量下载图片.分类网站:https://movie.douban.com/top250 需求:按电影分类,获取里面的演职员图片.并存入各自的…

PHP限制HTML内容中图片必须是本站的方法

本文实例讲述了PHP限制HTML内容中图片必须是本站的方法.分享给大家供大家参考.具体实现方法如下: 1. PHP代码如下: <?php $dom = new DOMDocument; $dom->loadHTML(file_get_contents('input.html')); $xpath = new DOMXpath($dom); $img = $xpath->query('//img'); foreach($img as $i) { $url = parse_url($i-&g…

【用 js 的 selection range 操作选择区域内容和图片】的更多相关文章