jQuery

1. jQuery 简介

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

jQuery 下载

1. 下载到本地下载地址:https://jquery.com/
2. CDN加速服务,使用网络上现成的,缺陷就是必须要有网络。
   CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
   <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
   
'''版本区别''' 

		1.x:  兼容IE678
		2.x:  不兼容IE678
		3.x:  不兼容IE678   


IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作

在这里插入图片描述

'''后缀区别'''

		min.js      压缩之后的文件 容量更小  
		.js			没有压缩的文件 容量稍大
		

2. jQuery 选择器

jQuery 中所有选择器都以美元符号开头:$()。

补充
		$('#d1')[0]  // jQuery对象转原生js对象
		$(标签对象)   // 原生js对象转jQuery对象

如果是原生js代码查找出来的对象,那么只能调用原生js的对象方法
如果是jQuery查找出来的对象,那么只能调用jQuery对象方法	

基础选择器

$("*")              //所有元素选择器
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

层级选择器:

x和y可以为任意选择器

		$("x > y ")   //子元素选择器
		$("x y")      //后代元素选择器
		$("x + y")    //紧邻下一个元素选择器
		$("x ~ y")    //兄弟元素选择器
		
示例(代码片段)

		<body>
		<div>
		    <p id="p1">p1</p>
		    <p class="c1">p2</p>
		    <p>p3</p>
		    <p>p4</p>
		    <p>p5</p>
		    <p>p6</p>
		    <div>
		        <p>p7</p>
		        <p>p8</p>
		    </div>
		</div>
		<a>a1</a>
		<a>a2</a>
		<script>
		$('div').css('background','gray')  //修改div标签背景
		$('#p1').css('color','red')  // 修改id为p1的颜色
		$('.c1').css('color','white')  // 修改class类为c1的颜色
		$('div>p').css('fontSize','25px') // 修改div下一层级所有的段落文本大小
		$('div div p').css('fontSize','5px') // 修改div下一层级的div所有的段落文本大小
		$('div+a').css('fontSize','25px')  // 修改div毗邻的一个同级别a标签
		$('div~a').css('background','pink')  //修改div毗邻的所有同级别a标签
		</script>
		</body>



结果如下图

在这里插入图片描述

在这里插入图片描述

基本过滤筛选器:

可以对选择器进行筛选


		:first 		   // 选取第一个元素
		:last 		   // 最后一个
		:eq(index)	   // 索引等于index的元素
		:gt(index)	   // 匹配所有大于给定索引值的元素
		:lt(index)	   // 匹配所有小于给定索引值的元素
		:even     	   // 匹配所有索引值为偶数的元素,从 0 开始计数
		:odd 		   // 匹配所有索引值为奇数的元素,从 0 开始计数
		:not(元素选择器)// 移除所有满足not条件的标签
		:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

示例(代码片段)

		<body>
		<div>
		    <p>p1</p>
		    <p>p2</p>
		    <p>p3</p>
		    <p>p4</p>
		    <p>p5</p>
		    <p>p6</p>
		</div>
		<script>
		$('div p:first').css('color','red')  // 修改第一个段落文本颜色
		$('div p:last').css('color','green') // 修改最后一个段落文本颜色
		$('div p:eq(1)').css('background','yellow') // 修改索引值为1的段落背景颜色
		$('div p:odd').css('fontSize','25px')  // 修改索引为奇数的段落字体大小
		$('div p:even').css('fontSize','5px')  // 修改索引为偶数的段落字体大小
		</script>
		</body>


结果如下图

在这里插入图片描述

:has、:not 示例(代码片段)

		<body>
		<div>
		    <p id="p1">p1</p>
		    <p class="c1">p2</p>
		    <p>p3</p>
		    <p>p4</p>
		</div>
		<div>
		    <a>a1</a>
		    <a>a2</a>
		</div>
		<script>
		    $("div:has(p)").css('background', 'gray')//查找包含p标签的div标签  
		    $("p:not(#p1)").css('color', 'red')//查找除了id为p1以外的所有p标签
		    $("div:not(:has(p))").css('background', 'pink')//查找没有p标签的div标签
		</script>
		</body>



