一、jQuery介绍和安装

1、jQuery简介

jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库,是JavaScript的一个框架

它就是把JavaScript的代码封装好了，导入调用即可使用

2、jQuery安装和引用

jQuery安装基本说明

• 下载注意事项
  

• 1.x版本：兼容IE8以下（用的最多的）

• 2.x版本：不兼容IE8以下

• 3.x版本：不兼容IE8以下

安装好了之后，可以看到文件里有两个文件

可以看到， jquery-1.10.2.min.js 的文件大小只有91KB，这是里面的代码没有任何的格式，都堆积在一起，没有空格；而jquery-1.10.2.js  文件的大小虽然比较大些，但是它的代码逻辑都是比较清楚的，格式比较规范。

但是两个文件都可以使用，喜欢用体积大的或者体积小的就看个人习惯~

jQuery引用

• 下载Jquery库到本地后，引用本地文件，以下为引用方法

• 复制jquery-1.10.2.min.js文件，并粘贴到和即将使用的html文件的同目录下
• 
  

二、jQuery语法和使用

1、jQuery语法

基础语法：$(selector).action()

• $符号代表定义jQuery

• 选择符(selector)"查询"和“查找”HTML元素

• jQuery的action()执行对元素的操作

2、jQuery使用

文件就绪事件

• 第一种写法

使用时所有jQuery函数位于document ready函数中

1. $(document).ready(function(){
2. // 开始写 jQuery 代码...
3. });

• 第二种写法（简洁写法）

1. $(function(){
2. // 开始写 jQuery 代码...
3. });

• jQuery和JavaScript的对比

1. //JavaScript
2. window.onload = function () {
3. //网页资源（dom结构，图片）都加载完之后才会执行这个里面的代码
4. //在一个页面中只能写一次，后面的会把前面的内容覆盖掉
5. }
//jQuery
$(function () {
    //只用加载dom结构就会执行这个里面的代码
    //里面可以有多个
})

jQuery语法使用

• 语法示例

• $(this).hide()--隐藏当前元素

• $("p").hide()--隐藏所有元素

• $(".test").hide()--隐藏所有class="test"的元素

• $("#test").hide()--隐藏,id="test"的元素

代码演示 ：

通过引入js文件，然后通过 $("div").hide()隐藏div元素

• 首先通过一个script标签引入js文件，这个script标签只是用来引入文件，如果要写代码的话要另起炉灶，重新建立一个script标签，在里面写代码

先运行，查看结果，可看到页面中出现div元素的内容

• 然后在第二个script标签中写入隐藏div标签的语句

• 刷新页面，查看结果，发现div元素已经被隐藏

附上原操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $("div").hide();
        })
    </script>
</head>
<body>
    <div>
        这是div
    </div>
</body>
</html>

三、jQuery选择器

jQuery中分有三种选择器，分别为：

• 元素选择器

• id选择器

• class选择器

1、元素选择器

通过元素选择器实现鼠标点击后，隐藏内容的功能

首先，通过 <input type="button" value="点我隐藏"> 设置一个按钮，然后再写入一个p标签

接着在第二个script标签中写入一个文件就绪事件：$(function () {})，并在这一事件中通过元素选择器找到input元素

然后给input元素设置一个点击事件：$('input').click(function () {})

最后在这个点击事件中再次通过元素选择器找到p元素，给p元素设置一个隐藏功能：$('p').hide();

这就像是一个函数嵌套，当代码运行时，会等到其他元素加载完之后才会执行 $(function () {}) 内的代码，然后等鼠标点击按钮时（也就是执行了点击事件：

$('input').click(function () {})），会运行到 $('p').hide(); 然后隐藏p标签的内容

• 附上原操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过元素选择器
            //找到input标签，click为点击事件
            $('input').click(function () {
                $('p').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p>
        这是内容
    </p>
</body>
</html>

2、id选择器

id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个id，比如：$('#div1').hide(); （#号表示获取的是id，#后的内容就是id的值）

• 附上原操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过id选择器
            //找到input标签，click为点击事件
            $('input').click(function () {
                $('#div1').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p id="div1">
        这是内容
    </p>
</body>
</html>

3、class选择器

id选择器的使用方法同元素选择器相同，只不过将$('p').hide();中的p换成一个class，比如：$('.class').hide(); （. 表示获取的是class，. 后的内容就是class的值）

• 附上原操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //通过id选择器
            //找到input标签，click为点击事件
            $('input').click(function () {
                $('.cla1').hide();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p class="cla1">
        这是内容
    </p>
</body>
</html>