jquery是一个快速、小巧，功能强大的javascript函数库。

jquery主要用来替代原生的javascript，简化代码。

前端最头疼的就是兼容：IE6/7/8兼容的最高版本是jQuery1.9.1

jQuery的操作在一个类中，不会污染顶级变量

基本不用考虑浏览器的兼容性

支持链式操作方式

隐式迭代

行为层和结构层分离

丰富的插件支持

jQuery符号：

jQuery=function jQuery(arg){

    alert(arg);

}

$=window.jQuery=jQuery;

$(arg)=jQuery(arg);

window.jQuery === window.$

$ === jQuery

typeof $   ->  function

绝大多数情况下，直接使用 $ ，如果 $ 被占用，就使用 jQuery

jQuery.noConflict()  释放 $，但不释放 jQuery

$   //jQuery(selector,context)

jQuery.noConflict()   //释放 $，但不释放 jQuery

$   //undefined

jQuery   //jQuery(selector,context)

下面两句是等价的

$("div").addClass("div");

jQuery("div").addClass("div");

HTML加载完成的三种书写方式

//html加载完成

$(document).ready(function(){

    $("div").addClass("div");

});

//简写方式1

$().ready(function(){

    $("div").addClass("div");

});

//简写方式2

$(function(){

    $("div").addClass("div");

});

jquery 行为层方法简介：

.css({}) 改变元素样式

以下是原生js写法与jquery写法对比

    // 原生js

    var alinks=$("a");

    for(var i=0;i<alinks.length;i++){

        alinks[i].style.color="pink";

        alinks[i].style.backgroundColor="#abcdef";

        alinks[i].style.border="1px solid #fff";

    }

    // jquery

    var alinks=$("a");

    for(var i=0;i<alinks.length;i++){

        alinks.eq(i).css({

            "color":"pink",

            "background-color":"#abcdef",

            "border":"1px solid #fff"

        });

    }

.text() 改变元素内的文本

以下是原生js写法与jquery写法对比

    // 原生js

    var alinks=$("a");

    for(var i=0;i<alinks.length;i++){

        alinks[i].innerHTML="喵喵"+i;

    }

    // jquery

    var alinks=$("a");

    for(var i=0;i<alinks.length;i++){

        alinks.eq(i).text("喵喵"+i);

    }

.html() 改变元素内的内容，可以带HTML标签

以下是原生js写法与jquery写法对比

    // 原生js

    var alinks=$("a");

    for(var i=0;i<alinks.length;i++){

        alinks[i].innerHTML="喵喵"+i;

    }

    // jquery

    var alinks=$("a");

    for(var i=0;i<alinks.length;i++){

        alinks.eq(i).text("喵喵"+i);

        alinks.eq(i).html("<strong>"+"喵喵"+i+"</strong>");

    }

小案例：

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>jquery</title>

    <link rel="stylesheet" href="style.css">

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

    <script src="script.js"></script>

</head>

<body>

    <span class="top"></span>

    <nav>

        <a href="#">banner1</a>

        <a href="#">banner2</a>

        <a href="#">banner3</a>

        <a href="#">banner4</a>

    </nav>

    <div class="img-box">

        <img src="data:image/cat1.jpg">

        <img src="data:image/cat2.jpg">

        <img src="data:image/cat3.jpg">

        <img src="data:image/cat4.jpg">

    </div>

</body>

</html>

style.css

* { margin:; padding:; border: none; }

html, body { overflow: hidden;/*解决因为盒模型溢出造成的垂直方向滚动条*/ height: 100%; background-color: rgb(145, 176, 200); }

span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; }

nav { position: relative; display: flex;/*弹性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*实现元素在容器内左右均匀分布*/ }

nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活伪元素*/ background-color: #fff; }

