从零玩转jQuery-初识jQuery-低调大师

从零玩转jQuery-初识jQuery

2018-04-19 521

课前须知: 学习jQuery前必须先掌握JavaScript
jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握)

jQuery是什么？

jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）.
在jQuery官方Logo下方还有一个副标题（write less, do more）, 体现了jQuery除了查询以外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单

体验jQuery
- 原生JS设置背景（先不要求看懂代码，先看看谁更爽）

<script>
// 查询
    var div = document.getElementsByTagName("div");
    var one = document.getElementsByClassName("one");
    var two = document.getElementById("two");
// 操作css
    div[0].style.backgroundColor = "red";
    one[0].style.backgroundColor = "yellow";
    two.style.backgroundColor = "blue";
</script>

使用jQuery设置背景

<script>
  $(document).ready(function () {
// 查询，操作CSS一步到位
      $("div").eq(0).css('background', 'red');
      $(".one").eq(0).css('background', 'yellow');
      $("#two").css('background', 'blue');
  });
</script>

为什么要使用jQuery？

强大选择器: 方便快速查找DOM元素
- 如上面实例所展示一样，通过jQuery查找DOM元素要比原生js快捷很多
- jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器
链式调用: 可以通过.不断调用jQuery对象的方法
- 如上面实例所展示一样，jQuery可以通过.（点）.不断调用jQuery对象的方法，而原生JavaScript则不一定

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // 报错,必须分开写
    div[0].style.backgroundColor = "red".width = 200+"px";
//    div[0].style.width = 200+"px";
    
    // 2.jQuery
    $(document).ready(function () {
    // 不报错,后面还可以接着继续写
        $("div").eq(1).css('background', 'yellow').css('width', '200px');
    }); 
</script>

隐式遍历(迭代): 一次操作多个元素

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
//    div.style.backgroundColor = "red";// 无效
    for(var i = 0; i<div.length; i++){
        div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
        // 隐式遍历(迭代)找到的所有div
        $("div").css('background', 'yellow');
    });
</script>

读写合一: 读数据/写数据使用是一个函数

<script>
    $(document).ready(function () {
        // 读取数据
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 写入数据
        $("div").eq(0).text("新的数据");
    });
</script>

事件处理
DOM操作(C增U改D删)
样式操作
动画
丰富的插件支持
浏览器兼容(前端开发者痛点)
- 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4 (2016年5月20日).
- 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本。
- 应该选择几点几版本jQuery?
  - 查看百度网页源码使用1.x
  - 查看腾讯网页源码使用1.x
  - 查看京东网页源码使用1.x
  - 综上所述学习1.x,选择1.x
- 应该使用开发板还是生产版?
  - 开发板: 所有代码没有经过压缩,体积更大(200-300KB)
  - 生产版:所有代码经过压缩,提及更小(30-40KB)
  - 初学者为了更好的理解jQuery编码时使用开发板,项目上线时为了提升访问速度使用生产版
... ...

如何使用jQuery？

下载jQuery库
- 下载地址: http://code.jquery.com/
引入下载的jQuery库

<head>
    <meta charset="UTF-8">
    <title>01-初识jQuery</title>
    <script src="code/js/jquery-1.12.4.js"></script>
</head>

编写jQuery代码

<script>
    $(document).ready(function () {
      // 所有jQuery代码写在这里面
         alert("hello LNJ");
    });
</script>

微信关注我们

原文链接：https://yq.aliyun.com/articles/637089

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

为什么 Node.js 启动后虚拟内存很大

问题来源问题来源于cnode社区:node启动占用内存的问题。自己本地跑了一下，乖乖不得了，启动一个 node，什么都不做。结果是这样子的：果然900+M。我的电脑信息: $cat /proc/version Linux version 4.13.0-38-generic (buildd@lgw01-amd64-027) (gcc version 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.9)) #43~16.04.1-Ubuntu SMP Wed Mar 14 17:48:43 UTC 2018 $cat /proc/cpuinfo | grep processor processor : 0 processor : 1 processor : 2 processor

2018-04-20

763

jQuery入口函数 jQuery与JavaScript加载模式对比多个window.onload只会执行一次, 后面的会覆盖前面的 <script> window.onload = function () { alert("hello lnj1"); // 不会显示 } window.onload = function () { alert("hello lnj2"); // 会显示 } </script> 多个$(document).ready()会执行多次,后面的不会覆盖前面的 <script> $(document).ready(function () { alert("hello lnj1"); //会显示 }); $(document).ready(function () { alert("hello lnj2"); // 会显示 }); </script> 不会覆盖的本质(了解,后面jQuery原理会详细讲解) jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰...

2018-04-20

792

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。