结果如下图

在这里插入图片描述

在这里插入图片描述

内容过滤选择器


		$("div:contains('Runob')")    // 包含 Runob文本的 div
		$("td:empty")                 // :empty 选择器选取空的元素。
		$("td:parent")                // 选取所有带有子元素或包含文本(非空)的 <td> 元素
	

可见性过滤选择器


		$("li:hidden")       //匹配所有不可见元素,或type为hidden的元素
		$("li:visible")      //匹配所有可见元素
		

属性过滤选择器

		
		$("div[id]")        	    // 所有含有 id 属性的 div 元素
		$("div[id='123']")          // id属性值为123的div 元素
		$("div[id!='123']")         // id属性值不等于123的div 元素
		$("div[id^='qq']")          // id属性值以qq开头的div 元素
		$("div[id$='zz']")          // id属性值以zz结尾的div 元素
		$("div[id*='bb']")          // id属性值包含bb的div 元素
		$("input[id][name$='man']") // 多属性选过滤,同时满足两个属性的条件的元素
		

状态过滤选择器


		$("input:enabled")    // 匹配可用的 input
		$("input:disabled")   // 匹配不可用的 input
		$("input:checked")    // 匹配选中的 input
		$("option:selected")  // 匹配选中的 option
		$(':checked')         // 会将option也找到
		$(':selected')  	  // 只会找到option标签
		

表单选择器

		
		$(":input")      //匹配所有 input, textarea, select 和 button 元素
		$(":text")       //所有的单行文本框,等价于 $("[type=text]"),推荐使用$("input:text")效率更高,下同
		$(":password")   //所有密码框
		$(":radio")      //所有单选按钮
		$(":checkbox")   //所有复选框
		$(":submit")     //所有提交按钮
		$(":reset")      //所有重置按钮
		$(":button")     //所有button按钮
		$(":file")       //所有文件域

筛选器方法

同级别往下查找

		$("#id").next()     		// 查找下一个同级别元素
		$("#id").nextAll()			// 查找下面所有同级别元素
		$("#id").nextUntil("#i2")   // 查找指定两个元素之间的所有同级元素
		
同级别向上查找

		$("#id").prev()				// 查找上一个同级别元素
		$("#id").prevAll()			// 查找上面所有同级别元素
		$("#id").prevUntil("#i2")	// 查找指定两个元素之间的所有同级元素

查找父标签

		$("#id").parent()			// 返回被选元素的直接父元素
		$("#id").parents() 			// 返回被选元素的所有祖先元素
		$("#id").parentsUntil() 	// 返回介于两个给定参数之间的所有祖先元素

查找儿子和兄弟

		$("#id").children();		// 返回被选元素的所有直接子元素
		$("#id").siblings();		// 返回被选元素的所有同级元素

在这里插入图片描述

3. jQuery 获取内容

jQuery 文本操作

jQuery 方法

		html()	设置或返回被选元素的内容  		对应DOM操作中element.innerHTML
		text()	设置或返回被选元素的文本内容    对应DOM操作中element.innerText
		
示例(代码片段)
		
		<body>
		<p id="p1"></p>
		<p id="p2"></p>
		<script>
		    $pEle = $('#p1')
		    $p1Ele = $('#p2')
		    $pEle.html('<b>你好啊</b>')
		    $p1Ele.text('<b>你好啊</b>')
		    console.log($pEle.html())
		    console.log($p1Ele.text())
		</script>
		</body>


1. 同样的,text不能识别标签,结果如下图所示

在这里插入图片描述

jQuery 获取值

1. 获取 value

使用的方法

		val()	设置或返回被选元素的属性值(针对表单元素) 对应DOM操作中element.value

