正文 

当前位置： 首页 > java > java语法

你可能不需要jquery！使用原生javascript进行开发

     2022-02-09     488

关键词：

jquery 转原生js 的一些方法 / jq转js / jquery与js。

 

　　很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。

　　然而，另一方面，作为前端开发的基础框架，jQuery 包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。

 

 

　　下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。 

Ajax Post

jQuery：

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

IE8+：

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.send(data);

Ajax Get

jQuery：

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});　

IE8+：

request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onreadystatechange = function() {
  if (this.readyState === 4){
    if (this.status >= 200 && this.status < 400){
      // Success!
      resp = this.responseText;
    } else {
      // Error :(
    }
  }
}

request.send();
request = null;

加载 JSON

jQuery：

$.getJSON('/my/url', function(data) {

});

IE8+：

request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onreadystatechange = function() {
  if (this.readyState === 4){
    if (this.status >= 200 && this.status < 400){
      // Success!
      data = JSON.parse(this.responseText);
    } else {
      // Error :(
    }
  }
}

request.send();
request = null;

淡入效果

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

显示和隐藏

jQuery：

$(el).show();
$(el).hide();

IE8+：

el.style.display = '';
el.style.display = 'none';

添加 Class

jQuery：

$(el).addClass(className);

IE8+：

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

插入 HTML

jQuery：

$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);

IE8+：

el.insertAdjacentHTML('beforebegin', htmlString);
parent.appendChild(el);
el.insertAdjacentHTML('afterend', htmlString);

获取子节点

jQuery：

$(el).children();

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]);
}

循环节点

jQuery：

$(selector).each(function(i, el){

});

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){

});

清空节点

jQuery：

$(el).empty();

IE8+：

while(el.firstChild)
  el.removeChild(el.firstChild)

过滤节点

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

查找元素

jQuery：

$(el).find(selector);
$('.my #awesome selector');

IE8+：

el.querySelectorAll(selector);
document.querySelectorAll('.my #awesome selector');

获取属性、HTML或者文本

jQuery：

$(el).attr('tabindex');
$(el).html();
$('<div>').append($(el).clone()).html();
$(el).text();

IE8+：

el.getAttribute('tabindex');
el.innerHTML
el.outerHTML
el.textContent || el.innerText

判断是否包含某个 css class

jQuery：

$(el).hasClass(className);

IE8+：

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);　

选择器匹配

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

前一个节点

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

后一个节点

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

外部高度

jQuery：

$(el).outerHeight()

IE8+：

function outerHeight(el, includeMargin){
  var height = el.offsetHeight;

  if(includeMargin){
    var style = el.currentStyle || getComputedStyle(el);
    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  } 
  return height;
}

outerHeight(el, true);

外部宽度

jQuery：

$(el).outerWidth()

IE8+：

function outerWidth(el, includeMargin){
  var height = el.offsetWidth;

  if(includeMargin){
    var style = el.currentStyle || getComputedStyle(el);
    height += parseInt(style.marginLeft) + parseInt(style.marginRight);
  } 
  return height;
}

outerWidth(el, true);

判断是否数组

jQuery：

$.isArray(arr);

IE8+：

isArray = Array.isArray || function(arr) {
  return Object.prototype.toString.call(arr) == '[object Array]';
}

isArray(arr);

数组转换

jQuery：

$.map(array, function(value, index){

})

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){

})

　　类似的还有很多很多，可以参考这里：http://youmightnotneedjquery.com/。

源：http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

 

javascript实现原生ajax

...使用ajax已经变的相当简单了。但有时候为了追求简洁，可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢？下面和大家分享javascript实现原生ajax的方法。 实现ajax之前必须要创建一个XMLHttpRequ... 查看详情

jquery函数的等价原生函数代码示例

...：需要注意下面有些原生方法是HTML5引用的，部分浏览器可能不能使用。选择器jQuery的核心之一就是能非常方便的取到DOM元素。我们只需输入CSS选择字符串，便可以得到匹配的元素。但在大多数情况下，我们可以用简单的原生代... 查看详情

原生javascript的意义

原生JS是指遵循ECMAscript标准的javascript，不同于微软的jscript也不依赖于任何框架，依托于浏览器标准引擎的脚本语言。jquery是在原生态的js上集成的框架资源，使用jquery并不代表代码就不是你写的，区别在于使用jquery只是使用了... 查看详情

使用javascript需要引入啥包?

如果你用的是jquery-easyui.js这样的jquery扩展库，就需要jquery库的支持，所以，你应该在jquery-easyui扩展库的前面引入jquery文件。<scripttype="text/javascript"src="js/jquery-1.7.1.js"></script><scripttype="text/javascript"... 查看详情

