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. win32改变静态控件的文本大小

    HWND static_ = CreateWindow(L"STATIC", NULL, WS_CHILD | WS_VISIBLE | SS_LEFT, 100, 100, 10 ...

  2. xHook 源码解析

    xHook 是爱奇艺开源的一个PLT Hook 框架 项目地址: https://github.com/iqiyi/xHook 该项目实现了 PTL/GOT Hook PTL hook 的本质是修改内 ...

  3. 以二进制文件安装K8S之部署Node服务

    概述 在Node上需要部署Docker.kubelet.kube-proxy,在成功加入Kubernetes集群后,还需要部署CNI网络插件.DNS插件等管理组件. 本节以将192.168.3.138 ...

  4. Notepad++找回自动保存缓存内容的文件

    在目录C:\Users\Administrator\AppData\Roaming\Notepad++\backup中找到自动保存的缓存文件. 参考Notepad++找回自动保存缓存内容的文件

  5. Qt+MPlayer音乐播放器开发笔记（二）：交叉编译MPlayer以及部署到开发板播放演示

    前言   在ubuntu上arm交叉编译MPlayer播放器,并部署到开发板播放音乐.   Demo                Mplayer   MPlayer是一款开源多媒体播放器,以GNU通 ...

  6. 反射，装饰器，类当中的方法，property---day24

    1.反射 # ### 反射(针对于类对象 模块) '''概念:通过字符串去操作类对象或者模块当中的成员(属性方法)''' class Man(): pass class Woman(): pass c ...

  7. mysql常用语句（持续更新）

    查询数据库中各表数量 select table_name,table_rows from information_schema.tables where TABLE_SCHEMA = 'miot' o ...

  8. Ansible 基础入门

    2)Ansible 介绍 Ansible 基本概念 Ansible 是一种自动化运维工具,基于 Paramiko 开发的,并且基于模块化工作,Ansible 是一种集成 IT 系统的配置管理.应用部署 ...

  9. autohotkey 设置快捷键 设置光标位置 （ctrl + alt + Numpad0）

    autohotkey 设置快捷键 设置光标位置 (ctrl + alt + Numpad0) 原因 3个屏幕,所以鼠标设置的灵敏度非常高,经常就找不到鼠标在哪了. 设置个快捷键,让鼠标每次都初始化一个 ...

  10. k8s是如何保障滚动升级时下线的pod不被访问

    Kubernetes (k8s) 通过一系列机制保障在滚动升级时,下线的 Pod 不再被访问.以下是一些主要的保障措施: Service 抽象:在 Kubernetes 中,Pod 通常不是直接暴露给 ...