示例(代码片段)

		<body>
		<div><input type="text"></div>
		<div>
		    <select>
		        <option value="hz">杭州</option>
		        <option value="bj">北京</option>
		        <option value="sz">深圳</option>
		    </select>
		</div>
		<div><textarea></textarea></div>
		<script>
		    var iEle = $('input')
		    var sEle = $('select')
		    var tEle = $('textarea')
		    iEle.val('吃了没')
		    sEle.val('bj')
		    tEle.val('真的吗')
		</script>
		</body>



1. 示例中是设置表单的值,也可以获取值,如下图演示

在这里插入图片描述
2. 获取文件内容

使用的方法

		$(...)[0].files


示例(代码片段)

		<body>
		<div><input type="file" multiple></div>
		</body>


1. 如下图演示

在这里插入图片描述
在这里插入图片描述

jQuery 文档操作

1. 创建标签

使用的方法

		$('<p>')   创建新标签

示例

		<body>
		<script>
		    var $pEle = $('<p>')
		    $pEle.html('你好啊')
		    $('body').append($pEle)
		</script>
		</body>


2. 添加内容

'内部添加'
		// 在元素内部的尾部添加
		$(A).append(B)		  	把 B 追加到 A
		$(A).appendTo(B)	  	把 A 追加到 B
		
		// 在内部的头部添加
		$(A).prepend(B)  		把 B 前置到 A
		$(A).prependTo(B)  		把 A 前置到 B
		
'外部添加'
		// 在元素外部的后面添加
		$(A).after(B) 		 	把 B 放到 A 的后面
		$(A).insertAfter(B)  	把 A 放到 B 的后面
		
		// 在元素外部的前面添加
		$(A).before(B) 			把 B 放到 A 的前面
		$(A).insertBefore(B) 	把 A 放到 B 的前面
		

3. 删除内容

使用的方法

		remove()  				移除被选元素
		empty() 				从被选元素移除所有子节点和内容


示例(代码片段)

		<body>
		<div></div>
		<script>
		    var $dEle = $('div')
		    var $iEle = $('<input type="text"value="这是div内部头部文本框">')
		    var $pEle = $('<p>这是加入到div内部尾部的段落</p>')
		    var $tEle = $('<input type="button"value="这是加入到div外部前面的按钮">')
		    var $aEle = $('<a href="https://www.baidu.com">这是加入到div外部后面的链接</a>')
		    
		    $dEle.after($aEle)
		    $dEle.before($tEle)
		    $dEle.append($pEle)
		    $dEle.prepend($iEle)
		    $tEle.remove()  // 删除元素
		</script>
		</body>


1. 分别在 div 内部和外部的前后面添加元素,并删除外部前面的按钮,结果如下图。

在这里插入图片描述
4. 替换元素

使用的方法

		replaceWith()	把被选元素替换为新的内容
		语法:	$(selector).replaceWith(content,function(index))

		replaceAll()	把被选元素替换为新的 HTML 元素(内容必须包含 HTML 标签)
		语法:	$(content).replaceAll(selector)
		
示例(代码片段)
		
		<body>
		<p id="p1">段落1</p>
		<p id="p2">段落2</p>
		<script>
		    var $dEle = $('div')
		    var $pEle1 = $('#p1')
		    var $pEle2 = $('#p2')
		
		    $pEle1.replaceWith('你好啊')
		    $('<a href="">替换的链接</a>').replaceAll($pEle2)
		</script>
		</body>


1. 结果如下图

在这里插入图片描述
5. 克隆
克隆方法可以生成指定元素的副本。

使用的方法:		clone()	生成被选元素的副本
语法:

		$(selector).clone(true|false)

true 表示复制的副本也有主体的功能,默认为 false
示例(代码片段)
		
		<body>
		<input type="button" value=" 复制 ">
		<script>
		    var $iEle = $('input')
		    $iEle.click(function (){  // 绑定点击事件
		        $cEle = $iEle.clone(true) // 声明克隆副本对象
		        $(this).after($cEle)  // 将副本添加
		    })
		</script>
		</body>
		

