DOM&BOM操作
关注
分享
扫一扫
xyphf_和派孔明
全栈工程师，熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等，可独立构建多页面、单页面应用项目。
展开
-
判断元素是否进入可视区
IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；原创 2023-11-14 13:40:59 · 239 阅读 · 0 评论 -
vue如何显示数学或物理公式
VUE页面显示复杂数学公式原创 2023-01-30 17:17:53 · 670 阅读 · 0 评论 -
vue打印局部区域样式CSS错乱不生效
最近vue项目要实现打印网页中局部区域的要求，但是用下列方式的时候显得样式全部都没有作用上 printContent(){ let subOutputRankPrint = document.getElementById('print'); // 要打印区域的元素id console.log(subOutputRankPrint.innerHTML); let newContent =subOutputRankPrint.innerHTML; le原创 2020-09-17 14:13:28 · 3262 阅读 · 1 评论 -
小议JQuery中focus()和focusin()区别
简单的说就是focus()不支持冒泡而focusin()支持冒泡举例说明： HTML<div id="div1"> <input type="text"></div>如果是focus()，则必须写出成 $('input').on('focus',function(){ alert(123); });写成 $('#div1').on('focus',fu原创 2016-10-05 22:17:11 · 3765 阅读 · 0 评论 -
mouseover和mouseenter 与 mouseout和mouseleave的区别
mouseover和mouseenter的区别<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">x=0;y=0;$(document).ready(function(){ $("div.over").mouseover(f转载 2016-10-05 22:04:50 · 361 阅读 · 0 评论 -
小议jquery的remove()和detach()的方法区别
remove()指的是删除节点，而detach()删除之后，重新添加时保留元素之前的操作行为；例如：<script>$(function(){ $('#div1').click(function(){ alert(123); }); var $div = $('#div1').detach(); //删除元素，但是可以保留元素之前的操作行为原创 2016-10-05 21:48:20 · 419 阅读 · 0 评论 -
JQ 的animate动画详解
<style>#div1{ width:200px; height:200px; background:red;}#div2{ width:200px; height:200px; background:red; margin-top:10px;}</style><body><input type="button" value="点击" id="input1"><div id="div1原创 2016-10-04 08:07:27 · 1718 阅读 · 0 评论 -
小议使用trigger()的主动触发模拟点击的使用
<body style="height:2000px;"><input id="input1" type="button" value="添加"><input id="input2" type="text"><ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li></ul></body><scri原创 2016-10-03 20:03:43 · 3299 阅读 · 0 评论 -
聊一聊JQ中delegate事件委托的好处
下面举个例子 我们希望通过点击使得点击的li标签变红HTML<body style="height:2000px;"><ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li></ul></body>普通写法$(function(){ $('li').on('click',functio原创 2016-10-03 19:49:38 · 2416 阅读 · 0 评论 -
JQ阻止默认事件与阻止冒泡
<script>$(function(){ $(document).click(function(ev){ alert(123); }); $('#div1').click(function(ev){ //alert(123); ev.stopPropagation();//仅阻止冒泡 }); $(documen原创 2016-10-03 18:58:27 · 1236 阅读 · 0 评论 -
JQ简单获取键盘键值
<script>$(function(){ $(document).keydown(function(ev){ alert( ev.which ); //alert( ev.ctrlKey ); }); });</script>原创 2016-10-03 18:44:53 · 1870 阅读 · 0 评论 -
懒加载图片
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>懒加载图片</title><style>div{ margin-top:300px; width:470px; height:150px; border:1px #000 solid;}原创 2016-10-03 18:20:29 · 409 阅读 · 0 评论 -
节点的上移与下移
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script src="jquery-1.11.1.js"></script><script>$(function(){ $('input[val原创 2016-10-03 13:22:10 · 928 阅读 · 0 评论 -
注册获取验证码倒计时DEMO
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册获取验证码倒计时DOME</title><script src="js/jquery-1.4.2.min.js"></script><script src="js/Pandora.AutoSize.js"></script><scrip原创 2016-09-12 11:34:36 · 4498 阅读 · 0 评论 -
移动端拖拽的实现效果
拖拽原创 2016-07-21 23:17:09 · 6670 阅读 · 0 评论 -
JQ的on事件数据挂载方法
我们通常使用的on事件一般如下： HTML<body><div id="div1"> <span>span</span></div></body>JS$(function(){ $('#div1').on('click',function(ev){ alert(123); });});但是在一些日常运用当中，有一些值与事件呈一一对应关系，这时我们可是原创 2016-10-05 22:36:53 · 1399 阅读 · 0 评论 -
JQ如何获取原生的event对象
举例说明：$(function(){ $('#div1').on('touchstart',function(ev){ alert(ev.changedTouches); });});此时弹出的是undefined，没有获取到； 这时我们要转成原生的event对象$(function(){ $('#div1').on('touchsta原创 2016-10-05 22:43:09 · 3496 阅读 · 0 评论 -
JQ的自定义事件操作
设置一个滚轮事件放到缩小图片<body><img src="1.jpg" id="img1"></body><script>$(function(){ $('#img1').on('zoomIn',function(){ //缩小 $(this).css('width',200); }); $('#img1').on('zo原创 2016-10-05 22:55:58 · 942 阅读 · 0 评论 -
html5将文字生成图片
本文链接：https://blog.youkuaiyun.com/qq_30100043/article/details/76549377由于canvas能够将画布上的纹理生成数据给img显示出来，所以，我们在html5里面可以实现将文字生成图片显示。首先我书写了一个将文字绘制到canvas上面的函数，然后函数会返回canvas绘制的纹理数据。//绘制文字到canvas，判断换行位置，和设置c...转载 2019-08-15 21:28:11 · 1688 阅读 · 0 评论 -
常见布局介绍
左侧固定，右侧自适应1<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="左侧固定右侧自适应" /><meta name="copyright" content=&原创 2018-03-29 09:59:49 · 444 阅读 · 0 评论 -
建议折叠菜单的实现
<style>body{margin:0;padding:0 0 12px 0;font-size:14px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}input,selec...原创 2018-04-14 17:26:25 · 856 阅读 · 0 评论 -
点击元素变输入框,更改值后回车变成新值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击元素变输入框</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $原创 2017-11-27 20:25:19 · 1007 阅读 · 0 评论 -
javascript，一幅图让你看懂DIV拖拽
和派孔明——前端工程师" />DIV拖拽解析*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}#div1{width:200px;height:200px; background:red; position:absolute;left:0;top:0;}window.onload=funct原创 2016-03-31 22:12:39 · 709 阅读 · 0 评论 -
Git下载 Git - Downloads
Git下载不了 Git官网抽了 Git 64位下载 Git 32位下载那就从这里下载吧 http://pan.baidu.com/s/1nvHq7GX 密码：s3o3原创 2017-09-05 10:31:50 · 1511 阅读 · 2 评论 -
封装自定义滚动条
封装自定义滚动条原创 2017-07-06 11:04:47 · 643 阅读 · 0 评论 -
wowslider.js 裂变bannber效果插件
wowslider.js 裂变bannber效果插件转载 2017-07-12 15:30:21 · 4086 阅读 · 0 评论 -
jquery.uploadView.js图片上传插件
文件名 jquery.uploadView.js// 图片上传前预览插件//Power By 勾国印//QQ:245629560//Blog:http://www.gouguoyin.cn(function($){ $.fn.uploadView = function(options){ var defaults = { uploadBox转载 2017-04-27 09:44:13 · 5707 阅读 · 2 评论 -
require.js入门简介——和派孔明
RequireJS的常用方法 1、requireJS.config 通常来为模块指定别名，方便模块的引入 2、requirejs 通过它将写好的模块进行引入,并根据引入的模块编写主代码 3、define 我们利用它来编写模块,然后在相应的地方进行引用原创 2016-12-22 16:57:37 · 622 阅读 · 0 评论 -
带回调函数的Canvas刮奖刮刮卡JQuery插件，支持移动端PC端
带回调函数的Canvas刮奖刮刮卡JQuery插件，支持移动端PC端转载 2017-02-13 17:38:55 · 3207 阅读 · 0 评论 -
AngularJS点击添加样式、点击变色设置
首先解释需求是这样的，有个列表，当你点击哪一行时，哪一行背景变成灰色，在JQ中，大家都知道，这是非常容易的，加一个addClass就行了，那么AngularJS如何实现呢？下面我们看代码部分<!doctype html><html ng-app="a2_11"><head> <title>添加元素样式</title> <script src="../Script/angular.原创 2016-11-14 16:35:06 · 19219 阅读 · 3 评论 -
jquery中的trigger和triggerHandler区别
今天我们来简单看看jquery中的trigger何triggerHandler方法的区别： trigger( event, [data] ) 在每一个匹配的元素上触发某类事件。 这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个’submit’，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。 你也可以触发由bind()注册的自定义事件$转载 2016-10-05 23:02:46 · 517 阅读 · 0 评论 -
关于zepto.js的移动端拖拽写法
zepto.js;移动端拖拽;js拖拽;原创 2016-07-21 16:56:36 · 5884 阅读 · 1 评论 -
获取文件类型、扩展名
<原创 2016-07-21 12:32:59 · 751 阅读 · 0 评论 -
animate.css动画库使用方法介绍
animate.css动画库简介 Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。 它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。换句原创 2016-07-13 16:45:52 · 7852 阅读 · 0 评论 -
文字无限无缝滚动效果——和派孔明
文字无限无缝滚动效果——和派孔明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style>*{margin:0;padding:0;list-style:none;}#div1{width:100px;height:20px;margin:0 auto;overflo原创 2016-06-13 21:08:59 · 3418 阅读 · 0 评论 -
史上最简单的JQ选项卡
选项卡,自动选项卡,JQ选项卡,JQ自动选项卡,选项卡插件原创 2016-07-11 13:01:48 · 4465 阅读 · 0 评论 -
jQ模拟逐帧动画动画
百度云盘demo下载 提取密码：qjxx *{margin:0;padding:0;list-style:none;}.div1{margin:100px auto;width:242px;height:137px;background:url(bao.png) 0 0;}.div2{margin:100px auto;width:242px;height:137px;b原创 2016-06-29 13:02:16 · 4547 阅读 · 0 评论 -
jQuery的DOM操作的简单介绍
一、节点的创建1、$("<div></div>")2、创造元素节点并将文本内容一并描述$("<div>我是文本节点</div>")3、创建属性节点$("<div id='test' class='aaron'>我是文本节点</div>")二、内部插入 append()和appendTo()//插入内尾部 prepend和prependTo()//插入内头部//例1:<body>原创 2016-07-10 19:07:21 · 709 阅读 · 0 评论 -
简单说说rem布局
相对单位布局em: 相对于字体 根：bodyrem： r —— root 根：html添加：解释：viewport：视口 窗口width：320px 标准 高清屏dpi device-widthinitial-scale 初始化缩放比例： 1 不缩放user-scalable： 页面是否缩放maximum-scale=1原创 2016-06-06 08:23:05 · 1039 阅读 · 0 评论 -
【求助】自定义事件/鼠标滚轮滚动放大缩小图片，chrome下失效求解？
自定义事件/鼠标滚轮滚动放大缩小图片chrome下失效求解？自定义事件/鼠标滚轮滚动放大缩小图片$(function(){ $('#img1').on('zoomIn',function(){ //缩小 $(this).css('width',200); }); $('#img1').on('zoomOut',function(){ //放原创 2016-06-27 00:30:44 · 2666 阅读 · 0 评论