nav > a { font-size: 14px; position: relative;    /*默认是static定位，会被绝对定位覆盖 修改为相对定位之后，会覆盖前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; }

.img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); }

.img-box img { position: absolute; top:; right:; bottom:; left:; width: 98%; margin: auto;/*以上5句实现绝对定位的居中*/ }

/*# sourceMappingURL=style.css.map */

script.js

$(function(){

    $("a").click(function(){

        $("img").eq($(this).index()) // 获取当前点击的a的index

                .css({"opacity":"1"})

                .siblings()

                .css({"opacity":"0"});

    });

});

效果图

学习jQuery基础语法，并通过一个案例引出jQuery的核心的更多相关文章

  1. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  2. js进阶 10-2 JQuery基础语法是什么

    js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...

  3. JavaScript学习02 基础语法

    JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...

  4. WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。

    WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 jquery (区分大小写)的 ScriptRes ...

  5. (转)要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。”的解决办法。

    要“jquery”ScriptResourceMapping.请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping.”的解决办法. 1.先将aspnet.scri ...

  6. WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping 异常详细信息: System.InvalidOperationException: WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的

    WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping.请添加一个名为 jquery (区分大小写)的 ScriptRes ...

  7. <学习笔记 之 JQuery 基础语法>

    jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...

  8. web前端----jQuery基础语法

    一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...

  9. JavaScript学习笔记-基础语法、类型、变量

    基础语法.类型.变量   非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或 ...

随机推荐

  1. leetcode腾讯精选练习之螺旋矩阵（八）

    螺旋矩阵 题目 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入:     [          [ 1, 2, 3 ],   ...

  2. 史上最简单的的HashTable源码分析

    HashTable源码分析 1.前言 Hashtable 一个元老级的集合类,早在 JDK 1.0 就诞生了 1.1.摘要 在集合系列的第一章,咱们了解到,Map 的实现类有 HashMap.Link ...

  3. 关于不同python版本print不一致的简单解决方案

    经常遇到python2.x的print不带括弧,但python3.x必须要带括弧,版本不一致,需要修改,但是面对数以十计的重复劳动,不免望而却步.其他的一些不一样的地方同理. 解决方案: 运用正则化替 ...

  4. pycharm安装PIL失败

    搜索安装PIL后无法成功安装,在尝试各种版本后依旧无法解决 问题解决 安装Pillow-PIL,既可以成功执行代码 因为pil没有64位的版本,所以需要下载安装第三方支持64位系统的版本才可以使用.

  5. k8s概述

    k8s概述 概述 Kubernetes 使你在数以千计的电脑节点上运行软件时就像所有这些节点是单个大节点一样.它将底层基础设施抽象,这样做同时简化了应用的开发.部署, 以及对开发和运维团队的管理. K ...

  6. java实现字符串翻转

    public class StringReverse { /*一共写了三个函数func1 func2 func3 * 时间: 2019年9月12日9:00 * func1用的反向输出到一个新的字符串中 ...

  7. Docker三剑客之Machine

    前言简介 Docker-machine(中文翻译docker机):一种提供管理多个docker主机的工具:提供docker主机容器的远程创建.管理.删除等功能:这样的docker主机容器前辈们称之为D ...

  8. servlet 深入了解

    servlet  作用 在Java web b/s架构中,servlet扮演了重要的角色,作为一个中转处理的容器,他连接了客户端和服务器端的信息交互和处理.简单来说,客户端发送请求,传递到servle ...

  9. 死磕mysql(4)

    想把论坛和博客上所有关于mysql的都看一遍,死磕到底 看到关于数据库快照的东西.......不懂,百度......然后就跑题了,看到了表锁这种东西unlock tables; 用来锁定表..... ...

  10. Selenium实现微博自动化运营：关注、点赞、评论

    目录 Selenium 是什么? 一.核心代码 二.步骤分解 1.打开浏览器 2.访问微博登录页 3.输入账号密码 4.点击登录 5.通过人机验证 6.打开我们的中公题库君首页 7.加一下关注 8.定 ...