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>
    
  • 相关阅读:
    Python模块:shutil、序列化(json&pickle&shelve)、xml
    IO流----操作文件的9种方法代码实现
    IO流--字符流与字节流--File类常用功能
    常用集合之间的关系
    HashMap 集合的遍历
    java代码实现ftp服务器的文件上传和下载
    java中数组、集合、字符串之间的转换,以及用加强for循环遍历
    java中的正则表达式
    使用Calender类获取系统时间和时间和运算
    产生任意区间的随机数
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9534735.html
Copyright © 2011-2022 走看看