原生JS与jQuery操作DOM对比
原文https://github.com/nefe/You-D...
原生JS与jQuery操作DOM对比
You Don't Need jQuery
前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。
目录
- Translations
- Query Selector
- CSS & Style
- DOM Manipulation
- Ajax
- Events
- Utilities
- Promises
- Animation
- Alternatives
- Browser Support
Translations
- 한국어
- 简体中文
- Bahasa Melayu
- Bahasa Indonesia
- Português(PT-BR)
- Tiếng Việt Nam
- Español
- Русский
- Кыргызча
- Türkçe
- Italiano
- Français
- 日本語
- Polski
Query Selector
常用的 class、id、属性 选择器都可以使用 document.querySelector
或 document.querySelectorAll
替代。区别是
document.querySelector
返回第一个匹配的 Elementdocument.querySelectorAll
返回所有匹配的 Element 组成的 NodeList。它可以通过[].slice.call()
把它转成 Array- 如果匹配不到任何 Element,jQuery 返回空数组
[]
,但document.querySelector
返回null
,注意空指针异常。当找不到时,也可以使用||
设置默认的值,如document.querySelectorAll(selector) || []
注意:document.querySelector
和document.querySelectorAll
性能很差。如果想提高性能,尽量使用document.getElementById
、document.getElementsByClassName
或document.getElementsByTagName
。
-
1.0 选择器查询
// jQuery
$('selector');// Native
document.querySelectorAll('selector');
1.1 class 查询
// jQuery
$('.class');// Native
document.querySelectorAll('.class');// or
document.getElementsByClassName('class');
1.2 id 查询
// jQuery
$('#id');// Native
document.querySelector('#id');// or
document.getElementById('id');
1.3 属性查询
// jQuery
$('a[target=_blank]');// Native
document.querySelectorAll('a[target=_blank]');
1.4 后代查询
// jQuery
$el.find('li');// Native
el.querySelectorAll('li');
1.5 兄弟及上下元素
-
兄弟元素
// jQuery
$el.siblings();// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>child !== el
);
上一个元素
// jQuery
$el.prev();// Native
el.previousElementSibling;
下一个元素
// next
$el.next();// Native
el.nextElementSibling;
1.6 Closest
Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
// jQuery
$el.closest(queryString);// Native - Only latest, NO IE
el.closest(selector);// Native - IE10+
function closest(el, selector) {const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;while (el) {if (matchesSelector.call(el, selector)) {return el;} else {el = el.parentElement;}}return null;
}
1.7 Parents Until
获取当前每一个匹配元素集的祖先,不包括匹配元素的本身。
// jQuery
$el.parentsUntil(selector, filter);// Native
function parentsUntil(el, selector, filter) {const result = [];const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;// match start from parentel = el.parentElement;while (el && !matchesSelector.call(el, selector)) {if (!filter) {result.push(el);} else {if (matchesSelector.call(el, filter)) {result.push(el);}}el = el.parentElement;}return result;
}
1.8 Form
-
Input/Textarea
// jQuery
$('#my-input').val();// Native
document.querySelector('#my-input').value;
获取 e.currentTarget 在 .radio
中的数组索引
// jQuery
$('.radio').index(e.currentTarget);// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
1.9 Iframe Contents
jQuery 对象的 iframe contents()
返回的是 iframe 内的 document
-
Iframe contents
// jQuery
$iframe.contents();// Native
iframe.contentDocument;
Iframe Query
// jQuery
$iframe.contents().find('.css');// Native
iframe.contentDocument.querySelectorAll('.css');
1.10 获取 body
// jQuery
$('body');// Native
document.body;
1.11 获取或设置属性
-
获取属性
// jQuery
$el.attr('foo');// Native
el.getAttribute('foo');
设置属性
// jQuery, note that this works in memory without change the DOM
$el.attr('foo', 'bar');// Native
el.setAttribute('foo', 'bar');
获取 data-
属性
// jQuery
$el.data('foo');// Native (use `getAttribute`)
el.getAttribute('data-foo');// Native (use `dataset` if only need to support IE 11+)
el.dataset['foo'];
CSS & Style
-
2.1 CSS
-
Get style
-
// jQuery
$el.css("color");// Native
// 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
const win = el.ownerDocument.defaultView;// null 的意思是不返回伪类元素
win.getComputedStyle(el, null).color;
Set style
// jQuery
$el.css({ color: "#ff0011" });// Native
el.style.color = '#ff0011';
Get/Set Styles
注意,如果想一次设置多个 style,可以参考 oui-dom-utils 中 setStyles 方法
Add class
// jQuery
$el.addClass(className);// Native
el.classList.add(className);
Remove class
// jQuery
$el.removeClass(className);// Native
el.classList.remove(className);
has class
// jQuery
$el.hasClass(className);// Native
el.classList.contains(className);
Toggle class
// jQuery
$el.toggleClass(className);// Native
el.classList.toggle(className);
2.2 Width & Height
Width 与 Height 获取方法相同,下面以 Height 为例:
-
Window height
// window height
$(window).height();// 含 scrollbar
window.document.documentElement.clientHeight;// 不含 scrollbar,与 jQuery 行为一致
window.innerHeight;
Document height
// jQuery
$(document).height();// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(body.offsetHeight,body.scrollHeight,html.clientHeight,html.offsetHeight,html.scrollHeight
);
Element height
// jQuery
$el.height();// Native
function getHeight(el) {const styles = this.getComputedStyle(el);const height = el.offsetHeight;const borderTopWidth = parseFloat(styles.borderTopWidth);const borderBottomWidth = parseFloat(styles.borderBottomWidth);const paddingTop = parseFloat(styles.paddingTop);const paddingBottom = parseFloat(styles.paddingBottom);return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}// 精确到整数(border-box 时为 height - border 值,content-box 时为 height + padding 值)
el.clientHeight;// 精确到小数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
el.getBoundingClientRect().height;
2.3 Position & Offset
-
Position
获得匹配元素相对父元素的偏移
// jQuery
$el.position();// Native
{ left: el.offsetLeft, top: el.offsetTop }
Offset
获得匹配元素相对文档的偏移
// jQuery
$el.offset();// Native
function getOffset (el) {const box = el.getBoundingClientRect();return {top: box.top + window.pageYOffset - document.documentElement.clientTop,left: box.left + window.pageXOffset - document.documentElement.clientLeft}
}
2.4 Scroll Top
获取元素滚动条垂直位置。
// jQuery
$(window).scrollTop();// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
DOM Manipulation
-
3.1 Remove
从 DOM 中移除元素。
// jQuery
$el.remove();// Native
el.parentNode.removeChild(el);
3.2 Text
-
Get text
返回指定元素及其后代的文本内容。
// jQuery
$el.text();// Native
el.textContent;
Set text
设置元素的文本内容。
// jQuery
$el.text(string);// Native
el.textContent = string;
3.3 HTML
-
Get HTML
// jQuery
$el.html();// Native
el.innerHTML;
Set HTML
// jQuery
$el.html(htmlString);// Native
el.innerHTML = htmlString;
3.4 Append
Append 插入到子节点的末尾
// jQuery
$el.append("<div id='container'>hello</div>");// Native (HTML string)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');// Native (Element)
el.appendChild(newEl);
3.5 Prepend
// jQuery
$el.prepend("<div id='container'>hello</div>");// Native (HTML string)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');// Native (Element)
el.insertBefore(newEl, el.firstChild);
3.6 insertBefore
在选中元素前插入新节点
// jQuery
$newEl.insertBefore(queryString);// Native (HTML string)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {el.parentNode.insertBefore(newEl, el);
}
3.7 insertAfter
在选中元素后插入新节点
// jQuery
$newEl.insertAfter(queryString);// Native (HTML string)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {el.parentNode.insertBefore(newEl, el.nextSibling);
}
3.8 is
如果匹配给定的选择器,返回true
// jQuery
$el.is(selector);// Native
el.matches(selector);
3.9 clone
深拷贝被选元素。(生成被选元素的副本,包含子节点、文本和属性。)
//jQuery
$el.clone();//Native
el.cloneNode();//深拷贝添加参数‘true’
3.10 empty
移除所有子节点
//jQuery
$el.empty();//Native
el.innerHTML = '';
-
3.11 wrap
把每个被选元素放置在指定的HTML结构中。
//jQuery
$(".inner").wrap('<div class="wrapper"></div>');//Native
Array.prototype.forEach.call(document.querySelector('.inner'), (el) => {const wrapper = document.createElement('div');wrapper.className = 'wrapper';el.parentNode.insertBefore(wrapper, el);el.parentNode.removeChild(el);wrapper.appendChild(el);
});
3.12 unwrap
移除被选元素的父元素的DOM结构
// jQuery
$('.inner').unwrap();// Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {let elParentNode = el.parentNodeif(elParentNode !== document.body) {elParentNode.parentNode.insertBefore(el, elParentNode)elParentNode.parentNode.removeChild(elParentNode)}
});
3.13 replaceWith
用指定的元素替换被选的元素
//jQuery
$('.inner').replaceWith('<div class="outer"></div>');//Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'),(el) => {const outer = document.createElement("div");outer.className = "outer";el.parentNode.insertBefore(outer, el);el.parentNode.removeChild(el);
});
3.14 simple parse
解析 HTML/SVG/XML 字符串
// jQuery
$(`<ol><li>a</li><li>b</li>
</ol>
<ol><li>c</li><li>d</li>
</ol>`);// Native
range = document.createRange();
parse = range.createContextualFragment.bind(range);parse(`<ol><li>a</li><li>b</li>
</ol>
<ol><li>c</li><li>d</li>
</ol>`);
Ajax
Fetch API 是用于替换 XMLHttpRequest 处理 ajax 的新标准,Chrome 和 Firefox 均支持,旧浏览器可以使用 polyfills 提供支持。
IE9+ 请使用 github/fetch,IE8+ 请使用 fetch-ie8,JSONP 请使用 fetch-jsonp。
-
4.1 从服务器读取数据并替换匹配元素的内容。
// jQuery
$(selector).load(url, completeCallback)// Native
fetch(url).then(data => data.text()).then(data => {document.querySelector(selector).innerHTML = data
}).then(completeCallback)
Events
完整地替代命名空间和事件代理,链接到 https://github.com/oneuijs/ou...
-
5.0 Document ready by
DOMContentLoaded
// jQuery
$(document).ready(eventHandler);// Native
// 检测 DOMContentLoaded 是否已完成
if (document.readyState !== 'loading') {eventHandler();
} else {document.addEventListener('DOMContentLoaded', eventHandler);
}
5.1 使用 on 绑定事件
// jQuery
$el.on(eventName, eventHandler);// Native
el.addEventListener(eventName, eventHandler);
5.2 使用 off 解绑事件
// jQuery
$el.off(eventName, eventHandler);// Native
el.removeEventListener(eventName, eventHandler);
5.3 Trigger
// jQuery
$(el).trigger('custom-event', {key1: 'data'});// Native
if (window.CustomEvent) {const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {const event = document.createEvent('CustomEvent');event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}el.dispatchEvent(event);
Utilities
大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替,推荐 lodash。
-
6.1 基本工具
- isArray
检测参数是不是数组。
// jQuery
$.isArray(range);// Native
Array.isArray(range);
- isWindow
检测参数是不是 window。
// jQuery
$.isWindow(obj);// Native
function isWindow(obj) {return obj !== null && obj !== undefined && obj === obj.window;
}
- inArray
在数组中搜索指定值并返回索引 (找不到则返回 -1)。
// jQuery
$.inArray(item, array);// Native
array.indexOf(item) > -1;// ES6-way
array.includes(item);
- isNumeric
检测传入的参数是不是数字。
Use typeof
to decide the type or the type
example for better accuracy.
// jQuery
$.isNumeric(item);// Native
function isNumeric(n) {return !isNaN(parseFloat(n)) && isFinite(n);
}
- isFunction
检测传入的参数是不是 JavaScript 函数对象。
// jQuery
$.isFunction(item);// Native
function isFunction(item) {if (typeof item === 'function') {return true;}var type = Object.prototype.toString(item);return type === '[object Function]' || type === '[object GeneratorFunction]';
}
- isEmptyObject
检测对象是否为空 (包括不可枚举属性).
// jQuery
$.isEmptyObject(obj);// Native
function isEmptyObject(obj) {return Object.keys(obj).length === 0;
}
- isPlainObject
检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建).
// jQuery
$.isPlainObject(obj);// Native
function isPlainObject(obj) {if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {return false;}if (obj.constructor &&!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {return false;}return true;
}
- extend
合并多个对象的内容到第一个对象。
object.assign 是 ES6 API,也可以使用 polyfill。
// jQuery
$.extend({}, defaultOpts, opts);// Native
Object.assign({}, defaultOpts, opts);
- trim
移除字符串头尾空白。
// jQuery
$.trim(string);// Native
string.trim();
- map
将数组或对象转化为包含新内容的数组。
// jQuery
$.map(array, (value, index) => {
});// Native
array.map((value, index) => {
});
- each
轮询函数,可用于平滑的轮询对象和数组。
// jQuery
$.each(array, (index, value) => {
});// Native
array.forEach((value, index) => {
});
- grep
找到数组中符合过滤函数的元素。
// jQuery
$.grep(array, (value, index) => {
});// Native
array.filter((value, index) => {
});
- type
检测对象的 JavaScript [Class] 内部类型。
// jQuery
$.type(obj);// Native
function type(item) {const reTypeOf = /(?:^\[object\s(.*?)\]$)/;return Object.prototype.toString.call(item).replace(reTypeOf, '$1').toLowerCase();
}
- merge
合并第二个数组内容到第一个数组。
// jQuery
$.merge(array1, array2);// Native
// 使用 concat,不能去除重复值
function merge(...args) {return [].concat(...args)
}// ES6,同样不能去除重复值
array1 = [...array1, ...array2]// 使用 Set,可以去除重复值
function merge(...args) {return Array.from(new Set([].concat(...args)))
}
- now
返回当前时间的数字呈现。
// jQuery
$.now();// Native
Date.now();
- proxy
传入函数并返回一个新函数,该函数绑定指定上下文。
// jQuery
$.proxy(fn, context);// Native
fn.bind(context);
- makeArray
类数组对象转化为真正的 JavaScript 数组。
// jQuery
$.makeArray(arrayLike);// Native
Array.prototype.slice.call(arrayLike);// ES6-way
Array.from(arrayLike);
-
6.2 包含
检测 DOM 元素是不是其他 DOM 元素的后代.
// jQuery
$.contains(el, child);// Native
el !== child && el.contains(child);
6.3 Globaleval
全局执行 JavaScript 代码。
// jQuery
$.globaleval(code);// Native
function Globaleval(code) {const script = document.createElement('script');script.text = code;document.head.appendChild(script).parentNode.removeChild(script);
}// Use eval, but context of eval is current, context of $.Globaleval is global.
eval(code);
6.4 解析
- parseHTML
解析字符串为 DOM 节点数组.
// jQuery
$.parseHTML(htmlString);// Native
function parseHTML(string) {const context = document.implementation.createHTMLDocument();// Set the base href for the created document so any parsed elements with URLs// are based on the document's URLconst base = context.createElement('base');base.href = document.location.href;context.head.appendChild(base);context.body.innerHTML = string;return context.body.children;
}
- parseJSON
传入格式正确的 JSON 字符串并返回 JavaScript 值.
// jQuery
$.parseJSON(str);// Native
JSON.parse(str);
Promises
Promise 代表异步操作的最终结果。jQuery 用它自己的方式处理 promises,原生 JavaScript 遵循 Promises/A+ 标准实现了最小 API 来处理 promises。
-
7.1 done, fail, always
done
会在 promise 解决时调用,fail
会在 promise 拒绝时调用,always
总会调用。
// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)// Native
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
7.2 when
when
用于处理多个 promises。当全部 promises 被解决时返回,当任一 promise 被拒绝时拒绝。
// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});// Native
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
7.3 Deferred
Deferred 是创建 promises 的一种方式。
// jQuery
function asyncFunc() {const defer = new $.Deferred();setTimeout(() => {if(true) {defer.resolve('some_value_computed_asynchronously');} else {defer.reject('failed');}}, 1000);return defer.promise();
}// Native
function asyncFunc() {return new Promise((resolve, reject) => {setTimeout(() => {if (true) {resolve('some_value_computed_asynchronously');} else {reject('failed');}}, 1000);});
}// Deferred way
function defer() {const deferred = {};const promise = new Promise((resolve, reject) => {deferred.resolve = resolve;deferred.reject = reject;});deferred.promise = () => {return promise;};return deferred;
}function asyncFunc() {const defer = defer();setTimeout(() => {if(true) {defer.resolve('some_value_computed_asynchronously');} else {defer.reject('failed');}}, 1000);return defer.promise();
}
Animation
-
8.1 Show & Hide
// jQuery
$el.show();
$el.hide();// Native
// 更多 show 方法的细节详见 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
8.2 Toggle
显示或隐藏元素。
// jQuery
$el.toggle();// Native
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {el.style.display = 'none';
}
8.3 FadeIn & FadeOut
// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);// Native
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';
8.4 FadeTo
调整元素透明度。
// jQuery
$el.fadeTo('slow',0.15);
// Native
el.style.transition = 'opacity 3s'; // 假设 'slow' 等于 3 秒
el.style.opacity = '0.15';
8.5 FadeToggle
动画调整透明度用来显示或隐藏。
// jQuery
$el.fadeToggle();// Native
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {el.style.opacity = '0';
} else {el.style.opacity = '1';
}
8.6 SlideUp & SlideDown
// jQuery
$el.slideUp();
$el.slideDown();// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
8.7 SlideToggle
滑动切换显示或隐藏。
// jQuery
$el.slideToggle();// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {el.style.height = originHeight;
}
else {el.style.height = '0px';
}
8.8 Animate
执行一系列 CSS 属性动画。
// jQuery
$el.animate({ params }, speed);// Native
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) =>el.style[key] = params[key];
)
Alternatives
- 你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件,元素,ajax 等用法。
- npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织
Browser Support
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
MITLicense
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- angualr操作dom
目录 笔者在实际开发中,总是能遇到用angular动态的操作dom,特意将工程中的代码贴出 需求 给一张卷子 设置 分数段评级 1—60 是 D 61—70 是 C 71—-80 是B 81—–100 是A ** 支持 个人定制化,随意变化分数段,随意改变 评…...
2024/5/2 14:30:41 - angular5之DOM绑定和html绑定
1)DOM绑定 (一般是事件绑定) html <input valuetom (input)"doInput($event)"></input> component doInput(event:any){console.log(event.target.value) }2)html绑定 (一般是class…...
2024/5/3 0:46:18 - angularjs操作dom节点
1.通过ng-click获取当前节点 <span ng-if"j.curTagsCountC1" ng-click"liuyan_zan($event)"> $scope.liuyan_zan function(a){ console.log(a); var jiedian_1 a.target;//这个就是当前节点的 console.log(jiedian_1);}转载于:https://www.c…...
2024/5/10 16:40:08 - 当前元素angularjs 获取当前元素$event.target及 jQuery中event.target和this的区别
AngularJs如何获取代表当前元素的DOM对象获取当前元素$event.target 1.<div ng-click"box($event)" >点击</div> function box($event){ var this$event.target;//拿到当前dom标签 } 2. jQuery中event.target和this的区别 this是Javascrip…...
2024/5/3 2:52:34 - 机压双眼皮李主任
...
2024/5/2 2:58:16 - 黑珍珠双眼皮多少钱
...
2024/5/3 4:32:53 - Angular环境搭建教程
前言:AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。是Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。发布于2016年9月份,它是基于ES6来开发…...
2024/5/3 1:48:21 - angular2完整视频教程收藏(大漠穷秋)
来自大漠老师的angular2教程,视频地址如下: http://i.youku.com/i/UMzI1MjQ0MDgw?spma2h0j.11185381.module_basic_dayu_sub.DL~DD~H2~A ...
2024/5/2 10:42:39 - 靳小雷双眼皮修复价格
...
2024/5/2 3:48:26 - 埋线双眼皮肿会消失吗
...
2024/5/3 1:46:23 - 埋线双眼皮线是什么样子的
...
2024/5/5 8:14:40 - 埋线双眼皮开始发痒
...
2024/5/5 13:53:37 - 纳米双眼皮用不用抽脂
...
2024/5/5 7:36:56 - 洛阳割双眼皮价位
...
2024/5/6 1:08:19 - 解决selenium Action模拟拖拽无效
最近做UI自动化时,需要将页面上一个元素拖拽到另外一个元素的位置,最开始写框架时,使用的Action鼠标模拟事件dragAndDrop实现,通过简单的测试没问题。但用到项目中后发现,这种方法根本就拖不过去,试了很多办…...
2024/5/5 18:59:26 - 埋线双眼皮消肿运动
...
2024/5/5 11:27:14 - jQuery easyui(上)
1.easyui的认识 easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记࿰…...
2024/5/6 1:09:28 - draggable()拖拽时限制移动区域
jQuery-UI为我们提供了一个非常便捷的拖拽方法:draggable(),在使用此方法时,我们可能会希望控件只在某一区域中移动,不能被拖出边界,这样的话我们可以使用下面的方法: 调用draggable()时: $(#el…...
2024/5/5 6:12:20 - dataTables实现鼠标拖动编辑行上下移动
实现方式:在初始化dataTables时增加属性:var param_index0; //定义排序字段,在新增表的行时用到$(#dt-table).DataTable({....."rowReorder":{dataSrc :"自己数据库中排序的索引" eq:param_index},...}) 参看…...
2024/5/6 0:26:07 - angular ng-repeat+sortable 拖拽demo
由于项目需求,需要使用angular 实现列表的增、删、改,并且列表支持拖拽。 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能。 我现在懒得想如何使用jquery完成该功能,不过我能肯…...
2024/5/5 19:53:39
最新文章
- 5到15秒片头音乐200款,30秒片头音效音乐大全
一、素材描述 本套音乐音效素材,大小2.88G,13个压缩文件。 二、素材目录 200个5到15秒的片头音乐.zip 30秒片头-1.zip 30秒片头-2.zip 30秒片头-3.zip 30秒片头-4.zip 30秒片头-5.zip 30秒片头-6.zip 30秒片头-7.zip 30秒片头-8.zip 30秒片头…...
2024/5/10 16:59:35 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/5/9 21:23:04 - Java深度优先搜索DFS(含面试大厂题和源码)
深度优先搜索(Depth-First Search,简称DFS)是一种用于遍历或搜索树或图的算法。DFS 通过沿着树的深度来遍历节点,尽可能深地搜索树的分支。当节点v的所在边都已被探寻过,搜索将回溯到发现节点v的那条边的起始节点。这个…...
2024/5/10 0:59:45 - llama.cpp运行qwen0.5B
编译llama.cp 参考 下载模型 05b模型下载 转化模型 创建虚拟环境 conda create --prefixD:\miniconda3\envs\llamacpp python3.10 conda activate D:\miniconda3\envs\llamacpp安装所需要的包 cd G:\Cpp\llama.cpp-master pip install -r requirements.txt python conver…...
2024/5/10 0:17:58 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/10 12:36:12 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/9 15:10:32 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/9 4:20:59 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/7 11:36:39 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/6 1:40:42 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/8 20:48:49 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/7 9:26:26 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/8 19:33:07 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/5 8:13:33 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/8 20:38:49 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/10 10:22:18 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/9 17:11:10 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57