jQuery

jQuery基本使用

jQuery 是一个快速、简洁的 JavaScript 库

轻量级。核心文件只有几十 KB，不会影响页面的加载速度
跨浏览器兼容
链式编程、隐式迭代
对事件、样式、动画支持，简化了 DOM 操作
支持插件扩展开发
免费、开源

入口函数：加载完 DOM 再执行 js 代码

// 第一种写法
$(documnet).ready(function() {

})

// 第二种写法
$(function() {

})

jQuery对象和DOM对象

DOM对象：用原生 JS 获取的对象就是 DOM 对象

jQuery对象：用 jQuery 方式获取的对象就是 jQuery 对象，本质上是利用

对 DOM 对象包装后产生的对象（伪数组形式存储）

jQuery 对象只能使用 jQuery 方法，DOM 对象只能使用原生的 JavaScript 属性和方法

// DOM对象转换为jQuery对象
var div = document.querySelector('div');
$(div);

// jQuery对象转换为DOM对象
$('div')[0];
$('div').get(0);

jQuery常用API

jQuery选择器

ID选择器：

$("#id")

全选选择器：

$('*')

类选择器：

$("class")

标签选择器：

$("div")

并集选择器：

$("div,p,li")

交集选择器：

$("li.current")

子代选择器：

$("ul>li")

后代选择器：

$("ul li")

筛选选择器：

$('li:first')

：获取第一个元素

$('li:last')

：获取最后一个元素

$('li:eq(2)')

：获取索引号为2的元素

$('li:odd')

：获取索引号为奇数的元素

$('li:even')

：获取索引号为偶数的元素

筛选方法：

// 查找父级
$("li").parent();

// 相当于$("ul>li")
$("ul").children("li");

// 相当于$("ul li")
$("ul").find("li");

// 查找兄弟节点，不包括本身
$(".first").siblings("li");

// 查找当前元素之后所有的同级元素
$(".first").nextAll();

// 查找当前元素之前所有的同级元素
$(".first").prevAll();

// 检查当前元素是否含有某个类
$("div").hasClass("first");

// 相当于$("li:eq(2)")
$("li").eq(2);

样式操作

jQuery使用

css()

方法修改简单元素样式

// 参数只写属性名，返回属性值
$("div").css("color");

// 设置样式，可以通过对象的方式修改多个样式
$("div").css("color", "pink");
$("div").css({
	"width": 200,
	"heigth": 300
})

添加类、删除类、切换类

$("div").adClass("current");

$("div").removeClass("current");

$("div").toggleClass("currrent");

jQuery效果

显示隐藏效果：

show(speed,easing,fn)

显示

hide(speed,easing,fn)

隐藏

toggle(speed,easing,fn)

切换

参数都可以省略
speed：三种预定速度之一的字符串（ slow ， normal ， fast ）或表示动画时长的毫秒值
easting：用来指定切换效果，默认 swing ，可用 linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

滑动效果：

slideDown(speed,easing,fn)

sllideUp(speed,easing,fn)

slideToggle(speed,easing,fn)

参数都可以省略
speed：三种预定速度之一的字符串（ slow ， normal ， fast ）或表示动画时长的毫秒值
easting：用来指定切换效果，默认 swing ，可用 linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

事件切换：

hover([over,]out)

over：鼠标移到元素上要触发（相当于 mouseenter ）
out：鼠标移出元素要触发（相当于 mouseleave ）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			div {
				width: 100px;
				height: 30px;
				border: 1px solid #333;
				text-align: center;
				line-height: 30px;
				color: #ffaa00;
			}
			
			ul {
				display: none;
				margin: 130 auto;
				width: 100px;
			}
			
			li {
				list-style: none;
				display: block;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div>微博</div>
		<ul>
			<li>我的</li>
			<li>私信</li>
			<li>@</li>
		</ul>
	</body>
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
		/**
			$("div").hover(function() {
				$("ul").slideDown(200);
			}, function() {
				$("ul").slideUp(200);
			})
		*/	
			$("div").hover(function() {
				$("ul").stop().slideToggle(200);
			})
		})
	</script>
</html>

动画队列：

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行

停止排队：

stop()

，必须写在动画的前面

淡入淡出效果：

fadeIn(speed, easing, fn)

fadeOut(speed, easing, fn)

fadeToggle(speed, easing, fn)

fadeTo(时间, 透明度)

参数都可以省略
speed：三种预定速度之一的字符串（ slow ， normal ， fast ）或表示动画时长的毫秒值
easting：用来指定切换效果，默认 swing ，可用 linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

自定义动画：

animate(params, speed, easing, fn)

params ：想要更改的样式属性，以对象的形式传递。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法。其余参数省略。
speed：三种预定速度之一的字符串（ slow ， normal ， fast ）或表示动画时长的毫秒值
easting：用来指定切换效果，默认 swing ，可用 linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

jQuery属性操作

设置或者获取元素固有属性：

prop()

设置或者获取元素自定义属性：

attr()

// 获取属性值
$('a').prop('href');
// 设置属性值
$('a').prop("href", "https://www.baidu.com/");

数据缓存：

data()

