资讯专栏INFORMATION COLUMN

不要过度依赖JQuery(二)

Labradors / 3366人阅读

摘要:为什么说不要过度依赖呢从项目方面来讲,一些项目在开发中实际用到内置功能不多,这样会造成项目臃肿另一方面,目前的主流已经倾向于原生开发。而在之前一篇不要过度依赖一一文中已经介绍了部分使用原生实现功能的代码,这一章将继续列举。

为什么说不要过度依赖JQuery呢?从项目方面来讲,一些项目在开发中实际用到JQuery内置功能不多,这样会造成项目臃肿;另一方面,目前的主流已经倾向于原生开发。

而在之前一篇《不要过度依赖JQuery(一)》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码,这一章将继续列举。

1、位置

获取相对于文档的位置

</>复制代码

  1. $("#test").offset()
  2. function offset(elem) {
  3. var rect = elem.getBoundingClientRect()
  4. return {
  5. top: rect.top + document.body.scrollTop,
  6. left: rect.left + document.body.scrollLeft
  7. }
  8. }
  9. offset(document.getElementById("test"));

获取相对于具有定位(非static)的父元素(祖先元素)的位置:

</>复制代码

  1. $("#test").position()
  2. var t = document.getElementById("test");
  3. var position = {top: t.offsetTop, left: t.offsetLeft};

获取相对于可视区左上角的位置

</>复制代码

  1. var offset = $("#test").offset();
  2. var position = { top: offset.top - document.body.scrollTop,
  3. left: offset.left - document.body.scrollLeft
  4. }
  5. var position = document.getElementById("test").getBoundingClientRect();

2、尺寸

获取包含内边距(padding)和边框(border)的元素高宽

</>复制代码

  1. var width = $("#test").outerWidth();
  2. var height = $("#test").outerHeight();
  3. var t = document.getElementById("test");
  4. var width = t.offsetWidth;
  5. var height = t.offsetHeight;

获取元素内容的总高度

</>复制代码

  1. var t = document.getElementById("test");
  2. /*在没有滚动条的情况下,元素内容的总高度*/
  3. t.scrollHeight
  4. /*在没有滚动条的情况下,元素内容的总宽度*/
  5. t.scrollWidth

视口大小

</>复制代码

  1. var pageWidth = window.innerWidth || document.documentElement.clientWidth;
  2. var pageHeight = window.innerHeight || document.documentElement.clientHeight;

3、绑定自定义数据

</>复制代码

  1. /*绑定*/
  2. $("#test").data("name", "TG");
  3. /*读取*/
  4. $("#test").data("name");
  5. /*移除*/
  6. $("#test").removeDate("name");
  7. var t = document.getElementById("test");
  8. /*绑定*/
  9. t.dataset.name = "TG";
  10. /*读取*/
  11. t.dataset.name
  12. /*移除*/
  13. delete t.dataset.name

4、事件

绑定事件

</>复制代码

  1. $("#test").on("click", function(){})
  2. var addEvent = function(dom, type, handle, capture) {
  3. if(dom.addEventListener) {
  4. dom.addEventListener(type, handle, capture);
  5. } else if(dom.attachEvent) {
  6. dom.attachEvent("on" + type, handle);
  7. }
  8. };
  9. var t = document.getElementById("test");
  10. addEvent(t, "click", function(){});

移除事件

</>复制代码

  1. $("#test").off("click", fn);
  2. var deleteEvent = function(dom, type, handle) {
  3. if(dom.removeEventListener) {
  4. dom.removeEventListener(type, handle);
  5. } else if(dom.detachEvent) {
  6. dom.detachEvent("on" + type, handle);
  7. }
  8. };
  9. var t = document.getElementById("test");
  10. deleteEvent(t, "click", fn);

事件代理

</>复制代码

  1. $(document).on("click", ".test", fn);
  2. function eventBroker(e, className, fn) {
  3. var target = e.target;
  4. while(target) {
  5. if(target && target.nodeName == "#document") {
  6. break;
  7. } else if(target.classList.contains(className)) {
  8. fn();
  9. break;
  10. };
  11. target = target.parentNode;
  12. };
  13. }
  14. addEvent(document, "click", function(e){
  15. eventBroker(e, "test", function(){});
  16. });

获取Event对象

</>复制代码

  1. $("#test", "click", function(event){
  2. event = event.originalEvent;
  3. });
  4. var t = document.getElementById("test");
  5. addEvent(t, "click", function(event){
  6. event = event || window.event;
  7. });

DOM加载完毕

</>复制代码

  1. $(document).ready(function(){});
  2. function ready(fn) {
  3. if (document.readyState != "loading"){
  4. // ie9+
  5. document.addEventListener("DOMContentLoaded", fn);
  6. } else {
  7. // ie8
  8. document.attachEvent("onreadystatechange", function() {
  9. if (document.readyState != "loading"){
  10. fn();
  11. }
  12. });
  13. }
  14. }

