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. python接口自动化中，注册接口随机生成手机号码

    如大家所知在注册接口中,手机号参数需要的是未注册的手机号,而在测试用例中,你写入的手机号不一定是未注册的.所以这时需要对注册接口中传入的手机号做处理.下面我就分享一个课程里面学到的一个处理手机号的py ...

  2. chrome最耐看的主题

    google chrome最耐看的主题James White大家可以尝试一下

  3. 18年第一弹射 和网络有关； 艾曲塞嗯诶系列篇 san

    62: 管理员想要更新 AR2200路由器的VRP, 正确的方法: 1)管理员把 AR2200 配置为FTP客户端,通过FTP来传输VRP软件 2)管理员把AR2200 配置为FTP服务器,通过FTP ...

  4. FluentData 学习 第一弹

    地址: http://fluentdata.codeplex.com/ 前世: FluentData 我们公司用的一个增删改查的里面的持久层.之前还不知道 这个持久层叫FluentData.  某天看 ...

  5. 发现 一个业务管理系统 解决了 orm 和 前端框架 剩下的 是 业务逻辑 了 。 哈

    解决了 orm 和 前端框架 剩下的 是 业务逻辑 了 . 哈 还有 各种 aop 组件 呢 . 大家 high 来 准备 用 fluent data  和 mysql 写一个 wcf 的 接口呢. ...

  6. NOI4.6 最小新整数——切山游戏

    描述 给定一个十进制正整数n(0 < n < 1000000000),每个数位上数字均不为0.n的位数为m. 现在从m位中删除k位(0<k < m),求生成的新整数最小为多少? ...

  7. Catch That Cow （简单BFS+剪枝）

    Problem Description Farmer John has been informed of the location of a fugitive cow and wants to cat ...

  8. GP工作室—Alpha版本发布1

    目录 GP工作室-Alpha版本发布1 一.简介 1.1作业要求 1.2团队成员 二.软件下载安装说明 五.项目总结 @(Gold Point团队の项目计划) GP工作室-Alpha版本发布1 一.简 ...

  9. 简述java的ArrayList

    java的ArrayList 基础知识: ArrayList集合长度可以发生改变 泛型 自动装箱和自动拆箱 部分常用的接口方法 boolean add(E obj) E add(int index,E ...

  10. 看完这篇文章，再次遇到Jedis「Redis客户端」异常相信你不再怕了！

    本文导读: [1] 疫情当前 [2] 应用异常监控 [3] Redis客户端异常分析 [4] Redis客户端问题引导分析 [5] 站在Redis客户端视角分析 [6] 站在Redis服务端视角分析 ...