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. Java and MongoDB link for project

    鉴于开源项目的发展,大力拥抱开源社区.发现Java和MongoDB不失为一个较好的选择. 与其他数据库一样,同样需要mongo-java-driver,构建了Java与MongoDB的交互. 1. 连 ...

  2. 用WORD批量制作工作证件

    用WORD批量制作工作证件 一.采集电子照片 电子照片的采集要求以的名字作为照片的文件名,保存为“.jpg”格式,尺寸和大小需保持一致. 二.制作信息表 制作Exice数据信息表,包含姓名.年龄.部门 ...

  3. mysql--->mysql的事务和锁

    mysql 事务和锁 什么是事务?及其特性? 答:事务:是一系列的数据库操作,是数据库应用的基本逻辑单位. 或者这样理解: 事务就是被绑定在一起作为一个逻辑工作单元的SQL语句分组,如果任何一个语句操 ...

  4. SpringBoot分布式篇Ⅶ --- 整合Dubbo

    在分布式系统中, 国内常用zookeeper+dubbo组合,而Spring Boot推荐使用全栈的Spring,Spring Boot,Spring Cloud. 分布式系统: 一.Zookeepe ...

  5. spring4.2.4整合ehcache

    最近工作中遇到个功能需要整合ehcache,由于spring版本用的是4.2.4,而在ehcache官网找到的集成配置文档是spring3.1的,因此配了几次都不成功,在历经一番波折后终于成功集成了s ...

  6. spring5.0源码项目搭建

    一.准备相应环境以及下载spring项目 Ps:此处只讲解安装gradle 1.JDK安装 2.Idea安装 3.gradle安装 Gradle下载路径:https://services.gradle ...

  7. Nginx之keepalived高可用工具

    1.创建两台虚拟机,分别为主机和从机,区别两台虚拟机的IP地址 2. 将keepalived上传到linux系统当中 3. cd /usr/local目录 4. tar -zxvf keepalive ...

  8. 7天用Go动手写/从零实现Web框架Gee

    设计一个框架 大部分时候,我们需要实现一个 Web 应用,第一反应是应该使用哪个框架.不同的框架设计理念和提供的功能有很大的差别.比如 Python 语言的 django和flask,前者大而全,后者 ...

  9. CSAPP

    陆陆续续花了2个月的时间终于把这个久负盛名的CSAPP看完了,不愧为一本名副其实的经典书籍.有种相见恨晚的感觉,以至于从不会写书评的我也情不自禁的想说点什么.  这本书的书名叫"Comput ...

  10. 如何在网页读取用户IP,操作系统版本等数据demo

    我们浏览网页的时候,会不经意间看到,有些地方(如个人的签名档)显示出了个人的IP,操作系统等数据.借助第三方API和请求报头useragent是很容易实现的. <html> <hea ...