zoukankan      html  css  js  c++  java
  • jQuery之HelloWorld

    jQuery介绍

    介绍:

      jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。

    核心思想:

      它的核心思想是write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。

    好处:

      jQuery是免费、开源的,jQuery的语法设计可以使开发更加便捷,例如:

        强大选择器:方便快速查找DOM元素

        隐式遍历(迭代):一次操作多个元素

        读写合一:读数据/写数据用的是一个函数

        链式调用:可以通过,不断调用jQuery对象的方法

        HTML事件处理

        DOM操作(CUD)

        CSS样式操作

        动画效果

        浏览器兼容

        易扩展插件

        ajax封装

    jQuery使用

    引入jQuery库:

      本地引入与CDN远程引入。

    区别2种js库库文件:

      开发版(测试版)

      生产版(压缩版)

    区别2种引用js库的方式:

      服务器本地库:开发测试时使用,加重了服务器负担,上线时一般不使用这种方式。

      CDN远程库:项目上线时,一般使用比较靠谱的CDN资源库减轻服务器负担。

    使用jQuery

      jQuery核心函数:$/jQuery

      jQuery核心对象:$xxx(执行$()得到的)

    区别jQuery的不同版本:

      1.x:兼容老版本IE,文件更大。

      2.x:部分IE8及以下不支持,文件小,执行效率更高。

      3.x:完全不再支持IE8及以下版本,提供了一些新的API,提供不包含ajax/动画API的版本。

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HelloWorld</title>
    </head>
    <body>
    <!-- 需求: 点击"确定"按钮,提示输入的值 -->
    用户名:<input type="text" id="username">
    <button id="btn1">确定(原生版)</button>
    <button id="btn2">确定(jQuery版)</button>
    
    <!-- 方式一:使用原生JS实现功能 -->
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById('btn1');
            btn.onclick = function () {
                alert(document.getElementById('username').value);
            }
        }
    </script>
    <!--
        方式二:使用jQuery实现功能
        1.引入jQuery库
            本地引入
            远程引入
        2.使用jQuery函数和jQuery对象编码
    -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn2').click(function  () {
                alert($('#username').val());
            });
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    一、入门实例
    十四、事物配置
    JAVA-调用http链接
    ORACLE 年龄计算到月份
    ORACLE和MYSQL 去重查询
    JAVA--将图片转为BASE64编码并返回thymeleaf页面
    JAVA--将图片保存至项目路径
    java--获取类加载路径和项目根路径
    excel执行INSERT和UPDATE操作语句
    c# 未能加载Oracle.DataAccess, Version=2.112.1.0, Culture=neutral, PublicKeyToken=89b483f429c47342
  • 原文地址:https://www.cnblogs.com/hfl1996/p/13261337.html
Copyright © 2011-2022 走看看