01 jQuery初使用

jQuery是一个曾经火遍大江南北的一个Javascript的第三方库. jQuery的理念: write less do more. 其含义就是让前端程序员从繁琐的js代码中解脱出来. 我们来看看是否真的能解脱出来.

关于jQuery的版本: 这里有必要说一下, jQuery一共提出过3个大版本. 分别是1.x, 2.x和3.x. 这里注意, 虽然目前最新的是3.x. 但各个公司都不约而同的选择了1.x. 说明jQuery1.x在编程界的地位是非常非常高的. 而且从其执行效率, 代码兼容性以及代码可靠性上讲. 1.x确实做到了极致. 所以, 我们学习的版本自然也是1.x了. 我们选择和腾讯课堂同一个版本. 1.9.1

jQuery的下载, 推荐直接去cdn下载即可. 他本质就是一个js文件. 去哪儿都一样.

字节cdn: https://cdn.bytedance.com/

jquery: https://cdn.bytedance.com/?query=jquery&version=1.9.1

只需要把上面这个jquery下载的网址复制到浏览器上, 然后保存(ctrl+s)成js文件就可以了.

我们用jQuery来完成一个按钮的基本点击效果. 当然, 得和传统的js对比一下。

我们先准备好html页面结构：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div-out{

            width: 400px;

            height: content-box;

            margin: 0 auto;

            padding: 0;

        }

        .mydiv{

            width: 400px;

            height: 200px;

            line-height: 200px;

            text-align: center;

            background: pink;

            margin:0;

            padding: 0;

            font-size: 18px;

        }

        .btn{

            width: 400px;

            height: 50px;

            padding: 0;

            border: none;

            margin: 0;

            box-sizing: content-box;

            font-size: 18px;

            color: #000;

            background: #999999;

        }

        .btn:hover{

            cursor: pointer;

            color: pink;

        }

        .btn:active{

            color: #666;

            background-color: #eee;

        }

    </style>

</head>

<body>

    <div class="div-out">

        <input type="button" class="btn" value="我是按钮. 你怕不怕">

        <div class="mydiv">我怕死了...</div>

    </div>

</body>

</html>

需求: 点击按钮. 更改mydiv中的内容.

传统js：

// 版本1

window.addEventListener('load', function(){

    document.getElementsByClassName("btn")[0].addEventListener('click', function(){

        document.getElementsByClassName('mydiv')[0].innerText = "真的不怕啊";

    });

})

// 版本2

window.onload = function(){

    document.querySelector(".btn").onclick = function(){

        document.querySelector('.mydiv').innerText = "我好啪啪啊";

    };

}


// jQuery

$(function(){  // $(document).ready(function(){

    $(".btn").click(function(){

        $(".mydiv").text('我要上天');

    })

})

除了$外, 其他东西貌似都挺容易理解的. 而且代码简洁. 异常舒爽.

$是什么鬼, 在jQuery中, $可以认为是jQuery最明显的一个标志了. $()可以把一个普通的js对象转化成jQuery对象. 并且在jquery中 $的含义就是jQuery.

01 jQuery初使用的更多相关文章

  1. jQuery 初知

    jQuery 初知 介绍: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

  2. Jquery初体验一

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. JQuery初体验

    虽然做b/s也有一年半了,但是还没怎么认真的去看JQuery,趁自己生病的这几天,恶补一下JQuery方面的知识,保持学习的态度,内容很简单,聊以自慰一下>_<.废话不多说,直接上代码了. ...

  4. 【MVC学习笔记01】初窥奥秘

    前言 最近工作落实了,是我非常喜欢的无线前端,会接触很多新东西啦,需要努力才行.因为会用到backbone,所以要学习MVC啦. MVC(模型-视图-控制器),这种模式最早被用于构建桌面程序和服务器端 ...

  5. 【jQuery基础学习】01 jQuery选择器

    关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...

  6. 【整理】01. jQuery.Form.js 用法分析

    前言: 为什么使用JQuery.From.js,因为原生<form>表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数. jQuery.form.js是一个f ...

  7. jQuery源码逐行分析学习01(jQuery的框架结构简化)

    最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...

  8. 【原创】Jquery初体验二

    快速导航 一.传统方式生成Table 二.使用jquery.tmpl插件快速生成Table 三.Jquery中的操作class的几个方法 四:jq里面的克隆 五:属性过滤器 六:表单元素过滤器 一.传 ...

  9. ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后

    ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...

  10. jquery 初篇

    一.什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用  ...

随机推荐

  1. ubuntu 23.04 无法联网

    一些参考文章: 解决ubuntu突然无法联网问题 共享主机网络方法: https://www.server-world.info/en/note?os=Ubuntu_22.04&p=squid ...

  2. win32 - 将线程重定向到另一个函数(附带Suspend的解释)

    Suspend: 挂起指定的线程 备注:不要永远挂起线程, 因为在Win32中,进程堆是线程安全的对象,并且由于在不访问堆的情况下很难在Win32中完成很多工作,因此在Win32中挂起线程极有可能使进 ...

  3. 搭建Windows环境下的多功能免费SSH客户端

    关于Windows下的SSH客户端工具,可以有许多选择,从开源免费到商业收费的,零零总总. 免费版: Putty就是最简单的SSH客户端,非常轻量级. Electerm是一个开源可免费使用的跨平台SS ...

  4. typing模块中Protocol协议的使用

    说明 在 Python 的 typing 模块中,Protocol 是一个用于定义协议(Protocol)的类. 协议是一种形式化的接口,定义了一组方法或属性的规范,而不关心具体的实现.Protoco ...

  5. 【补档_C51单片机】基于C51的蜂鸣器音乐盒工程源码解析（可播放《打上花火》）

    项目地址:https://gitee.com/daycen/c51-music-box 通过Keil uVision3打开即可使用 以前做的一些小硬件,现补档至博客 1 功能及总体方案 1.1 功能描 ...

  6. SpringCloud组件：Feign之日志输出

    目录 Feign之日志输出 Feign日志输出说明 前期准备 构建项目 tairan-spring-cloud-feign-logger配置 源码位置 Feign之日志输出 在我们日常开发过程中,经常 ...

  7. 【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)

    问题描述 使用 .NET Azure.Identity 中的 DefaultAzureCredential 认证并连接到Azure Key Vault中, 在Key Vault 的示例中,并没有介绍如 ...

  8. 【Azure 应用服务】可以在app service里建SFTP服务吗？

    问题描述 怎样可以在App Service里建SFTP服务? 并不是说通过FTP的方式进行App Service的文件部署. 问题回答 不能通过 App Service 来搭建总计的SFTP服务,因为 ...

  9. SpringBoot2.x 启动过程详解

    spring 简化了java应用开发, 而springboot则简化了 spring应用的开发,用约定优于配置优于编码的方式快速构建spring对其他框架的整合. 官方文档 探究Hello,World ...

  10. ie7bug，一个块级元素或者一个行内元素里面有个子元素设置向右边浮动，在IE7会出现元素下掉现象！

    元素包含结构如下: <h1>testing<span>综合评级:<em></em></span></h1> CSS,如下 h1{ ...