1. 此时点击按钮可以复制此按钮,并且由于clone参数为true,所以副本也具有复制的功能,如下图所示

在这里插入图片描述
在这里插入图片描述

4. jQuery 样式操作

通过jQuery也可以对元素样式进行操作。

修改 css 样式

使用的方法:	css()	为被选元素设置或返回一个或多个样式属性
语法:
			$(selector).css(property)						返回 CSS 属性值
			$(selector).css(property,value)					设置 CSS 属性和值
			$(selector).css({属性:value, 属性:value, ...})	设置多个属性和值
			
示例(代码片段)

		<body>
		<p>你好啊</p>
		<script>
		    var $pEle = $('p')
		    $pEle.css({'color':'pink', 'font-size':'25px'})
		</script>
		</body>


1. 效果以及查看css属性演示如下图所示

在这里插入图片描述

jQuery 样式类操作

使用的方法

		addClass(); 			添加指定的CSS类名。
		removeClass(); 			移除指定的CSS类名。
		hasClass(); 			判断样式存不存在
		toggleClass(); 			切换CSS类名,如果有就移除,如果没有就添加。
		
示例(代码片段)

		<body>
		<p>你好啊</p>
		<script>
		    var $pEle = $('p')
		    $pEle.addClass('c1 c2')  
		    $pEle.removeClass('c2')  
		    $pEle.toggleClass('c2')
		</script>
		</body>


1. 最终结果如下图所示

在这里插入图片描述
在这里插入图片描述

5. jQuery 属性操作

attr() 方法

使用的方法

		attr(property) 								返回指定元素的属性值
		attr(property, value) 						为指定元素设置一个属性值
		attr({property:value, property:value,...}) 	为所有匹配元素设置多个属性值
		removeAttr()  								从每一个匹配的元素中删除一个属性


'attr() 方法可以用于默认属性,也可以用于自定义属性'
示例(代码片段)

		<body>
		<a href="" target="_blank">这是一个链接</a>
		</body>

1. 代码演示如下图所示

在这里插入图片描述
在这里插入图片描述

prop() 方法

使用 attr() 方法获取属性有时会出现问题。在获取checkboxradio动态选中的checked属性并不精准,此时尽量使用 prop()方法

语法:

		prop(property) 								返回属性的值
		prop(property,value) 						设置属性和值
		prop({property:value, property:value,...}) 	设置多个属性和值
		removeProp()								删除属性


示例(代码片段)

		<body>
		<input type="checkbox" id="i1">
		<input type="checkbox" id="i2">
		<input type="checkbox" id="i3">
		</body>


1. 定义三个复选框,并给予不同的id,操作流程如下图

在这里插入图片描述

示例中的复选框并没有指定默认选中,使用 attr() 方法并不能获得动态点击的 checked 属性会返回一个
undefined,而 prop() 方法可以捕获动态的 checked 属性并返回 true 。

prop() 与 attr() 方法比较

'attr()':	
		1. attr全称attribute(属性)。表示的是 'HTML标签属性',它的作用范围只限于HTML标签内
		   的属性。
		   
		2. 如果有相应的属性,返回指定属性值
		   如果没有相应的属性,返回值是 undefined。
		   
'prop()':	
		1. prop全称property(属性)。表示的是 'DOM对象属性',获取的是这个DOM对象的属性。所
		   以prop不支持获取标签的自定义属性
		   
		2. 如果有相应的属性,返回指定属性值。
		   如果没有相应的属性,返回值是空字符串。


'checked', 'selected' 或者 'disabled' 使用 prop 方法返回的是 'true''false'

6. jQuery 尺寸

处理元素和浏览器窗口的尺寸

		width()
		height()
		innerWidth()
		innerHeight()
		outerWidth()
		outerHeight()
		

7. jQuery 位置操作