指定事件触发

</>复制代码

  1. $("#test").trigger("click");
  2. function trigger(elem, type) {
  3. if (document.createEvent) {
  4. var event = document.createEvent("HTMLEvents");
  5. event.initEvent(type, true, false);
  6. elem.dispatchEvent(event);
  7. } else {
  8. elem.fireEvent("on" + type);
  9. }
  10. }
  11. var t = document.getElementById("test");
  12. trigger(t, "click");

5、AJAX

GET

</>复制代码

  1. $.get("test.php", { name: "TG"},
  2. function(data){
  3. console.log(data);
  4. });
  5. var xhr= new XMLHttpRequest();
  6. xhr.open("GET", "test.php?name=TG", true); // false(同步)
  7. xhr.onreadystatechange = function() {
  8. if (xhr.readyState === 4) {
  9. if (xhr.status >= 200 && xhr.status < 400) {
  10. // 成功
  11. var data = JSON.parse(xhr.responseText);
  12. } else {
  13. // 错误
  14. }
  15. }
  16. };
  17. xhr.send(null);

POST

</>复制代码

  1. $.post("test.php", { name: "TG"},
  2. function(data){
  3. console.log(data);
  4. });
  5. var xhr= new XMLHttpRequest();
  6. xhr.open("POST", "test.php", true); // false(同步)
  7. xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 必需
  8. xhr.onreadystatechange = function() {
  9. if (xhr.readyState === 4) {
  10. if (xhr.status >= 200 && xhr.status < 400) {
  11. // 成功
  12. var data = JSON.parse(xhr.responseText);
  13. } else {
  14. // 错误
  15. }
  16. }
  17. };
  18. var data = {name: "t"};
  19. xhr.send(data);

Fetch 请求

GET

</>复制代码

  1. fetch(url).then(function (response) {
  2. return response.json();
  3. }).then(function (jsonData) {
  4. console.log(jsonData);
  5. }).catch(function () {
  6. console.log("出错了");
  7. });

POST

</>复制代码

  1. fetch(url,{
  2. method: "POST",
  3. headers: {
  4. "Content-Type": "application/x-www-form-urlencoded"
  5. },
  6. body: "name=TG&love=1"
  7. }).then(function(response){})

6、数组

判断元素是否在数组内

</>复制代码

  1. $.inArray(item, array)
  2. array.indexOf(item)

判断是否是数组

</>复制代码

  1. $.isArray(arr)
  2. Array.isArray(arr)

数组迭代

</>复制代码

  1. $.map(arr, function(value, index) {})
  2. arr.map(function(value, index) {})

7、特效

隐藏显示

</>复制代码

  1. $("#test").hide();
  2. var t = document.getElementById("test");
  3. t.style.display = "none";
  4. $("#test").show();
  5. t.style.display = "block";

原文链接:不要过度依赖JQuery(二)

如有错误,欢迎指正!如有更好建议,欢迎留言!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81284.html

相关文章

  • 不要过度依赖JQuery(三)

    摘要:在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升回归正题,在不要过度依赖一和不要过度依赖二两篇文章中已经列举了大量的使用原生替代的例子,在本文中将继续列举表单获取焦点失去焦点实时监控判断类型判断类型判断是否为一个函数判断是否为数字判断是 在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升! 回归正题,在不要过度依赖JQuery(一)和不要过度依赖JQuery(二)两篇文章中已经列举了...

    pekonchan 评论0 收藏0
  • 不要过度依赖JQuery(三)

    摘要:在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升回归正题,在不要过度依赖一和不要过度依赖二两篇文章中已经列举了大量的使用原生替代的例子,在本文中将继续列举表单获取焦点失去焦点实时监控判断类型判断类型判断是否为一个函数判断是否为数字判断是 在这里先拜个年,祝大家新年快乐,阖家幸福,步步高升! 回归正题,在不要过度依赖JQuery(一)和不要过度依赖JQuery(二)两篇文章中已经列举了...

    vvpvvp 评论0 收藏0
  • H5 知识点 - 收藏集 - 掘金

    摘要:目录不要过度依赖一前端掘金毫无疑问,是一款非常优秀的库,它让我们开发项目变得更加便捷容易。但是作为一个前端工作者,我们肯定也希望在我们的网页里也能看到这么酷分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中,已经非常普及了。 跨域解决方案总结 - 前端 - 掘金为什么需要跨域? 就得先知道同源策略. 同源策略 同源策略是为了保证数据的安全性,一个域的脚本不能去操作另外一个域的脚本的...

    frontoldman 评论0 收藏0

发表评论

0条评论

Labradors

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<