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. 机器学习-Tensorflow之Tensor和Dataset学习

    好了,咱们今天终于进入了现阶段机器学习领域内最流行的一个框架啦——TensorFlow.对的,这款由谷歌开发的机器学习框架非常的简单易用并且得到了几乎所有主流的认可,谷歌为了推广它的这个框架甚至单独开 ...

  2. java8新特性Lambda和Stream

    Java8出来已经4年,但还是有很多人用上了jdk8,但并没用到里面的新东西,那不就等于没用?jdk8有许多的新特性,详细可看下面脑图 我只讲两个最重要的特性Lambda和Stram,配合起来用可以极 ...

  3. tensorboard网络结构

    一.tensorboard网络结构 import tensorflow as tffrom tensorflow.examples.tutorials.mnist import input_data ...

  4. HTTP的传输编码(Transfer-Encoding:chunked)

    转载自HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP,本来是将这篇文章收藏在我的有道云笔记的,但是今天复习的时候看着这个标题这尴尬,这里转载一下-... 什么是传输编码? 传输编 ...

  5. Python3基础之内置模块

    模块和包 一.定义: 模块:用来从逻辑上组织Python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的Python文件包:用来从逻辑上组织模块,本质就是一个目录(必须带有一个__in ...

  6. Electron使用electron-packager打包记录

    1.使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 2.下载https://github.com/electron/electron-quick-start中的示例 3.在示 ...

  7. chrome浏览器无法开启同步功能 request cancel

    解决办法 添加代理规则*.googleapis.com

  8. CMake中的两种变量(Variable types in CMake)

    在CMake中存在两种变量:normal variables and cache varialbes .正常变量就像是脚本内部变量,相当于程序设计中定义的局部变量那样.而CMakeLists.txt相 ...

  9. tomcat-windows10环境搭建

    1.进入Tomcat官网Apache Tomcat® - Welcome! 2.根据操作系统选择合适的版本下载 zip用于windows操作系统, tar.gz用于unix和linux操作系统 Bin ...

  10. ELK搭建（docker环境）

    ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是一套开 ...