什么是 jQuery ？

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示： 除此之外，Jquery还提供了大量的插件。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

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

$ 美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() 隐藏当前元素
• $("p").hide() 隐藏所有 <p> 元素
• $("p.test").hide() 隐藏所有 class="test" 的 <p> 元素
• $("#test").hide() 隐藏所有 id="test" 的元素

jQuery 入口函数 和 JavaScript 入口函数

jQuery 入口函数

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数

window.onload = function () {
    // 执行代码
}

两者区别

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

  
  
  image.png

jQuery 选择器

• jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
• jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它
  基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
• jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

实例: 用户点击按钮后，所有 <p> 元素都隐藏：

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

#id 选择器

• jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
• 页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
  通过 id 选取元素语法如下:

$("#test")

实例: 当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

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

.class 选择器

• jQuery 类选择器可以通过指定的 class 查找元素。
  语法如下：

$(".test")

实例: 用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

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

更多实例

| 语法                                | 描述
| $("*")                              | 选取所有元素
| $(this)                             | 选取当前 HTML 元素
| $("p.intro")                        | 选取 class 为 intro 的 <p> 元素 
| $("p:first")                        | 选取第一个 <p> 元素 
| $("ul li:first")                    | 选取第一个 <ul> 元素的第一个 <li> 元素
| $("ul li:first-child")              | 选取每个 <ul> 元素的第一个 <li> 元素
| $("[href]")                         | 选取带有 href 属性的元素 
| $("a[target='_blank']")             | 选取所有 target 属性值等于 "_blank" 的 <a> 元素
| $("a[target!='_blank']")            | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
| $(":button")                        | 选取所有 type="button" 的 <input> 元素 和 <button> 元素
| $("tr:even")                        | 选取偶数位置的 <tr> 元素
| $("tr:odd")                         | 选取奇数位置的 <tr> 元素 

jQuery 事件

什么是事件？

• 页面对不同访问者的响应叫做事件。
• 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

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

常用的 jQuery 事件方法

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

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

dblclick()

• 当双击元素时，会发生 dblclick 事件。
  dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

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

mouseleave()

• 当鼠标指针离开元素时，会发生 mouseleave 事件。
  mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数:

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

mousedown()

• 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
  mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

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

mouseup()

• 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
  mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

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

hover()

• hover()方法用于模拟光标悬停事件。
  当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

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

focus()

• 当元素获得焦点时，发生 focus 事件。
• 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
  focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

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

blur()

• 当元素失去焦点时，发生 blur 事件。
  blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

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

jQuery 获取内容和属性

• jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

• jQuery 中非常重要的部分，就是操作 DOM 的能力。
• jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性 - attr()

• jQuery attr() 方法用于获取属性值。
  下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

attr 和 prop 的区别介绍：

• 对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
• 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

<a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a>

• 以上这个例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

• 以上这个例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。

prop()函数的结果:

• 如果有相应的属性，返回指定属性值。
• 2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

• 如果有相应的属性，返回指定属性值。
• 如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

设置内容 text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html() 以及 val() 的回调函数

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

设置属性 - attr()

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

//同时设置多个值
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

attr() 的回调函数

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

jQuery - 添加元素

添加新的 HTML 内容

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

jQuery append() 方法

//jQuery append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。
$("p").append("追加文本");

jQuery prepend() 方法

//jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("在开头追加文本");

//三个运行的结果是一样的
function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

区别

append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

jQuery 删除元素

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

remove() 方法

//jQuery remove() 方法删除被选元素及其子元素。
$("#div1").remove();

empty() 方法

//jQuery empty() 方法删除被选元素的子元素。
$("#div1").empty();

过滤被删除的元素

• jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
• 该参数可以是任何 jQuery 选择器的语法。
  下面的例子删除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

jQuery 尺寸

jQuery 提供多个处理尺寸的重要方法：

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

jQuery width() 和 height() 方法

1、width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
2、height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
//下面的例子返回指定的 <div> 元素的宽度和高度：
//实例
$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法

1、innerWidth() 方法返回元素的宽度（包括内边距）。
2、innerHeight() 方法返回元素的高度（包括内边距）
//下面的例子返回指定的 <div> 元素的 inner-width/height：
//实例
$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth() 和 outerHeight() 方法

1、outerWidth() 方法返回元素的宽度（包括内边距和边框）。
2、outerHeight() 方法返回元素的高度（包括内边距和边框）。
//下面的例子返回指定的 <div> 元素的 outer-width/height：
//实例
$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});