前端相关内容补充

原生JS：原生态js是指遵循ECMAscript标准的javascript，不同于微软的jscript也不依赖于任何框架，依托于浏览器标准引擎的脚本语言，jquery是在原生态的js上集成的框架资源，使用jquery并不代表代码就不是你写的，区别在于使用jquery只... 查看详情

[javascript]_[初级]_[不使用jquery原生ajax提交表单](代码片段)

场景在开发网页表单时，需要异步提交表单并返回提交成功或错误的提示。如何在不需要JQuery库的前提下发送Ajax表单请求？说明JQuery库在在IE还在存在的时候很适合作为前端开发兼容浏览器的JavaScript库。之后现在大多数... 查看详情

[javascript]_[初级]_[不使用jquery原生ajax提交表单](代码片段)

场景在开发网页表单时，需要异步提交表单并返回提交成功或错误的提示。如何在不需要JQuery库的前提下发送Ajax表单请求？说明JQuery库在在IE还在存在的时候很适合作为前端开发兼容浏览器的JavaScript库。之后现在大多数... 查看详情

使用 jquery 添加两个变量

...符串而不是数字，你需要parseInt()或parseFloat()（如果它们可能是小数），像这样：vara="1 查看详情

❤️一个有趣小案例教你如何使用原生js使用和jquery应该如何使用jsonp❤️(代码片段)

文章目录一、什么是jsonp?二、原生js中jsonp的使用三、jquery中jsonp的使用四、总结一、什么是jsonp?简单点,jsonp其实就是一个跨域解决方案。当然它和json没有半毛钱关系!浏览器处于安全考虑,制定了同源策略,即同协议、同主机名、... 查看详情

❤️一个有趣小案例教你如何使用原生js使用和jquery应该如何使用jsonp❤️(代码片段)

文章目录一、什么是jsonp?二、原生js中jsonp的使用三、jquery中jsonp的使用四、总结一、什么是jsonp?简单点,jsonp其实就是一个跨域解决方案。当然它和json没有半毛钱关系!浏览器处于安全考虑,制定了同源策略,即同协议、同主机名、... 查看详情

原生js实现ajax

...如jquery，使用ajax已经变的相当简单了。但是有的项目不需要加载jquery这种庞大的js插件，只需要实现ajax即可。所以我们就需要自己用原生JS实现ajaxajax：一种请求数据的方式，不需要刷新整个页面；ajax的技术核心是XMLHttpRequest对... 查看详情

[javascript]_[初级]_[不使用jquery原生ajax提交表单文件并监听进度](代码片段)

...明提交表单文件<formenctype="multipart/form-data"...需要增加enctype="multipart/form-data"的属性，不然无法提交成功。使用原生XMLHttpRequest技术提交文件时，是不需要设置Content-Type[5]的。对上传文件进行进度监听&#x... 查看详情

jquery-原生如何互转

 今天研究源码的时候发现，不需要用get()也能进行原生转换，使用原生方法。原生-jQuery对象 　　varobj=document.xxx　　$(obj).css();　　也可以直接$(document.xxx)jQuery对象-原生　　方法一：get() 　　　　$(‘li‘).get();　　这... 查看详情

jquery学习目录

前面的话　　目前来说，jQuery可能已经不再处于人们的话题中心。人们讨论的更多的是Vue、Angular和React。但是，jQuery的使用量依然广泛，据统计，它仍然是目前使用率最高的javascript库。jQuery简化了javascript的复杂操作，不再需要... 查看详情

[javascript]_[初级]_[不使用jquery原生ajax提交表单文件并监听进度](代码片段)

...明提交表单文件<formenctype="multipart/form-data"...需要增加enctype="multipart/form-data& 查看详情

[javascript]_[初级]_[不使用jquery原生ajax提交表单文件并监听进度](代码片段)

...明提交表单文件<formenctype="multipart/form-data"...需要增加enctype="multipart/form-data& 查看详情

用jquery基于原生js封装的轮播

...增色不少，最近闲来无事，也用原生js封装了一个轮播，可能不像网上的插件那么炫，但是也有用心去做。主要用了闭包的思想。需要传递的参数有：图片地址的数组，图片宽度，上一页，下一页的id,图片列表即ul的id(这儿使用... 查看详情

你可能并不需要消息队列

...签名。它们有什么本质的区别吗？其实没有。　　不过你可能还有别的消费者想要对某个指定的消息进行额外的处理？这的确是可能发生的，而并不只是针对我们这里说到的这个项目而已。尽管确有可能，但相比添加另一个方法... 查看详情