jQuery属性的相关js实现方法

其他 2018-05-30 01:27:40 阅读次数: 1

元素操作

Add Class

//JQUERY
$(el).addClass(className); //js //谷歌浏览器，火狐浏览器，IE8+ if (el.classList) el.classList.add(className); else el.className += ' ' + className; //谷歌浏览器，火狐浏览器，IE10+ el.classList.add(className);

After

//JQUERY
$(el).after(htmlString); //js 谷歌浏览器，火狐浏览器，IE8+ el.insertAdjacentHTML('afterend', htmlString);

Append

//JQUERY
$(parent).append(el); //js谷歌浏览器，火狐浏览器，IE8+ parent.appendChild(el);

Before

//JQUERY
$(el).before(htmlString); //js谷歌浏览器，火狐浏览器，IE8+ el.insertAdjacentHTML('beforebegin', htmlString);

Children

//JQUERY
$(el).children(); //js //谷歌浏览器，火狐浏览器，IE8+ var children = []; for (var i = el.children.length; i--;) { // Skip comment nodes on IE8 if (el.children[i].nodeType != 8) children.unshift(el.children[i]); } //谷歌浏览器，火狐浏览器，IE9+ el.children

Clone

//JQUERY
$(el).clone(); //谷歌浏览器，火狐浏览器，IE8+ el.cloneNode(true);

Contains

//JQUERY
$.contains(el, child); //谷歌浏览器，火狐浏览器，IE8+ el !== child && el.contains(child);

Contains Selector

//JQUERY
$(el).find(selector).length; //谷歌浏览器，火狐浏览器，IE8+ el.querySelector(selector) !== null

Each

//JQUERY
$(selector).each(function(i, el){ }); //js谷歌浏览器，火狐浏览器，IE8+ function forEachElement(selector, fn) { var elements = document.querySelectorAll(selector); for (var i = 0; i < elements.length; i++) fn(elements[i], i); } forEachElement(selector, function(el, i){ }); //js谷歌浏览器，火狐浏览器，IE9+ var elements = document.querySelectorAll(selector); Array.prototype.forEach.call(elements, function(el, i){ });

Empty

    //JQUERY
    $(el).empty(); //js谷歌浏览器，火狐浏览器，IE8+ while(el.firstChild) el.removeChild(el.firstChild); //js谷歌浏览器，火狐浏览器，IE9+ el.innerHTML = '';

过滤filter

//JQUERY
$(selector).filter(filterFn); //谷歌浏览器，火狐浏览器，IE8+ function filter(selector, filterFn) { var elements = document.querySelectorAll(selector); var out = []; for (var i = elements.length; i--;) { if (filterFn(elements[i])) out.unshift(elements[i]); } return out; } filter(selector, filterFn); //谷歌浏览器，火狐浏览器，IE9+ Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);

查找子元素

//JQUERY
$(el).find(selector); //谷歌浏览器，火狐浏览器，IE8+ el.querySelectorAll(selector);

查找、选择器

//JQUERY
$('.my #awesome selector'); //谷歌浏览器，火狐浏览器，IE8+ document.querySelectorAll('.my #awesome selector');

获取属性值attr

    //JQUERY
    $(el).attr('tabindex'); //谷歌浏览器，火狐浏览器，IE8+ el.getAttribute('tabindex');

获取Html内容

//JQUERY
$(el).html(); //js el.innerHTML

获取CSS样式

//JQUERY
$(el).css(ruleName); //谷歌浏览器，火狐浏览器，IE9+ getComputedStyle(el)[ruleName];

获取文本内容

//JQUERY
$(el).text(); //谷歌浏览器，火狐浏览器，IE8+ el.textContent || el.innerText //谷歌浏览器，火狐浏览器，IE9+ el.textContent

Has Class

//JQUERY
$(el).hasClass(className); //谷歌浏览器，火狐浏览器，IE8+ if (el.classList) el.classList.contains(className); else new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); //谷歌浏览器，火狐浏览器，IE10+ el.classList.contains(className);

元素比较

JQUERY
$(el).is($(otherEl)); //js el === otherEl

比较类名

//JQUERY
$(el).is('.my-class'); //谷歌浏览器，火狐浏览器，IE8+ var matches = function(el, selector) { var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector); if (_matches) { return _matches.call(el, selector); } else { var nodes = el.parentNode.querySelectorAll(selector); for (var i = nodes.length; i--;) { if (nodes[i] === el) return true; } return false; } }; matches(el, '.my-class'); //谷歌浏览器，火狐浏览器，IE9+ var matches = function(el, selector) { return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector); }; matches(el, '.my-class');

