jQuery概述、jQuery对象与DOM对象、jQuery选择器、jQuery操作、jQuery筛选、jQuery事件

原创已于 2022-02-25 20:58:01 修改 · 287 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-02-07 09:59:24 首次发布

本文介绍了jQuery的基础概念，包括其封装简化、设计理念，以及核心功能如选择器、DOM操作、事件处理。详细讲解了jQuery对象与DOM对象的转换、基本选择器、表单选择器、常见操作方法和筛选技巧。

1、jQuery概述

jQuery 对象：
- jQuery 对象就是通过 jQuery() 或$()包装 DOM 对象后产生的对象。
- jQuery 对象是 jQuery 独有的,如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#id”).html();
- jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法。
jQuery 对象转成 DOM 对象：
jQuery 对象不能使用 DOM 中的方法, 但如果不得不使用 DOM 对象的时候, 有如下两种处理方法:

<--（1）jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.-->
var $cr = $("#cr");
var cr = $cr[0];

<--（2）使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象. -->
var $cr = $("#cr");
var cr = $cr.get(0);

DOM 对象转成 jQuery 对象
对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来( jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象。

var cr = document.getElementById("cr");
var $cr = $(cr);

转换后就可以使用 jQuery 中的方法了

$("#id")      //document.getElementById("id");
$("tagName")  //document.getElementsByTagName("tagName");

筛选——祖先
- 筛选是对获取的对象进行筛选，最终留下符合某些特征的对象。
  parent()返回被选标签的直接父标签 parents()返回被选标签的所有祖先标签，它一路向上直到文档的根标签 (<html>)
筛选——后代
- children()返回被选标签的所有直接子标签。
- find()返回被选标签的后代标签，一路向下直到最后一个后代。
筛选——同胞
- siblings()返回被选标签的所有同胞标签。
- next()返回被选标签的后一个相邻标签。
- nextAll()返回被选标签的所有后面的同胞标签。
- prev()返回被选标签的前一个相邻标签。
- prevAll()返回被选标签的所有前面的同胞标签。
筛选——过滤
- first()返回被选标签的首个标签。
- last()返回被选标签的最后一个标签。
- eq()返回被选标签中带有指定索引号的标签。
- filter()返回匹配的标签。
- not()返回不匹配标准的所有标签。
筛选——判断
- is() 根据选择器、标签或 jQuery 对象来检测匹配标签集合，如果这些标签中至少有一个标签匹配给定的参数，则返回 true。
- hasClass()检查当前的标签是否含有某个特定的类，如果有，则返回 true。

jQuery事件——ready事件
- 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
- 这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
  语法：

$(document).ready(匿名函数);
$(document).ready(function(){ 
	在这里写你的代码...
});
/*简单写法：*/
$(fucntion(){
	 在这里写你的代码... 
})

<div id=“divOne”>
	给此div在js中动态绑定点击事件
</div>
$(function(){
	$("#divOne").click(function(){
		alert("div被点击了");
	});
});

jQuery事件——合成事件
hover()：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法，当鼠标移动到一个匹配的标签上面时，会触发指定的第一个函数。当鼠标移出这个标签时，会触发指定的第二个函数。

$(“选择器").hover( fn1,fn2);