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. MYSQL查询数据表中某个字段包含某个数值

    当某个字段中字符串是"1,2,3,4,5,6"或者"123456"查询数据表中某个字段是否包含某个值1:模糊查询  使用like       select * ...

  2. 正则计算器---day19

    计算下面表达式最后的结果 strvar = "1-2*((60-30+(-40/5)*(9-2*5/3+7/3*99/4*2998+10*568/14))-(-4*3)/(16-3*2))& ...

  3. day03--vi和vim快捷方式及操作系统目录介绍

    1.编辑命令vi vim是vi的增强版 提高编程的效率 1.vi命令模式信息 命令模式: 可实现很多特殊功能操作 不能输入任何内容 编辑模式: 可编辑内容信息 底行模式:可以输入特殊的命令信息 wq保 ...

  4. tempfile创建临时文件或目录

    import tempfile tempfile.TemporaryFile() # 创建文件,返回文件对象 tempfile.NamedTemporaryFile() # 同上,不过会生成带有文件名 ...

  5. 【LeetCode二叉树#07】左叶子节点之和（基于栈的迭代法前中后序遍历复习）

    左叶子节点之和 力扣题目链接(opens new window) 计算给定二叉树的所有左叶子之和. 示例: 思路 注意审题,这里是要求 左叶子节点 之和 不是二叉树中的左侧节点之和,因此使用层序遍历是 ...

  6. 图像识别算法--VGG16

    前言:人类科技就是不断烧开水(发电).丢石头(航天等).深度学习就是一个不断解方程的过程(参数量格外大的方程) 本文内容: 1.介绍VGG16基本原理 2.VGG16 pytorch复现 图像识别算法 ...

  7. Netty笔记(5) - 编码解码机制 和 Protobuf技术

    介绍: 编写网络应用程序时,因为数据在网络中传输的都是二进制字节码数据,在发送数据时就需要编码,接收数据时就需要解码 codec(编解码器) 的组成部分有两个:decoder(解码器)和 encode ...

  8. 子序列&子串

    子序列:子序列就是在原来序列中找出一部分组成的序列 子序列不一定连续 子串:字符串中任意个连续的字符组成的子序列称为该串的子串 子串一定连续

  9. Docker：Failed to copy files， no space left on device

    主页 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 问题描述 在Mac上进行docker构建时,偶尔会遇到以下问题 Fai ...

  10. Elasticsearch 如何保证写入过程中不丢失数据的

    丢失数据的本质 在本文开始前,首先明白一个点,平时我们说的组件数据不丢失究竟是在指什么,如果你往ES写入数据,ES返回给你写入错误,这个不算数据丢失.如果你往ES写入数据,ES返回给你成功,但是后续因 ...