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>
    
  • 相关阅读:
    Integer vs int
    j2ee gradle构建
    ubuntu16.04更新node.js
    阿里云centos7服务器
    使用jdbc给一张表增加多行字段
    安装mysql后,java使用jdbc连接mysql数据库
    关于异常try{}catch(){}
    计算机基础单位
    java mongodb 增删改查 工具类
    java 操作mongodb查询条件的常用设置
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9534735.html
Copyright © 2011-2022 走看看