CH01-初识JQuery

本章目标

了解什么是JQuery
掌握JQuery可以做什么
掌握JQuery的使用步骤
掌握JQuery的语法

一、基本概念

1.jQuery起源

jQuery的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入， jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。若把JavaScript看作原始社会生火方式-钻木取火。 jQuery就是现代社会的火柴了。

2.什么是jQuery

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。

3.为什么要使用jQuery

目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

4.jQuery的优势

体积小，经过最好的压缩工具UglifyJS压缩之后,大小保持在30KB左右
强大的选择器，jQuery支持CSS1到CSS3几乎所有的选择器以及jQuery独创的高级而复杂的选择器
出色的DOM封装，jQuery封装了大量常用的DOM操作
可靠的事件处理机制，jQuery的事件处理机制吸收了Javascript事件处理函数的精华，使jQuery在处理事件绑定的时候非常可靠
出色的浏览器兼容性，Query 几乎支持所有的主流浏览器，同时jQuery 还修复了一些浏览器之间的差异
丰富的插件支持，jQuery 的易扩张性，吸引了来自全球的开发者来编写jQuery 的扩展插件

5.jQuery能做什么

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

1.显示、隐藏、切换显示隐藏

效果图：

<script src="js/jquery.min.js"></script>
<style>
       .div1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>
<script>
        $(function(){
            	//点击显示 显示div1
                $(".show").click(function () {
                	$(".div1").show();
                });
            	//点击隐藏 隐藏div1
                $(".hide").click(function () {
                    $(".div1").hide();
                });
            	//点击切换 切换div1显示和隐藏
                $(".toggle").click(function () {
                    $(".div1").stop().toggle();
                });
        })
    </script>
    <section>
            <button class="show">显示</button>
            <button class="hide">隐藏</button>
            <button class="toggle">切换</button>
            <div class="div1">div1</div>
    </section>

2.下拉滑动、上拉滑动、切换滑动

效果图：

<script src="js/jquery.min.js"></script>
<style>
       .div1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>
<script>
        $(function(){
		   //点击下拉 div1向下滑动
            $(".slidedown").click(function () {
                $(".div1").stop().slideDown(2000);
            });
            //点击上拉 div1向上收缩
            $(".slideup").click(function () {
                $(".div1").stop().slideUp(2000);
            });
            //点击切换 div1切换滑动效果
            $(".slidetoggle").click(function () {
                $(".div1").stop().slideToggle(2000);
            });
        })
</script>
<section>
        <button class="slidedown">下拉</button>
        <button class="slideup">上拉</button>
        <button class="slidetoggle">切换</button>
        <div class="div1">div1</div>
</section>

二、开发环境及安装

1.可参考的学习资料

2.学习环境准备

常见编辑器：VSCode, Sublime，HBuilder，EditPlus
后台的集成开发环境：VS.NET，ECLIPSE
各种主流的浏览器：IE，Firefox，Chrome
熟悉的应用服务器：IIS，Apache

3.安装JQuery

进入jQuery官网：http://www.jquery.com

有两个版本的 jQuery 可供下载：

三、使用jQuery

1.基本步骤

先导入jQuery库，将下载的jQuery文件放在项目中；

添加引用

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

在jQuery的主体函数中编写代码

<script src="js/jquery.min.js"></script>
<script>
    //第一种方式
    $(function(){
    
	})
	//第二种方式
    $(document).ready(function(){
    
	});

</script>

例：页面一加载弹出内容

效果图：

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
        $(function(){
           alert("Hello,jQuery!");
        })；
</script>