使用的方法

		'offset()'     	获取匹配元素在当前窗口的相对偏移或设置元素位置
		语法:			offset()						返回偏移位置
						offset({top:value,left:value})	设置偏移位置
		
		'position()'   	获取匹配元素相对父元素的偏移
		语法:			position()						返回 top 和 left 偏移位置
		
		'scrollTop()'  	设置或返回被选元素的垂直滚动条位置
		语法:			scrollTop()						返回垂直滚动条位置
						scrollTop(position)				设置垂直滚动条位置
		
		'scrollLeft()' 	设置或返回被选元素的水平滚动条位置
		语法:			scrollLeft()					返回水平滚动条位置
						scrollLeft(position)			设置水平滚动条位置
		

在这里插入图片描述

8. jQuery 事件操作

常用事件与绑定方式

事件说明
focus()元素获得焦点时
blur()元素失去焦点触发
change()当元素的值改变时发生 change 事件(仅适用于表单字段)
click()单击元素时触发
dblclick()双击元素时触发
hover()触发鼠标悬停在指定元素上,鼠标离开元素俩个事件
keydown()当键盘键被按下时触发
keyup()当键盘键被松开时触发
mousedown()当鼠标指针移动到元素上方,并按下鼠标左键时触发
mouseleave()当鼠标指针离开被选元素时触发
mouseout()鼠标指针离开被选元素或任意子元素时都会被触发
mouseover()鼠标指针进入被选元素或任意子元素时都会被触发
on()在被选元素及子元素上添加一个或多个事件处理程序
off()off() 方法通常用于移除通过 on() 方法添加的事件处理程序
scroll()当用户滚动指定的元素时触发
select()当 textarea 或文本类型的 input 元素中的文本被选择时触发
submit()提交表单时触发(只适用于 <form> 元素)
inputinput 内容被改变的时候触发,且需要使用 on 添加
'''jQuery绑定'''

		jQuery对象.click(function(){})
		jQuery对象.change(function(){})
		.......
		
'''on 绑定'''

		$(selector).on(event,childSelector,data,function)


event			必需。一个或多个事件
childSelector	可选。子元素选择器(可用于事件传递)
data			可选。规定传递到函数的额外数据。
function		可选。规定当事件发生时运行的函数。
'''off 移除事件'''( off 方法移除用 on 方法绑定的事件处理程序。)

		off( events [, selector ][,function(){}])
		

events: 事件
selector: 选择器(可选的)
function: 事件处理函数

事件小案例

hover 事件案例

示例(代码片段)

		<body>
		<span>放这里放这里</span>
		<script>
		    var $sEle = $('span')
		    $sEle.hover(
		        function () {
		            alert('小伙子终于来了')
		        },
		        function () {
		            alert('人家等了好久')
		        }
		    )
		</script>
		</body>


on 绑定事件

示例(代码片段)

		<body>
		<p>点这里</p>
		<script>
		    var $pEle = $('p')
		    $pEle.on("click", function () {
		            alert('该元素被点击')
		        }
		    )
		</script>
		</body>


实时监听 input 修改内容

示例(代码片段)

		<body>
		<input type="text">
		<script>
		    var $iEle = $('input')
		    $iEle.on("input", function () {
		            console.log($(this).val())
		        }
		    )
		</script>
		</body>


阻止后续事件执行

首先看一个示例


		<body>
		<form action="">
		    <input type="text">
		    <input type="submit" id="i1">
		</form>
		<script>
		    $('#i1').click(function () {
		            alert('123')
		        }
		    )
		</script>
		</body>


1. 在此示例中,给按钮 submit 按钮添加了点击事件,但是按钮本身有提交的功能,所以会依次执行其功能
   要是不想让其继续执行下一步功能事件可以使用下面俩种方式。
'阻止事件继续发生的方法'

		return false; // 常见阻止表单提交等
		e.preventDefault();

