zoukankan      html  css  js  c++  java
  • js Demo

    什么是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>
    
  • 相关阅读:
    JAVA文件操作类和文件夹的操作代码示例
    java去除表达符号的正则表达式
    正则表达式以过滤特殊字符
    eclipse与myeclipse恢复已删除的文件和代码
    Windows 2003 Server R2 x64 IIS6.0 eWebEditor无法显示的问题
    获得每日,每周,每月的0点和24点的时间戳
    Access查询时间段 .
    java连接Access数据库的两种方法
    移动App专项测试
    linux性能评估-内存基础理解篇
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9534735.html
Copyright © 2011-2022 走看看