// 该数据存储在元素的内存里面
$("span").data("name", "Tom");
console.log($("span").data("name");	// Tom

jQuery内容文本值

html()

：获取设置元素内容

text()

：获取设置元素文本内容

val()

：获取设置表单值

jQuery元素操作

遍历元素：

jQuery 隐式迭代是对同一类元素做了同样的的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。

$("div").each(function(index, domEle) {})

each() 方法遍历匹配的每一额元素，主要用 DOM 处理
里面回调函数有两个参数： index 是每个元素的索引号， domEle 是每个 DOM 元素对象，不是 jQuery 对象
如果要使用 jQuery 方法，需要将 domEle 转换为 jQuery 对象

$.each(object, function(index, element) {})

$.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组、对象
回调函数的两个参数： index 是每个元素的索引号， element 遍历内容

创建元素：

$("<li></li>")

：动态创建一个

li

标签

添加元素：

内部添加：

element.append()

把内容放到匹配元素内部的最后面

element.prepend()

把内容放到匹配元素内部的最前面

外部添加：

element.after()

把内容放到匹配元素外部的后面

element.before()

把内容放到匹配元素外部的前面

<body>
	<ul>
		<li>原先的li<li>
	</ul>
	<script>
		$(function() {
			var li = $("<li>新创建的li</li>");
			$("ul").append(li);
			$("ul").prepend(li);

			var div = $("<div>新建的div</div>");
			$("ul").after(div);
			$("ul").before(div);
		})
	</script>
</body>

删除元素：

element.remove()

：删除匹配的元素

element.empty()

：删除匹配的元素集合中所有的子节点

element.html("")

：删除匹配的元素集合中所有的子节点

jQuery尺寸、位置操作

width()

，

height()

：获取匹配元素的宽度和高度，只计算

width

和

height

innerWidth()

，

innerHeight()

：获取匹配元素宽度和高度，包括

padding

outerWidth()

，

outerHeight()

：获取匹配元素宽度和高度，包括

padding

、

border

outerWidth(true)

，

outerHeight(true)

：获取匹配元素宽度和高度，包括

padding

、

border

、

margin

offset()

：设置或者返回被选元素相对于文档的偏移坐标，跟父级没有关系

该方法有两个属性 left 、 top ： offset().top 用于获取距离文档顶部的距离， offset().left 用于获取距离文档左侧的距离
可以设置元素的偏移： offset({ttop:10, left:10})

position()

：用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准。只能获取，不能设置。

scrollTop()

，

scrollLeft()

：设置或获取元素被卷去的头部和左侧

jQuery事件

jQuery事件注册

element.on(events, [selector], fn)

：在匹配元素上绑定一个或多个事件的事件处理函数

events：一个或多个用空格分隔事件类型
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数

$(function() {
	// 单个事件注册
	$('div').click(function() {
		$(this).css("color", "pink");
	})

	// 事件处理on
	$("span").on({
		mouseenter: function() {
			$(this).css("color", "red");
		},
		click: function() {
			$(this).css("color", "blue");
		]
	})

	// on可以用于事件委托
	$("ul").on("click", "li", function() {
		alert(11);
	})
})

off()

：可以移除通过

on()

方法添加的事件处理函数，如果不传递参数，则解绑所有的事件；需要解绑哪个事件，就传递哪个事件。

one()

：绑定事件，只触发一次

trigger()

：自动触发事件

// 自动触发事件
$(function() {
	$("div").on("click", function() {
		alert(11);
	})
	// 1.
	$("div").click();

	//2.
	$("div").trigger("click");

	// 3.不会触发元素的默认行为
	$("div").triggerHandler("click");
})

jQuery事件对象

element.on("click", function(event) {})

阻止默认行为： event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

jQuery其他方法

jQuery拷贝对象

$.extend([deep], target, object1, [objectN])

deep：如果设为 true ，则为深拷贝，默认为 false ,浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象

$(function() {
	var targetObj = {};
	var obj = {
		name: 'Tom',
		age: 18
	}
	$.extend(targetObj, obj);	// 会覆盖targetObj里面原来的数据
})

深拷贝和浅拷贝：

数据分为基本数据类型和复杂数据类型。基本数据类型直接存储在栈（stack），复杂数据类型是该对象在栈中的引用，真实数据放在堆内存中，即复杂数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。

浅拷贝只复制了指向某个对象的指针，而不是复制对象本身，新旧对象还是共享同一块堆内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享堆内存，修改新对象不会影响旧对象。

jQuery学习笔记jQuery

jQuery插件

jQuery插件库

jQuery之家

全屏滚动

全屏滚动（中文版）

jQuery学习笔记jQuery

jQuery

jQuery基本使用

jQuery对象和DOM对象

jQuery常用API

jQuery选择器

样式操作

jQuery效果

jQuery属性操作

jQuery内容文本值

jQuery元素操作

jQuery尺寸、位置操作

jQuery事件

jQuery事件注册

jQuery事件对象

jQuery其他方法

jQuery拷贝对象

jQuery插件

继续阅读

jQuery实现百度搜索框

2022秋招面试记录与反思

《断舍离》读后感

unity中实现背景滚动

命令行和环境变量

Android记事本（附apk和源码）

2010年终总结--技术篇

现国内基金定投最好的入门书《指数基金投资指南》

【人工智能行业大师访谈1】吴恩达采访 Geoffery Hinton

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

JQuery--dom捕获html元素

线程同步，可重入锁，synchronized

jquery_126_demo

对象锁和全局锁

iview后台管理模版