jQuery教程 - 从入门到使用

学习 jQuery 之前，务必掌握前端的HTML、CSS、JavaScript三大基础
基础、HTML、CSS常用操作

前程往事

HTML教程 - 从入门到使用

CSS教程 - 从入门到使用（此处不完善）

JavaScript教程 - 从入门到使用

jQuery教程 - 不同交互方的实践

Sing：后来的我们 ~ 倒数 ~

基础

jQuery 库功能

jQuery 安装

语法

选择器

基于已存在的 CSS 选择器进行封装

jQuery 扩展的选择器使用方式

实战

事件

内容、属性（attr）的获取与设置

元素操作

基础

jQuery ? What ?

jQuery是一个轻量级（压缩包只有18KB左右）的"写的少，做的多"的JavaScript函数库

jQuery ? Why ?

JQuery不仅支持CSS里的所有选择器,还有JQuery独有的选择器.
JQuery封装了大量常用的DOM操作
JQuery能够在不同浏览器中兼容,同时还修复了一些浏览器之间的差异
即对发生在同一个JQuery对象上的一组动作,可以直接连写而无需重复获取对象,使得JQuery的代码无比优雅.
当用JQuery找到带有".class"类的全部元素,然后隐藏它们时,无需循环遍历每个返回的元素

jQuery 库功能

HTML 元素选取、操作（本文已有）
HTML 事件函数（本文已有）
CSS 操作本文已有
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX网络请求
Utilities

jQuery 安装

具体安装可以百度查找，有比较详细的全套流程 ~

下载地址

从jQuery官网下载较新的jQuery库

版本

有两个版本的 jQuery 可供下载

Production version - 用于实际的网站中，已被精简和压缩
Development version - 用于测试和开发（未压缩，是可读的代码）

引用

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

语法

基础语法

示例

 $(selector).action()
 
 大白文: $(选择器).操作()

selector：一般为选择器
action()：一般为用户的操作目的

示例Demo

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

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

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

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

基础使用

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

选择器

基于已存在的 CSS 选择器进行封装

元素选择器

语法： $(“p”) → p标签元素

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 选择器

语法： $("#test") → #test中的test为id

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 选择器

语法： $(".test") → .test为style内声明的样式

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

jQuery 扩展的选择器使用方式

实战

事件

页面对不同访问者的响应叫做事件

事件种类

点击元素
在元素上移动鼠标
选取单选按钮

常见事件方法

click() - 点击

  $("p").click(function(){
    $(this).hide();
  });

dblclick() - 双击

  $("p").dblclick(function(){
    $(this).hide();
  });

mouseenter() - 鼠标指针移动到元素上时，触发该事件

  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了该元素上!');
  });

mouseleave() - 鼠标指针离开元素时，触发该事件

  $("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
  });

hover() - mouseenter()、mouseleave()俩者的组合版；内部包含用户触摸开始、触摸完毕的状态监听

  $("#p1").hover(
    function(){
        alert("你进入了 #p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 #p1!");
    }
  );

mousedown() - 鼠标按下的状态监听

  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });

mouseup() - 鼠标擡起的状态监听

  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });

focus() - 获取焦点的状态监听，一般用于input标签

  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });

blur() - 失去焦点的状态监听，一般用于input标签

  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });

内容、属性（attr）的获取与设置

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("Text: " + $("#test").text());
            });
            $("#btn2").click(function(){
                alert("HTML: " + $("#test").html());
            });
             $("#btn3").click(function(){
    			alert($("#baidu").attr("href"));
 			 });
 			 $("#btn4").click(function(){
				alert("值为: " + $("#inputdata").val());
 			 });
        });
    </script>
</head>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<p><a href="https://www.baidu.com/" id="baidu">百度</a></p>
<p>名称: <input type="text" id="inputdata" value="开始的开始，我们都是孩子"></p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示内容属性</button>
<button id="btn4">显示input值</button>
</body>
</html>

text() 获取与设置

获取文本内容

$("#test").text())

输出：这是段落中的 粗体 文本。

设置文本

 $("#test_id").text("Happy Every Day");

