jQuery与JavaScript 原生DOM API()用哪个好?

最新推荐文章于 2023-11-17 14:15:20 发布

简简简简abc

最新推荐文章于 2023-11-17 14:15:20 发布

阅读量794

点赞数 1

分类专栏： WEB前端基础文章标签： jquery api dom javascript

本文链接：https://blog.csdn.net/weixin_36571185/article/details/78004294

版权

WEB前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test jQuery</title>
</head>
<body>

<button class="foo">当点击扎个按钮时,添加一个链接</button>
<button class="foo">该按钮不会有反应</button>

<!--//使用Jquery例子-->
<script>
    //class='foo' 的第一个button元素
    $('button.foo:first').click(function () {
        $('<div><a></a></div>')//创建div元素/div中a元素这一子元素.这是选择的是div元素
            .find('a')//对a元素进行选择.所选择的目标从div元素转为a元素
            .text('jQery.com')//将a元素的文本设定为jQuery.com
            .attr('href','http://jQuery.com')//将a元素的href属性设为http://jQuery.com
            .end()//结束对a元素的选择.在a元素被选择之前所选中的div元素回到了被选择的状态
            .appendTo('body')        //将div元素添加到body
    })
</script>


<!--不使用jquery的例子-->
<script>
   //在被点击时所进行的处理
   var onClick = function () {
       var div = document.createElement('div');
       var a = document.createElement('a');
       a.appendChild(document.createTextNode('Jquery.com'));
       a.href = 'http://jquery.com';
       div.appendChild(a);
       document.body.appendChild(div);
   };

   //通过getElementsByTagName()来获取所有的button元素
   var buttons = document.getElementsByTagName('button');
   //在所取得的button元素中找到第一个类名包含了foo的元素
   //对点击事件设定事件监听器
   for (var i = 0, len = buttons.length;i<len;i++){
       if (buttons[i].className.match(/(^|\s)foo(\s|$)/)){
           buttons[i].addEventListener('click', onClick, false);
           break;
        }
   }
</script>
</body>
</html>

运行截图:
这里写图片描述

这里写图片描述

总结:
获取这种程度的功能还不至于使书写变得过于复杂,但代码量几乎倍增.使用jQuery无需用到变量,DOM Api,if语句以及for语句等控制语句.变量,控制语句使用越多,出错的可能越大,如果能少用,还是少用的好.

同样的功能用jQuery库,就能写出简洁的形式.在某个元素被点击后的事件处理是javaScript中常见的处理.想想以后以后要写N多千篇一律的代码,忍不住颤抖,太可怕了.

所以请对自己好点,用jquery库吧.

简简简简abc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery与JavaScript 原生DOM API()用哪个好?

Demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test jQuery</title></head><body><button class="foo">当点击扎个按钮时,添加一个链接</button><button class="foo">该按钮不会有反应</button><!-
复制链接

扫一扫