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. Java 关于继承小练习2

    1 package com.bytezero.inherit2; 2 3 4 public class KidsTest 5 { 6 public static void main(String[] ...

  2. 使用Mockito与Squaretest进行单元测试.

    项目开发过程中,不少公司都要求写单元测试的代码,可以提高代码的质量,并且可以减少出现BUG的概率. 对于中小型公司来说,对单元测试不做硬性要求,不写最好.因为还是需要一定的工作量,在保证代码质量和性能 ...

  3. vite 子项目 热部署 通过nginx，和父项目端口号不同，导致热更新的websocket报错的解决方案

    vite 子项目 热部署 通过nginx,和父项目端口号不同,导致热更新的websocket报错的解决方案 我的父项目端口号是8888 子项目端口号是 8013 这里报错的原因就是,热更新的webso ...

  4. vite启动dev的项目，在nginx做代理的时候，二级目录尾要加/

    vite启动dev的项目,在nginx做代理的时候,二级目录尾要加/ vite dev开发启动的时候, url最后不加/,系统不能使用,所以代理的时候,没加/,代理跳转过去,就回导致页面加载不出来,j ...

  5. snipaste 截屏工具快捷键 alt + A 还有 Ctrl + Shift + A

    snipaste 截屏工具快捷键 alt + A 还有 Ctrl + Shift + A 因为有时候 alt 会取消右键等菜单

  6. 图片裁剪插件 vue-cropper [vue插件推荐]

    一个优雅的图片裁剪插件 https://www.npmjs.com/package/vue-cropper http://github.xyxiao.cn/vue-cropper/example/

  7. day04-Java基础语法

    Java基础语法 1.注释 注释不会被执行,是用来给写代码的人看的. 1.1单行注释 单行注释只能注释一行文字 // 注释 1.2多行注释 多行注释可以注释多行文字 /* 注释 注释 注释 */ 1. ...

  8. 《TencentNCNN系列》 之工作原理简要解析（以LeNet-5为例）

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  9. DL基础补全计划(四)---对抗过拟合：权重衰减、Dropout

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  10. Welcome to YARP - 3 负载均衡 (Load Balancing)

    目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...