html() 获取与设置

返回所选元素的内容（包括 HTML 标记）

$("#test").html())

输出：这是段落中的 <b>粗体</b> 文本

设置HTML

 $("#test_id").html("<b>Happy Every Day!</b>");

val() 获取与设置

设置或返回表单字段的值

$("#inputdata").val())

输出：开始的开始，我们都是孩子

设值

 $("#test_id").val("Happy Every Day");

attr() - 获取与设置

获取属性

$("#baidu").attr("href"))

输出：https://www.baidu.com/

设置属性

 <!-- 单参 -->
 $("#test_id").attr("href","https://www.baidu.com/");

 <!-- 多参 -->
 $("#test_id").attr({"href" : "https://www.baidu.com/","title" : "Happy Day" });

CSS（）设置、获取样式属性

css 属性设置支持单参或多参
注： p为id或标签名，css入参为属性名
单参 $(“p”).css(“background-color”,“yellow”);
多参 $(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});
获取样式属性： $(“p”).css(“background-color”));

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("背景颜色 = " + $("p").css("background-color"));
            });
            $("#btn2").click(function(){
                $("p").css("background-color","yellow");
            });

            $("#btn3").click(function(){
                $("p").css({"background-color":"yellow","font-size":"200%"});
            });
        });
    </script>
</head>

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button id="btn1">返回第一个 p 元素的 background-color </button>
<button id="btn2">设置 p 元素的 background-color </button>
<button id="btn3"> 为 p 元素设置多个样式</button>
</body>
</html>

获取、设置 CSS - class 属性

增删 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类

addClass、removeClass 可以单参或多参
如：$(“p”).addClass(“blue measure”); 或 $(“p”).removeClass(“blue”);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#add").click(function () {
                $("h1,p").addClass("blue measure");
            });
            $("#remove").click(function () {
                $("h1,p").removeClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue {
            color: blue;
        }
        .measure {
            font-size: 20px;
        }
    </style>
</head>
<body>

<h1>cheer ~</h1>
<p>Learning makes people happy</p>
<br>
<button id="add">为元素添加 class</button>
<button id="remove">为元素移除 class</button>

</body>
</html>

反向切换CSS类

toggleClass() - 对被选元素进行添加/删除类的切换操作

CSS类切换操作建立在同等标签的情况下，如下文中同为p标签的俩个段落 ~

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").toggleClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>

<p class="blue">开始段落</p>
<p>结尾段落</p>

<br>
<button>切换 class</button>
</body>
</html>

元素操作

添加元素

以下是以 p 标签使用API的，项目使用中也可以通过id设置

prepend() - 在被选元素的开头插入内容
append() - 在被选元素的结尾插入内容
before() - 在被选元素之前插入内容
after() - 在被选元素之后插入内容

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("p").prepend("<b>追加文本</b>");
            });
            $("#btn2").click(function () {
                $("p").append("<b>追加文本</b>");
            });
            $("#btn3").click(function () {
                $("p").before("<b>追加文本</b>");
            });
            $("#btn4").click(function () {
                $("p").after("<b>追加文本</b>");
            });
            $("#btn5").click(function () {
                $("ol").append("<li>追加列表项</li>");
            });
        });
    </script>
</head>

<body>
<p id="p">这是一个段落</p>

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="btn1">开头插入</button>
<button id="btn2">结尾插入</button>
<button id="btn3">之前插入</button>
<button id="btn4">之后插入</button>
<button id="btn5">添加列表项</button>

</body>
</html>

删除元素

remove()的使用场景可以是通过某标签的class，属性等条件进行模糊删除，也可以是精确删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").remove(".test");
            });
            $("#btn2").click(function(){
                $("#div1").remove();
            });
            $("#btn3").click(function(){
                $("#div1").empty();
            });
        });
    </script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;">
    div文本
    <p>div第一个段落</p>
    <p class="test">div第二段落</p>
</div>
<br>
<button id="btn1" >移除所有  class="test" 的 p 元素</button>
<button id="btn2">移除div元素</button>
<button id="btn3">清空div元素</button>
</body>
</html>