您的位置: 首页  >  IT文章  >  js Demo

js Demo

分类: IT文章 • 2025-01-13 20:35:02

什么是jQuery

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的功能放到一个单独的文件中，我们在用的时候，直接引用到页面里即可。

关于jQuery的相关资料：

为什么要使用jQuery

在用js写代码的时候，会遇到一些问题：
  • window.onload事件有事件覆盖的问题，因此只能写一个事件。
  • 代码容错性差
  • 浏览器兼容性问题
  • 书写很繁琐，代码量多
  • 代码混乱
  • 动画效果很难实现
而jQuery的出现，可以解决以上问题。

jQuery的特点

jQuery有两个特点
  • 链式编程：比如.show()和.html()可以连写成.show().html()
  • 隐式迭代：隐士对应的是显示。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

学习jQuery，主要是学什么

在学习jQuery的初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些API。

这些API的共同特点是：几乎全部都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号"()"，小括号里面是对应的参数，参数不同，功能不同。

jQuery代码和js代码的比较

使用原生js来实现下面代码效果： ```html js Demo 
<script type="text/javascript">
    window.onload = function(){
        var oBtn = document.getElementsByTagName("button")[0];
        var divArr = document.getElementsByTagName("div");
        oBtn.onclick = function(){
            for(var i = 0; i < divArr.length; i++){
                divArr[i].style.display = "block";
                divArr[i].innerHTML = "test";
            };
        }
    }
</script>
``` 如果用jQuery来写，保持html和css代码不变，只修改script部分代码： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Demo</title>
    <style type="text/css">
        div{
             100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            // 获取DOM元素
            var oBtn = $("button"); //根据标签名获取元素
            var oDiv = $("div");    //根据标签名获取元素

            oBtn.click(function(event) {
                oDiv.show(1000);    //显示div
                oDiv.html("test")   //设置内容
            }); //事件是通过方法绑定的
        })
    </script>
</head>
<body>
    <button>操作</button>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

相关推荐