jquery属性的相关js实现方法 #185

confidence68 · 2015-12-24T08:39:58Z

有些公司手机网站开发不用第三方的jquery或者zeptio，直接用原生的javascript。原生javascript功能是蛮强大的，只不过部分属性不支持IE8以下浏览器。下面对jquery相关方法，如何用js来实现，做一些简单总结。

元素操作

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');

//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}

//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请求里发送用户身份凭证信息

如果你想在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 = '';

The text was updated successfully, but these errors were encountered:

cssmagic · 2015-12-27T04:56:08Z

建议给代码加语法着色 😃

```js
// your code here
```

yutingzhao1991 mentioned this issue Dec 27, 2015

文章更新 [ 2015-12-20 - 2015-12-26 ] yutingzhao1991/github-blogs-weekly#19

Open

chuangtim mentioned this issue Nov 15, 2016

Web chuangtim/github-blog#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery属性的相关js实现方法 #185

jquery属性的相关js实现方法 #185

confidence68 commented Dec 24, 2015

cssmagic commented Dec 27, 2015

jquery属性的相关js实现方法 #185

jquery属性的相关js实现方法 #185

Comments

confidence68 commented Dec 24, 2015

元素操作

Add Class

After

Append

Before

Children

Clone

Contains

Contains Selector

Each

Empty

过滤filter

查找子元素

查找、选择器

获取属性值attr

获取Html内容

获取CSS样式

获取文本内容

Has Class

元素比较

比较类名

Next

Offset

Outer Width

Parent

Position

Prev

Remove

Remove Class

Replace From Html

Set Attributes

Set Html

Set Style

Set Text

Siblings

Toggle Class

事件

Off

On

Ready

指定事件触发

Trigger Native

技巧

Array Each

深度扩展

proxy

bind

Index Of

Is Array

Map

Now

Parse Html

解析 Json

Trim

Type

ajax

JSON

Post

Request

特效

淡入淡出

Hide

Show

cssmagic commented Dec 27, 2015