Next

//JQUERY
$(el).next(); //谷歌浏览器，火狐浏览器，IE8+ // nextSibling can include text nodes function nextElementSibling(el) { do { el = el.nextSibling; } while ( el && el.nodeType !== 1 ); return el; } el.nextElementSibling || nextElementSibling(el); //谷歌浏览器，火狐浏览器，IE9+ el.nextElementSibling

Offset

//JQUERY
$(el).offset(); //js谷歌浏览器，火狐浏览器，IE8+ var rect = el.getBoundingClientRect() { top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft }

Outer Width

//JQUERY
$(el).outerWidth(); //js el.offsetWidth

Parent

//JQUERY
$(el).parent(); //js el.parentNode

Position

//JQUERY
$(el).position(); //js {left: el.offsetLeft, top: el.offsetTop}

Prev

//JQUERY
$(el).prev(); //谷歌浏览器，火狐浏览器，IE8+ // prevSibling can include text nodes function previousElementSibling(el) { do { el = el.previousSibling; } while ( el && el.nodeType !== 1 ); return el; } el.previousElementSibling || previousElementSibling(el); //谷歌浏览器，火狐浏览器，IE9+ el.previousElementSibling

Remove

//JQUERY
$(el).remove(); //js谷歌浏览器，火狐浏览器，IE8+ el.parentNode.removeChild(el);

Remove Class

//JQUERY
$(el).removeClass(className); //js谷歌浏览器，火狐浏览器，IE8+ if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); //谷歌浏览器，火狐浏览器，IE10+ el.classList.remove(className);

Replace From Html

//JQUERY
$(el).replaceWith(string); //谷歌浏览器，火狐浏览器，IE8+ el.outerHTML = string;

Set Attributes

//JQUERY
$(el).attr('tabindex', 3); //谷歌浏览器，火狐浏览器，IE8+ el.setAttribute('tabindex', 3);

Set Html

//JQUERY
$(el).html(string); //谷歌浏览器，火狐浏览器，IE8+ el.innerHTML = string;

Set Style

//JQUERY
$(el).css('border-width', '20px'); //谷歌浏览器，火狐浏览器，IE8+ // Use a class if possible el.style.borderWidth = '20px';

Set Text

//JQUERY
$(el).text(string); //谷歌浏览器，火狐浏览器，IE8+ if (el.textContent !== undefined) el.textContent = string; else el.innerText = string; //谷歌浏览器，火狐浏览器，IE9+ el.textContent = string;

Siblings

//JQUERY
$(el).siblings(); //谷歌浏览器，火狐浏览器，IE8+ var siblings = Array.prototype.slice.call(el.parentNode.children); for (var i = siblings.length; i--;) { if (siblings[i] === el) { siblings.splice(i, 1); break; } } //谷歌浏览器，火狐浏览器，IE9+ Array.prototype.filter.call(el.parentNode.children, function(child){ return child !== el; });

Toggle Class

//JQUERY
$(el).toggleClass(className); //谷歌浏览器，火狐浏览器，IE8+ if (el.classList) { el.classList.toggle(className); } else { var classes = el.className.split(' '); var existingIndex = -1; for (var i = classes.length; i--;) { if (classes[i] === className) existingIndex = i; } if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' '); } //谷歌浏览器，火狐浏览器，IE9+ if (el.classList) { el.classList.toggle(className); } else { var classes = el.className.split(' '); var existingIndex = classes.indexOf(className); if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' '); } //谷歌浏览器，火狐浏览器，IE10+ el.classList.toggle(className);

事件

Off

//JQUERY
$(el).off(eventName, eventHandler); //谷歌浏览器，火狐浏览器，IE8+ function removeEventListener(el, eventName, handler) { if (el.removeEventListener) el.removeEventListener(eventName, handler); else el.detachEvent('on' + eventName, handler); } removeEventListener(el, eventName, handler); //谷歌浏览器，火狐浏览器，IE9+ el.removeEventListener(eventName, eventHandler);

On

//JQUERY
$(el).on(eventName, eventHandler); //谷歌浏览器，火狐浏览器，IE8+ function addEventListener(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function(){ handler.call(el); }); } } addEventListener(el, eventName, handler); 谷歌浏览器，火狐浏览器，IE9+ el.addEventListener(eventName, eventHandler);

Ready