方法一(return<body>
		<form action="">
		    <input type="text">
		    <input type="submit" id="i1">
		</form>
		<script>
		    $('#i1').click(function () {
		            alert('123')
		            return false
		        }
		    )
		</script>
		</body>


方法二(preventDefault)
		
		<body>
		<form action="">
		    <input type="text">
		    <input type="submit" id="i1">
		</form>
		<script>
		    $('#i1').click(function (e) {
		            alert('123')
		            e.preventDefault()
		        }
		    )
		</script>
		</body>


事件冒泡

首先也看个例子


		<body>
		<div id="d1">我是div标签
		    <p id="p1">我是p标签
		        <span id="s1">我是span标签</span>
		    </p>
		</div>
		<script>
		    $('#s1').click(function () {
		            alert('111')
		        }
		    )
		    $('#p1').click(function () {
		            alert('222')
		        }
		    )
		    $('#d1').click(function () {
		            alert('333')
		        }
		    )
		</script>
		</body>


1. 当多个标签嵌套的并且都有相同事件的情况下,会出现逐级汇报的现象。也就是说,示例中点击span元素
   后所有的点击事件都会被触发,要想不触发,可以使用以下俩种方式。
'阻止事件逐级触发方法'
		
		return false
		e.stopPropagation()
		
示例(代码片段)

		<body>
		<div id="d1">我是div标签
		    <p id="p1">我是p标签
		        <span id="s1">我是span标签</span>
		    </p>
		</div>
		<script>
		    $('#s1').click(function (e) {
		            alert('111')
		            e.stopPropagation()  // 可以切断<span>标签和<p>标签之间的传递
		        }
		    )
		    $('#p1').click(function () {
		            alert('222')
		            return false   // 可以切断<p>标签和<div>标签之间的传递
		        }
		    )
		    $('#d1').click(function () {
		            alert('333')  
		        }
		    )
		</script>
		</body>


事件委托

事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
还是先看一个例子


		<body>
		<div>
		    <button>按钮1</button>
		</div>
		<script>
		    $('button').click(function (){
		        alert('123')
		    })
		    $b1Ele = $('<button>按钮2</button>')
		    $('div').append($b1Ele)
		</script>
		</body>


1. 在示例中给按键绑定了一个点击事件,但是对于动态创建的标签提前写好的事件默认是无法生效的
   可以使用事件传递的方式将该事件交给父标签执行
'事件传递方法'

		$('父标签').on('事件类型','选择器',function(){})


也就是将父标签里的所有指定事件交给指定的选择器执行
示例(代码片段)

		<body>
		<div>
		    <button>按钮1</button>
		</div>
		<script>
		    $('body').on('click', 'button', function () {
		        alert('123')
		    })
		    $b1Ele = $('<button>按钮2</button>')
		    $('div').append($b1Ele)
		</script>
		</body>


在这里插入图片描述

9. jQuery 动画效果

隐藏和显示

使用的方法

		hide()			隐藏被选元素
		show()			显示被选元素
		toggle()		用于hide() 和 show() 方法之间的切换


'toggle 方法可以自动判断当前元素需要隐藏还是显示。'		
'hide'语法:		$(selector).hide(speed,easing,callback)
'show'语法:		$(selector).show(speed,easing,callback)
'toggle'语法:	$(selector).toggle(speed,easing,callback)

speed		可选。规定隐藏(显示)效果的速度。
easing		可选。规定在动画的不同点上元素的速度。默认值为'swing',还有linear等等
callback	可选。hide() 方法执行完之后,要执行的函数

淡入淡出

使用的方法

		fadeIn()		逐渐改变被选元素的不透明度,从隐藏到可见
		fadeOut()		逐渐改变被选元素的不透明度,从可见到隐藏
		fadeTo()		把被选元素逐渐改变至给定的不透明度
		fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换

'fadeToggle 方法可以自动判断当前元素需要淡入还是淡出。'			
'fadeIn'语法:			$(selector).fadeIn(speed,easing,callback)
'fadeOut'语法:			$(selector).fadeOut(speed,easing,callback)
'fadeTo'语法:			$(selector).fadeTo(speed,'opacity',easing,callback)
'fadeToggle'语法:		$(selector).fadeToggle(speed,easing,callback)

speed		可选。规定隐藏(显示)效果的速度。
easing		可选。规定在动画的不同点上元素的速度。默认值为'swing',还有linear等等
callback	可选。hide() 方法执行完之后,要执行的函数
'opacity	fadeTo 方法必需。规定要淡入或淡出的透明度。且在 0.00 与 1.00 之间的数字。'

滑动

使用的方法

		slideUp()		通过调整高度来滑动隐藏被选元素
		slideDown()		通过调整高度来滑动显示被选元素
		slideToggle()	slideUp() 和 slideDown() 方法之间自动切换


'slideUp'语法:			$(selector).slideUp(speed,easing,callback)
'slideDown'语法:			$(selector).slideDown(speed,easing,callback)
'slideToggle'语法:		$(selector).slideToggle(speed,easing,callback)


speed		可选。规定隐藏(显示)效果的速度。
easing		可选。规定在动画的不同点上元素的速度。默认值为'swing',还有linear等等
callback	可选。hide() 方法执行完之后,要执行的函数

点赞案例

示例(完整代码)

		<!DOCTYPE html>
		<html lang="zh-CN">
		<head>
		    <meta charset="UTF-8">
		    <meta http-equiv="x-ua-compatible" content="IE=edge">
		    <meta name="viewport" content="width=device-width, initial-scale=1">
		    <title>点赞动画示例</title>
		    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		
		    <style>
		        div {
		            position: relative;
		            display: inline-block;
		        }
		
		        div > i {
		            display: inline-block;
		            color: red;
		            position: absolute;
		            right: -16px;
		            top: -5px;
		            opacity: 1;
		        }
		    </style>
		</head>
		<body>
		
		<div id="d1">点赞</div>
		<script>
		    $("#d1").on("click", function () {
		        var newI = document.createElement("i");
		        newI.innerText = "+1";
		        $(this).append(newI);
		        $(this).children("i").animate({
		            opacity: 0
		        }, 1000)
		    })
		</script>
		</body>
		</html>


1. 效果如下图

在这里插入图片描述

10. jQuery 实用工具

方法描述
$.contains()判断另一个DOM元素是否是指定DOM元素的后代
$.each()遍历指定的对象和数组
$.extend()将一个或多个对象的内容合并到目标对象
$.fn.extend()为jQuery扩展一个或多个实例属性和方法
$.globalEval()全局性地执行一段JavaScript代码
$.grep()过滤并返回满足指定函数的数组元素
$.inArray()在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1)
$.isArray()判断指定参数是否是一个数组
$.isEmptyObject()检查对象是否为空(不包含任何属性)
$.isFunction()判断指定参数是否是一个函数
$.isNumeric()判断指定参数是否是一个数字值
$.isPlainObject()判断指定参数是否是一个纯粹的对象
$.isWindow()判断指定参数是否是一个窗口
$.isXMLDoc()判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档
$.makeArray()将一个类似数组的对象转换为真正的数组对象
$.map()指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回
$.merge()合并两个数组内容到第一个数组
$.noop()一个空函数
$.now()返回当前时间
$.parseHTML()将HTML字符串解析为对应的DOM节点数组
$.parseJSON()将符合标准格式的JSON字符串转为与之对应的JavaScript对象
$.parseXML()将字符串解析为对应的XML文档
$.trim()去除字符串两端的空白字符
$.type()确定JavaScript内置对象的类型
$.unique()在jQuery 3.0中被弃用。对DOM元素数组进行排序,并移除重复的元素
$.uniqueSort()对DOM元素数组进行排序,并移除重复的元素
$.data()在指定的元素上存取数据,并返回设置值
$.hasData()确定一个元素是否有相关的jQuery数据
$.sub()创建一个新的jQuery副本,其属性和方法可以修改,而不会影响原来的jQuery对象
$.speed创建一个包含一组属性的对象用来定义自定义动画
$.htmlPrefilter()通过jQuery操作方法修改和过滤HTML字符串
$.readyException()处理包裹在jQuery()中函数同步抛出的错误
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值