jQuery初体验

1. 引入jquery文件

2. 入口函数标准

jQuery优点总结 (对应的就是js的缺点)：

  • 查找元素的方法多种多样，非常灵活
  • 拥有隐式迭代特性，因此不需要手写for循环
  • 完全没有兼容性问题
  • 实现动画非常简单，而且功能更加强大
  • 代码简单粗暴

什么是jQuery?

jQuery的官网 http://jquery.com/ jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      height: 200px;

      margin-bottom: 10px;

      background-color: #a43035;

      display: none;

    }

  </style>

  <!-- 1.引入jquery文件 -->

  <script src="jquery-1.12.4.js"></script>

  <script>

    //2. 入口函数的标准

    $(document).ready(function () {

      //获取对象，注册事件，把on去掉，是一个方法

      $("#btn1").click(function () {

        //隐式迭代：偷偷的遍历，jQuery会自动的遍历，不需要我们遍历。

        $("div").show(1000);

      });

      $("#btn2").click(function () {

        $("div").text("我是内容");

      });

    });

  </script>

</head>

<body>

  <input type="button" value="btn1" id="btn1">

  <input type="button" value="设置内容" id="btn2">

  <div></div>

  <div></div>

  <div></div>

</body>

</html>

jQuery---jQuery初体验的更多相关文章

  1. jquery.fn.extend与jquery.extend--（初体验二）

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...

  2. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  3. day12—jQuery ui引入及初体验

    转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...

  4. 【原创】Jquery初体验二

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

  5. Jquery初体验一

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

  6. python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨

    python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...

  7. SignalR初体验

    简介 ASP .NET SignalR[1]  是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以 ...

  8. node.js 初体验

    node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...

  9. grunt 构建工具(build tool)初体验

    操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/  直接点击install ,会根据你的操 ...

  10. VSTO学习笔记（十五）Office 2013 初体验

    原文:VSTO学习笔记(十五)Office 2013 初体验 Office 2013 近期发布了首个面向消费者的预览版本,我也于第一时间进行了更新试用.从此开始VSTO系列全面转向Office 201 ...

随机推荐

  1. 深入浅出 .NET C# 反射技术

    反射这个词听起来就很牛逼是吧? 嗯的确,反射是比较高级的特性,只有语言基础很扎实的Dev们才应该使用它. 搞点反射,可以提高程序的灵活性.可扩展性.耦合度. 反射这东西,是为了动态地运行时加载,相比于 ...

  2. TensorFlow安装-(Ubuntu18.04.3 & Anaconda3)

    1.背景 使用ubuntu18.04.3安装Anaconda3之后使用网上教程安装tensorflow失败,踩了多个坑,特此总结经验 附官方教程:https://tensorflow.google.c ...

  3. P2094运输

    -------------------- 链接:Miku ------------------- 这是一道水贪心,很容易想到做法就是把最贵的两个放在一块,让后当成一个重新放回队列 ---------- ...

  4. 如何把已有的本地git仓库，推送到远程新的仓库（github private）并进行远程开发；

    最近因为疫情,在家干活,连接不上之前的gitlab 服务器:所以不得把现有的代码迁移到github 的私有仓库来进行开发:下面简要记录迁移的过程: 首先,确保你已经配置好本地访问远程私有仓库的所有权限 ...

  5. fatal: HttpRequestException encountered

    报错:fatal: HttpRequestException encountered 解决方法 Github 禁用了TLS v1.0 and v1.1,必须更新Windows的git凭证管理器,才行. ...

  6. 逆战：微信小程序开发（二）

    一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import { req ...

  7. 阿里云K8S下玩.NET CORE 3.1

    1. 创建阿里云K8S集群,本文以标准托管集群为例 1.1 创建一个 2台 centos 2core 4G的 k8s 集群 1.2 创建成功的模样 2. 创建 asp.net core webapi项 ...

  8. python数据类型（第二弹）

    针对上一篇博文提出的若干种python数据类型,笔者将在本文和后续几篇博文中详细介绍. 本文着重介绍python数据类型中的整数型.浮点型.复数型.布尔型以及空值. 对于整数型.浮点型和复数型数据,它 ...

  9. Java 8 Stream Api 中的 peek 操作

    1. 前言 我在Java8 Stream API 详细使用指南[1] 中讲述了 [Java 8 Stream API]( "Java 8 Stream API") 中 map 操作 ...

  10. css3使用animation属性实现炫酷效果

    animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画 animation-name属性为动画指定一个名称 animation-name兼容主流的浏览器,不过还是需要加前 ...