//JQUERY
$(document).ready(function(){ }); //谷歌浏览器，火狐浏览器，IE8+ function ready(fn) { if (document.readyState != 'loading'){ fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } //谷歌浏览器，火狐浏览器，IE9+ function ready(fn) { if (document.readyState != 'loading'){ fn(); } else { document.addEventListener('DOMContentLoaded', fn); }

指定事件触发

//JQUERY
$(el).trigger('my-event', {some: 'data'}); //js谷歌浏览器，火狐浏览器，IE9+ if (window.CustomEvent) { var event = new CustomEvent('my-event', {detail: {some: 'data'}}); } else { var event = document.createEvent('CustomEvent'); event.initCustomEvent('my-event', true, true, {some: 'data'}); } el.dispatchEvent(event);

Trigger Native

//JQUERY
$(el).trigger('change'); //谷歌浏览器，火狐浏览器，IE8+ if (document.createEvent) { var event = document.createEvent('HTMLEvents'); event.initEvent('change', true, false); el.dispatchEvent(event); } else { el.fireEvent('onchange'); } //谷歌浏览器，火狐浏览器，IE9+ // For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent var event = document.createEvent('HTMLEvents'); event.initEvent('change', true, false); el.dispatchEvent(event);

技巧

Array Each

//JQUERY
$.each(array, function(i, item){ }); 谷歌浏览器，火狐浏览器，IE8+ function forEach(array, fn) { for (i = 0; i < array.length; i++) fn(array[i], i); } forEach(array, function(item, i){ }); //谷歌浏览器，火狐浏览器，IE9+ array.forEach(function(item, i){ });

深度扩展

//JQUERY
$.extend(true, {}, objA, objB); //谷歌浏览器，火狐浏览器，IE8+ var deepExtend = function(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { var obj = arguments[i]; if (!obj) continue; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object') deepExtend(out[key], obj[key]); else out[key] = obj[key]; } } } return out; }; deepExtend({}, objA, objB);

proxy

//JQUERY
$.proxy(fn, context); //谷歌浏览器，火狐浏览器，IE8+ fn.apply(context, arguments); //谷歌浏览器，火狐浏览器，IE9+ fn.bind(context);

bind

//jQuery
$.extend({}, objA, objB); //谷歌浏览器，火狐浏览器，IE8+ var extend = function(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { if (!arguments[i]) continue; for (var key in arguments[i]) { if (arguments[i].hasOwnProperty(key)) out[key] = arguments[i][key]; } } return out; }; extend({}, objA, objB);

Index Of

//JQUERY
$.inArray(item, array); //谷歌浏览器，火狐浏览器，IE8+ function indexOf(array, item) { for (var i = 0; i < array.length; i++) { if (array[i] === item) return i; } return -1; } indexOf(array, item); 谷歌浏览器，火狐浏览器，IE9+ array.indexOf(item);

Is Array

//JQUERY
$.isArray(arr); //谷歌浏览器，火狐浏览器，IE8+ isArray = Array.isArray || function(arr) { return Object.prototype.toString.call(arr) == '[object Array]'; } isArray(arr); //谷歌浏览器，火狐浏览器，IE9+ Array.isArray(arr);

Map

//JQUERY
$.map(array, function(value, index){ }); //js谷歌浏览器，火狐浏览器，IE8+ function map(arr, fn) { var results = []; for (var i = 0; i < arr.length; i++) results.push(fn(arr[i], i)); return results; } map(array, function(value, index){ }); //谷歌浏览器，火狐浏览器，IE9+ array.map(function(value, index){ });

Now

//JQUERY
$.now(); //谷歌浏览器，火狐浏览器，IE8+ new Date().getTime(); //谷歌浏览器，火狐浏览器，IE9+ Date.now();

Parse Html

//JQUERY
$.parseHTML(htmlString); 谷歌浏览器，火狐浏览器，IE8+ var parseHTML = function(str) { var el = document.createElement('div'); el.innerHTML = str; return el.children; }; parseHTML(htmlString); 谷歌浏览器，火狐浏览器，IE9+ var parseHTML = function(str) { var tmp = document.implementation.createHTMLDocument(); tmp.body.innerHTML = str; return tmp.body.children; }; parseHTML(htmlString);

解析 Json

//JQUERY
$.parseJSON(string); //谷歌浏览器，火狐浏览器，IE8+ JSON.parse(string);

Trim

