1.添加到指定元素 内部 的后面 $(A).append(B); // 把 B 追加到 A $(A).appendTo(B); // 把 A 追加到 B 2.添加指定元素 内部 的前面 $(A...(A).before(B); // 把 B 放到 A 的前面 $(A).insertBefore(B); // 把 A 放到 B 的前面 5.移除和清空元素 remove() // 从 DOM 中删除所有匹配的元素...empty() // 删除匹配的元素集合中所有的子节点 6.关于登录时验证用户名或者密码不能为空的例子 <!...for (var i = 0; i < $check_s.length; i++) { var tmp = $check_s[i]; // 遍历所有的...content-Type" charset="UTF-8"> 我的事件冒泡
Javascript 通过getElementById获取节点，判断浏览器的兼容性，对于不支持FileReader接口的浏览器将给出一个提示并禁用input，否则监听input的change事件。...在readFile中，我们首先获取file对象，然后通过file的type属性来检测文件类型，我们当然只允许选择图像类型的文件，然后我们new一个FileReader实例，并调用readAsDataURL...方法来读取选中的图像文件，最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片。...FileReader的方法和事件 参数/事件 描述 方法 abort 中断读取 readAsText(file, [encoding]) 将文件读取为文本 该方法有两个参数，其中第二个参数是文本的编码方式...小文件指图像与html等格式的文件。
1 2 3 4 5 jquery.../1.9.0/jquery.js"> 6 7 8 <div id="edit" contenteditable...); 100 101 // 加载 图像文件...return; 112 } 113 114 // 创建 FileReader...对象 并调用 render 函数来完成渲染. 115 var reader = new FileReader(); 116
手头上有几个小项目用到了easyUI，一开始决定使用easyUI就注定了项目整体上前后端分离，基本上所有的请求都采用Ajax来完成。...这里主要采用了HTML5中的FileReader对象来实现，关于FileReader对象，如果小伙伴们不了解，可以查看这篇博客http://blog.csdn.net/zk437092645/article...-3.2.1.js"> 用户名： 用户图像：FileReader来实现，不支持FileReader的浏览器则采用微软的滤镜来实现（注意给图片上传的input标签设置onchange函数）。... 用户名： 用户图像
，给拖放的源元素添加ondragstart监听事件，在事件触发时把源元素里的内容追加至dataTransfer对象中。...最后，把添加监听事件的处理函数DragStart()追加到window.onload事件中。...把添加监听事件的处理函数DragOver()追加到window.onload事件中，对于目标元素preventDefault()，必须取消浏览器的默认处理，否则将无法实现拖放功能。...window.addEventListener("load", DragOver, false); 给拖放的目标元素添加ondrop监听事件，事件触发时获取dataTransfer对象中的数据，并追加到目标元素中...把添加监听事件的处理函数Drop()追加到window.onload事件中。
然后，可以在自定义按钮上绑定点击事件，在这个点击事件里面对原生上传按钮进行操作，可以像下面这样： let file = document.querySelector('#fileInput'); file.click...这个可以通过FileReader对象就可以做到。...通过实例化一个FileReader，调它的readAsDataURL并把File对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。）...读取得到的base64二进制格式 如果不使用jQuery，没有问题，直接使用ajax发送就好；如果使用jQuery，要设置两个属性为false，因为jQuery会自动把内容做一些转义，并且根据data...自动设置请求mime类型，这里告诉jQuery直接用xhr.send发出去就行了。
$(":radio") 查找所有的单选按钮 复选框选择器 $(":checkbox") 查找所有的复选框 提交按钮选择器 $(":submit") 查找所有的提交按钮 图像域选择器 $(":image...") 查找所有的图像域 重置按钮选择器 $(":reset") 查找所有的重置按钮 按钮选择器 $(":button") 查找所有的按钮 文件域选择器 $(":file") 查找所有的文件域 追加的内容，可以是字符、HTML元素标记。...包装集 console.log($(p)); /* 添加元素 */ //如果元素本身不存在，先创建元素再追加，会将元素追加到指定位置 //prepend 得到指定元素，并在元素内部最前面追加内容...事件 ready加载事件 预加载事件，当页面的DOM结构加载完毕后再执行。
JQuery 一.JQuery基础语法 1.概念 JQuery是javaScript的一个库，Jquery基于javascript开发出来。目的就是为了简化javascript的开发。...查找所有提交按钮: $(":submit") $(:image) 匹配所有图像域 匹配所有图像域: $(":image") $(:reset) 匹配所有重置按钮...事件 jQuery事件是对JavaScript事件的封装，分为基础事件和复合事件。...Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...4.2 追加节点 语法 功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素B前置插入到
之前一般会使用jQuery-UI（interactjs更加纯粹）。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现，更加方便（省去计坐标计算等）。...如果不给定参数，则删除所有类型的数据。void setDragImage(img, xOffset, yOffset)指定一副图像，当拖动发生时，显示在光标下方。...从拖动目标(dragstart事件触发的元素)生成半透明图像，并在拖动过程中跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。...一般配合FileReader来处理文件。
说明 Jquery选择器 选择的元素举例 类似的css语法 选择第一个id=xxx的元素 $("#main") #main { } 选择所有class=xxx...事件详解 在很多Jquery代码中，我们总是能看到是这样的形式： $(document).ready(function(){ //Jquery代码 }); 所有的代码被套在了最外层的...load 对象加载完成（如图像被加载完成时触发此事件） error 对象遇到错误 （如图像输入了一个错误的地址，没有成功加载） mousemove 鼠标移动...这次试试mousemove事件，运行这段代码： jquery/jquery.js"></script...(); id=main的div元素，获取其中内容赋值给txt append() $("div#main").append('leavesongs.com'); 向id=main的div元素中追加内容
当然使用传统的JavaScript也能完成这些交互，但是jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。 ...注意以上两种方法的区别： window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，也即在此时JavaScript才可以访问网页中的任何元素； $(document...).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用，也即此时网页的所有元素对jQuery都是可以访问的，但是并不是这些元素关联的文件都已经下载完毕。 ...如果处理函数绑定给window对象，则会在所有的内容（包括窗口、框架、对象和图像等）加载完毕后触发，除过处理函数绑定在元素上，则会在元素的内容加载完毕后触发。 ....ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。...获取多个选择器选中的所有元素 （2）层级选择器 后代选择器。语法：$("A B ")选择A元素内部的所有B元素 子选择器。...3、CRUD操作 1. append()：父元素将子元素追加到末尾 * 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾 2. prepend():父元素将子元素追加到开头...$("ul img").click(function () { //2.追加到p标签中即可。...22" width="22" alt="" /> tips:在实现过程中，我们就是通过选中"请发言"的对象，然后给每一张图像绑定一个单击事件
jQuery 是一个快速、简洁的 JavaScript 框架，封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和...Ajax 交互 选择器 符号$表示 jQuery 对象，$函数通常也被称为 jQuery 的工厂函数，jQuery 的操作基本上都以$( )开始，所有选择器都放在这个括号中，例如$("#title")将返回一个...jQuery 选择的 HTML 元素，在返回 jQuery 对象之后，就可以调用由 jQuery 提供的丰富的 API 来完成相应的操作了 基本选择器，通过元素标签名，元素 ID，Class 来查找...submit") 选取所有的提交按钮 :image 集合元素 $(":image") 选取所有的图像按钮 :reset 集合元素 $(":reset") 选取所有的重置按钮 :button 集合元素 $...(); 切换这个 cls 类 .toggleClass(‘cls’); 筛选元素 .filter(); 向每个匹配元素追加内容 .append(); 把所有匹配元素追加到另一个指定的元素元素集合中 .appendTo
在这里，我们采用jQuery来作为操作DOM和创建ajax提交的js基础库。...首先，截图粘贴上传的核心思想是，监听粘贴事件，然后获取剪切板中的数据，如果是一张图片，则触发上传事件。...上传域监听拖拽的三个事件：dragEnter、dragOver和drop，分别对应拖拽至、拖拽时和释放三个操作的处理机制，当然你也可以监听dragLeave事件。.../^image*/.test(file.type)) { return; } var fileReader = new FileReader(); fileReader.onload...： 在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表，在jQuery中是e.originalEvent.dataTransfer.files 拖拽上传仅支持图片，文件对象中
上面的代码使用了一个正则判断，如果是一张图片的话就把它赋值给img的src，并添加到dom里面，但其实这段代码有点问题，就是web不是所有的图片都能通过img标签展示出来，通常是jpg/png/gif这三种...并把File对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。...fileContent",file); }) 数据在drop事件的event.dataTransfer.files里面，拿到这个File对象之后就可以和输入框进行一样的操作了，即使用FileReader...会自动把内容做一些转义，并且根据data自动设置请求mime类型，这里告诉jQuery直接用xhr.send发出去就行了。...事件在event.clipboardData.files里面，Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签，可以通过发送一个请求加载本地的blob数据，然后再通过FileReader
注意以上两种方法的区别： window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，也即在此时JavaScript才可以访问网页中的任何元素； $(document...).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用，也即此时网页的所有元素对jQuery都是可以访问的，但是并不是这些元素关联的文件都已经下载完毕。 ...如果处理函数绑定给window对象，则会在所有的内容（包括窗口、框架、对象和图像等）加载完毕后触发，出国处理函数绑定在元素上，则会在元素的内容加载完毕后触发。 ...jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行...明天继续完成jQuery事件的下半部分，包括的内容有合成事件、事件冒泡、移除事件等内容。
操作，查找，删除，创建，复制，插入，替换，jQuery事件，事件绑定，鼠标事件，键盘事件，表单事件，窗口事件，事件冒泡，事件解除。...就是说它非常请求，大小在30kb左右；具有强大的选择器和dom操作的封装，可靠的事件处理机制，有完善的ajax，jquery将所有的ajax操作封装到函数``$.ajax()`中；具有丰富的插件，完善的文档...入口函数： jquery的入口函数是在HTML所有标签都加载后执行；JavaScript的window.onload事件是等所有内容（包括图片文件等）加载完之后才执行。...appendTo() 将所有匹配的元素追加到另一个指定的元素集合中 注意：$(A).append(B)的操作，不是将B追加到A中，而是将A追加到B中 prepend() 向每个匹配的元素内部前置内容...窗口事件： scroll()当用户滚动指定的元素时，会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。
上面的代码使用了一个正则判断，如果是一张图片的话就把它赋值给img的src，并添加到dom里面，但其实这段代码有点问题，就是web不是所有的图片都能通过img标签展示出来，通常是jpg/png/gif这三种...并把File对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。...("fileContent", file); }) 数据在drop事件的event.dataTransfer.files里面，拿到这个File对象之后就可以和输入框进行一样的操作了，即使用FileReader...会自动把内容做一些转义，并且根据data自动设置请求mime类型，这里告诉jQuery直接用xhr.send发出去就行了。...事件在event.clipboardData.files里面，Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签，可以通过发送一个请求加载本地的blob数据，然后再通过FileReader
jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。...表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上，...避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...用法: $(‘ul’).delegete(事件发生在哪,事件属性,匿名函数) 作用: 提高代码执行效率 给未来元素绑定命令(单纯给未来元素绑定命令 $(‘li’).on(事件属性,匿名函数)) DOM...操作(节点操作) DOM: 网页文档的根/根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存的节点数据 使用追加函数追加节点 子级追加: append()和appendTo()：在现存元素的内部
相当于参数） 2.获取文件详细属性： $("#fileContent").change(function(){ // 获取到file对象 var file = this.files[0] // 声明FileReader...实例化对象 var fr = new FileReader() // 使用实例化对象的readAsDataURL API放入file对象 fr.readAsDataURL(file) // 最后通过实例化对象的...onload事件 获取文件详细属性 fr.onload = function (event) { var data= event.target.result // 如果是图片则是base64..., data: formData, // 上传formdata封装的数据包 dataType: 'JSON', cache: false, // 不缓存 processData: false, // jQuery...不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success: function(data) { // 成功回调 console.log
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
