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. webrtc 渲染音频时遇到的问题

    有用户反馈连麦时,直播间会有电流声,后面排查发现是 webrtc 内部播放器渲染音频时,用户的播放设备不支持 48000hz 采样率(我们传输的音频采样率都是 48000hz),导致音频数据受损而出现 ...

  2. 以二进制文件安装K8S之高可用部署架构

    在Kubernetes系统中,Master节点扮演着总控中心的角色,通过不间断地与各个工作节点(Node)通信来维护整个集群的健康工作状态,集群中各资源对象的状态则被保存在etcd数据库中. 在正式环 ...

  3. 数据抽取平台pydatax介绍--实现和项目使用

    数据抽取平台pydatax实现过程中,有2个关键点: 1.是否能在python3中调用执行datax任务,自己测试了一下可以,代码如下:    这个str1就是配置的shell文件 try: resu ...

  4. 【Azure 事件中心】Spring Boot 集成 Event Hub(azure-spring-cloud-stream-binder-eventhubs)指定Partition Key有异常消息

    问题描述 在Spring Boot应用中集成Event Hub,发送消息时指定Partition Key,日志中发现异常: 应用使用Event Hub版本为 <dependency> &l ...

  5. Nebula Importer 数据导入实践

    本文首发于 Nebula Graph Community 公众号 前言 Nebula 目前作为较为成熟的产品,已经有着很丰富的生态.数据导入的维度而言就已经提供了多种选择.有大而全的Nebula Ex ...

  6. Java与sql中的字符串表示

    在 Java 中,双引号 "" 用于表示字符串字面量,而单引号 '' 用于表示字符字面量.这意味着在 Java 中,您可以使用双引号来包围包含任意数量字符的字符串,包括零个字符(空 ...

  7. CPNtools协议建模安全分析--ML语言之颜色集定义（六）

    之前一直在怀疑我是不是因为对CPN Tools的原理结构还是不够理解,对Petri网的还没有弄清楚,越往后面看这种质疑越来越严重. 之前说CPN Tools在对称和非对称算法中不能形式化的问题,后续看 ...

  8. Advanced .Net Debugging 3：基本调试任务（对象检查：内存、值类型、引用类型、数组和异常的转储）

    一.介绍 这是我的<Advanced .Net Debugging>这个系列的第四篇文章.今天这篇文章的标题虽然叫做"基本调试任务",但是这章的内容还是挺多的.由于内容 ...

  9. Python文件操作系统

    [一]文件操作基本流程 # 1. 打开文件,由应用程序向操作系统发起系统调用open(...),操作系统打开该文件,对应一块硬盘空间,并返回一个文件对象赋值给一个变量f f=open('a.txt', ...

  10. masscode.io snippets 和 vscode 联动 代码片段

    https://masscode.io/ 软件作用 代码片段 vscode 可以联动使用 下载不行 慢的话, 下载 fastgithub,打开后再下载