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. .net core webapi搭建(1)

    创建一个webapi项目 修改launchSettings.json 将launchSettings.json中的IIS启动删掉.别问我为啥  原因就是IISEXPRESS有时候需要我手动重启.我嫌麻 ...

  2. ThreeJS 物理材质shader源码分析(像素着色器)

    再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ 像素着色器(meshphysical_frag.glsl) #define PHYSICAL uniform ve ...

  3. nginx白名单黑名单设置

    nginx白名单黑名单设置 白名单设置,访问根目录 location / { allow 123.34.22.155; allow 33.56.32.1/100; deny all; } 黑名单设置, ...

  4. postman的简单介绍及运用

    postman下载地址 https://www.getpostman.com/downloads/ postman的工作原理:发送请求给服务器,服务器处理postman发送的数据然后返回给postma ...

  5. Spring注解开发系列Ⅲ --- 生命周期

    Bean的生命周期 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解. 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: S ...

  6. 11、ACL

    IP访问控制列表 标准ACL 1)检查源地址 2)不能对协议簇作限定 扩展ACL 1)检查源和目标地址 2)能容许或拒绝特定的协议和应用(端口号) 区别列表类型: 1)ACL号 : 1-99,1300 ...

  7. Sqlite命令行基本操作

    SQLite是遵守ACID的关系数据库管理系统,它包含在一个相对小的C程序库中. 与许多其它数据库管理系统不同,SQLite不是一个客户端/服务器结构的数据库引擎,而是被集成在用户程序中. 1.进入命 ...

  8. WeChall_PHP 0817 (PHP, Exploit)

    I have written another include system for my dynamic webpages, but it seems to be vulnerable to LFI. ...

  9. constrainlayout布局

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/r ...

  10. 【WPF学习】第四十三章 路径和几何图形

    前面四章介绍了继承自Shape的类,包括Rectangle.Ellipse.Polygon以及Polyline.但还有一个继承自Shape的类尚未介绍,而且该类是到现在为止功能最强大的形状类,即Pat ...