//JQUERY
$.trim(string); //谷歌浏览器，火狐浏览器，IE8+ string.replace(/^\s+|\s+$/g, ''); //谷歌浏览器，火狐浏览器，IE9+ string.trim();

Type

//JQUERY
$.type(obj); 谷歌浏览器，火狐浏览器，IE8+ Object.prototype.toString.call(obj) .replace(/^\[object (.+)\]$/, "$1") .toLowerCase();

ajax

新AJAX方法fetch()

基本Fetch用法

让我们先用一个例子来比较一下使用 XMLHttpRequest 和使用 fetch 之间的不同。我们要请求一个URL，获取JSON格式的返回结果。

原来的XMLHttpRequest

一个 XMLHttpRequest 请求需要两个监听器来捕捉 success 和 error 两种情形，而且需要调用 open() 和 send() 方法。

function reqListener() { var data = JSON.parse(this.responseText); console.log(data); } function reqError(err) { console.log('Fetch Error :-S', err); } var oReq = new XMLHttpRequest(); oReq.onload = reqListener; oReq.onerror = reqError; oReq.open('get', './api/some.json', true); oReq.send();

Fetch方法：

我们的 fetch 请求的代码基本上是这样的：

fetch('./api/some.json') .then( function(response) { if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } // Examine the text in the response  response.json().then(function(data) { console.log(data); }); } ) .catch(function(err) { console.log('Fetch Error :-S', err); });

用fetch执行表单数据提交

在WEB应用中，提交表单是非常常见的操作，用fetch来提交表单数据也是非常简洁。

fetch里提供了 method 和 body 参数选项。

fetch(url, { method: 'post', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" }, body: 'foo=bar&lorem=ipsum' }) .then(json) .then(function (data) { console.log('Request succeeded with JSON response', data); }) .catch(function (error) { console.log('Request failed', error); });

在Fetch请求里发送用户身份凭证信息

扫描二维码关注公众号，回复： 1109083 查看本文章

如果你想在fetch请求里附带cookies之类的凭证信息，可以将 credentials 参数设置成 “include” 值。

fetch(url, { credentials: 'include' })

JSON

    //JQUERY
    $.getJSON('/my/url', function(data) { }); //谷歌浏览器，火狐浏览器，IE8+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.responseText); } else { // Error :( } } }; request.send(); request = null; //谷歌浏览器，火狐浏览器，IE9+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send(); //谷歌浏览器，火狐浏览器，IE10+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.response); } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send();

Post

//JQUERY
$.ajax({ type: 'POST', url: '/my/url', data: data }); //谷歌浏览器，火狐浏览器，IE8+ var request = new XMLHttpRequest(); request.open('POST', '/my/url', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.send(data);

Request

//JQUERY
$.ajax({ type: 'GET', url: '/my/url', success: function(resp) { }, error: function() { } }); //谷歌浏览器，火狐浏览器，IE8+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function() { if (this.readyState === 4) { if (this.status >= 200 && this.status < 400) { // Success! var resp = this.responseText; } else { // Error :( } } }; request.send(); request = null; //谷歌浏览器，火狐浏览器，IE9+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var resp = request.responseText; } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send(); //谷歌浏览器，火狐浏览器，IE10+ var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! var resp = this.response; } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send();

特效

淡入淡出

//JQUERY
$(el).fadeIn(); //谷歌浏览器，火狐浏览器，IE8+ function fadeIn(el) { var opacity = 0; el.style.opacity = 0; el.style.filter = ''; var last = +new Date(); var tick = function() { opacity += (new Date() - last) / 400; el.style.opacity = opacity; el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')'; last = +new Date(); if (opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); } }; tick(); } fadeIn(el); //谷歌浏览器，火狐浏览器，IE9+ function fadeIn(el) { el.style.opacity = 0; var last = +new Date(); var tick = function() { el.style.opacity = +el.style.opacity + (new Date() - last) / 400; last = +new Date(); if (+el.style.opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16) } }; tick(); } fadeIn(el); //谷歌浏览器，火狐浏览器，IE10+ el.classList.add('show'); el.classList.remove('hide'); .show { transition: opacity 400ms; } .hide { opacity: 0; }

Hide

//JQUERY
$(el).hide(); //谷歌浏览器，火狐浏览器，IE8+ el.style.display = 'none';

Show

//JQUERY
$(el).show(); //谷歌浏览器，火狐浏览器，IE8+ el.style.display = '';

猜你喜欢

转载自www.cnblogs.com/yang6120yang/p/9108733.html
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022