8.jQuery获取对象与事件 - SentralLiu

公告

1.1 jQuery概述

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.2 jQuery特点

具有独特的链式语法。

支持高效灵活的CSS选择器。

拥有丰富的插件。

兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 为什么要用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery，例如：Google、Microsoft、IBM、Netflix

2.1 直接引用jQuery

从 jQuery.com 官网或从GitHub下载合适版本（本课程使用1.12.4版本，兼容性更好，最新版本为3.x），放入服务器的合适目录中，在页面中直接引用。

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，便于可读）。

jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src="">< /script> 标签引用

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

2.2 CDN引用

2.2.1 什么是CDN？

CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

2.2.2 常见 CDN

百度 CDN

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

新浪 CDN

<head>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    </script>
</head>

Google CDN

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

Microsoft CDN

<head>
    <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
    </script>
</head>

三、jQuery语法

$(匿名函数)：表示页面DOM加载完毕，则执行，比onload事件执行早，并且可以写多个。$是jQuery函数的简写。
jquery每写一个页面加载都会触发一次；且执行效率比js的页面加载快
js的页面加载只执行最后一次
$(selector).action()：通过选取 HTML 元素，并对选取的元素执行某些操作。
- 选择符（selector）表示"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作

3.1.选择器：

元素选择器：jQuery 元素选择器基于元素名选取元素。
示例：在页面中选取所有 <p> 元素

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

class选择器：jQuery 类选择器可以通过指定的 class 查找元素。

$("p").hide(); //通过标签选择器
$(".dd").hide();//通过类选择器
$("#hh").hide();//通过id选择器

与之前的css或js一致，往往标签和类代表多个，id代表单个

3.2.JQuery与JS对象转换

                var doc = document.getElementById("tt");
				$(doc).click(function(){
					alert("js转jquery对象");
				})
				$("#tt")[0].onclick = function(){
					alert("juqery对象转js");
				}

四、jQuery事件及常用事件方法

什么是事件？

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

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click 单击事件	keypress 键盘压下	submit 提交	load
dblclick 双击事件	keydown 键盘按压	change 选择改变	resize
mouseenter 鼠标移入	keyup 键盘弹起	focus 文本框获取焦点	scroll
mouseleave 鼠标移出		blur 文本框失去焦点	unload

jQuery 事件方法语法：

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

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

+ [总结：也就是说，不传参数是点击，传参数是设置事件。]()

> - 常用的 jQuery 事件方法
> - $(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 [jQuery 语法](http://www.runoob.com/jquery/jquery-syntax.html) 章节中已经提到过。

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

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

- mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。

- mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

- hover()：hover()方法用于模拟光标悬停事件。

- 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

posted on 2021-12-01 20:55 SentralLiu 阅读(96) 评论(0) 收藏举报

刷新页面返回顶部