jQuery学习笔记--------(选择器、事件、语法)-CFANZ编程社区

jQuery 简介

jQuery是一个JavaScript函数库。

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

jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities。

jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，那么请选择1.9。还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

jQuery 安装

可以通过多种方法在网页中添加 jQuery。可以使用以下方法：从 jquery.com

下载 jQuery 库、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery。

jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它：

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

PS:

是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？

在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

如果不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

百度、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

百度CDN:

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

谷歌CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

使用百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 语法：

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

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

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

实例:

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

所有 jQuery 函数位于一个 document ready 函数中：

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

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

提示：简洁写法（与以上写法效果相同）:

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

jQuery 选择器

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

jQuery 元素选择器基于元素名选取元素。在页面中选取所有 <p> 元素:$("p")

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

<script language="JavaScript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

#id 选择器

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

实例：

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

<script language="JavaScript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。语法如下：$(".test")

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

<script language="JavaScript">
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>

选择器更多实例如下：

jQuery学习笔记--------(选择器、事件、语法)_jquery安装

独立文件中使用 jQuery 函数

如果网站包含许多页面，并且希望jQuery 函数易于维护，那么请把 jQuery 函数放到独立的 .js 文件中。把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

jQuery 事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标、选取单选按钮、点击元素。

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

常见 DOM 事件：

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：$("p").click();

下一步是定义什么时间触发事件。可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许在文档完全加载完后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

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

dblclick()

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

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

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#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");
});