jQuery常用api

最新推荐文章于 2024-06-26 08:15:00 发布

2012踮脚张望的时光

最新推荐文章于 2024-06-26 08:15:00 发布

阅读量142

点赞数

分类专栏： web前端文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_41988337/article/details/104203340

版权

9 篇文章 0 订阅

订阅专栏

一，基本使用方式

1，写script标签引包

2，换一行写script标签写入口函数

3，入口函数里执行操作

二，jQuery和JavaScript的关系

1，jQuery是JavaScript的一个库是一个js文件

2，DOM对象和jQuery对象的联系

a，jQuery对象使用$("")从页面中获取到的对象就是jQuery对象

DOM对象使用document从页面中获得的对象就是DOM对象

一句话：jQuery方法获得是jQuery对象

js方法获得是DOM对象

b，jQuery对象和DOM对象的相互转化

jQuery对象转化为DOM对象：[0] .get(0)

DOM对象转化为jQuery对象：$(DOMObject)

注：DOM对象和jQuery对象的方法和属性是不能混合使用的，二者使用对方的方法之前必须要先进性转化

三，API

jQuery控制样式
方法	使用举例	效果
css( )	$(“div”).css(“width”) $(“div”).css(“width”,”100px”) $('div').css({'width':'200px','height':'200px','background-color':'blue'});	改变单个、多个样式返回样式值
addClass()	$('div').addClass(“current”)	添加类
removeClass()	$('div').removeClass(“current”)	移除类
toggleClass( )	$('div').toggleClass(“current”)	切换类
hasClass()	$('div').hasClass(“current”)	判断是否有类
attr()	$('div').attr(“class”,”current”)	修改标签属性

jQuery控制内容
html()	$('div').html() $('div').html(‘’) $('div').html(‘设置内容’)	控制元素内容
text()	$('div').text() $('div').text(‘设置文本内容’)	控制元素文本内容
val( )	$('div').val() $('div').val(‘设置文本内容’)	控制元素value属性内容

选择器
jQuery基本选择器
Id选择器	#	$("#box01")
标签选择器		$(“div”)
类选择器	.	$(".myClass")
通配符选择器	*	$("*")
并集选择器	,	$("div,spanp.myClass")
后代选择器	空格	$(‘.ul01 li’)
子代选择器	>	$(‘.ul01 .li02>li’)
弟弟选择器	+	$('.ul01 .li02+li')
弟妹选择器	~	$('.ul01 .li02~li')

过滤选择器
:first	$(‘div:first’)	过滤出第一个
:last	$(‘div:last’)	过滤出最后一个
:not( )	$('div:not(.div01)')	排除指定的元素
:eq( )	$(‘div:eq(x)’)	过滤出索引值等于x的
:gt( )	$(‘div:gt(x)’)	过滤出索引值大于x的
:lt( )	$(‘div:lt(x)’)	过滤出索引值小于x的

筛选选择器
.parent()	$(‘div’).parent()	选出当前元素的父亲元素
.children()	$(‘div’).children()	选出当前元素的子代元素
.siblings()	$(‘div’).siblings()	选出除了自己以外的所有同级元素
.find()	$(‘div’).find(“li”)	选出当前元素的后代元素中的li元素
.closeset()	$(‘div’).closeset(selector)	选出当前元素的第一个符合selector的祖先元素

jQuery动画
对角线动画	show( )	显示	$('div').show() $('div').show(1000)
	hide( )	隐藏	$('div').hide() $('div').hide(1000)
	toggle()	切换显示隐藏	$('div').toggle() $('div').toggle(1000)
滑入滑出动画	slideDown()	滑入	$('div').slideDown() $('div').slideDown(1000)
	slideUp()	滑出	$('div').slideUp() $('div').slideUp(1000)
	slideToggle()	切换滑入滑出	$('div').slideToggle() $('div').slideToggle(1000)
淡入淡出动画	fadeIn()	淡入	$('div').fadeIn() $('div').fadeIn(1000)
	fadeOut()	淡出	$('div').fadeOut() $('div').fadeOut(1000)
	fadeToggle()	切换淡入淡出	$('div').fadeToggle() $('div').fadeToggle(1000)
	fadeTo()	淡到	$('div').fadeTo(500,0.1);
自定义动画	animate()	自定义单个属性	$('div').animate({'background':'blue'},500)
自定义动画	animate()	自定义多个属性	$('div').animate({'left':'500px','top':'500px'},500)
动画排队	stop()	清楚当前元素上的动画	$('#box').stop()
延迟动画	delay( )	延迟动画	$('div').delay(1000 ).slideUp()

工具方法
each( )	$(“div”).each(function(index,element){ })	对每一个匹配到的元素，依次进行处理。（相当于进行了一个for循环）
scrollTop（）	$(window).scrollTop（）	函数可以获取滚动条滚动的垂直距离
offset（）	$(“div”).offset().top	获取匹配元素在当前窗口的相对偏移（到窗口顶部、左边的距离）此函数返回的是一个对象，包含有top、left属性
on( )	$(document).on('click','ul li a',function(){ })	未来元素添加事件