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

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

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。

jQuery 安装

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

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

jQuery 库是一个 JavaScript 文件，可以使用 HTML 的

PS:

是否很疑惑为什么我们没有在

#id 选择器

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

实例：

.class 选择器

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

选择器更多实例如下：

独立文件中使用 jQuery 函数

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

jQuery 事件

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

常见 DOM 事件：

jQuery 事件方法语法

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

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

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

常用的 jQuery 事件方法

$(document).ready()

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

click()

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

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

blur()

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。