Jquery知识点记录

语法
操作HTML元素
$(selector).action();
$("#choose").hide();

文档就绪事件:等DOM结构加载完成后就执行jQuery代码。一个页面可以写多个ready()。【window.onload一个页面只可以写一个,要等到所有的内容包括图片加载完毕才可以执行onload(),不能简写】
$(document).ready(function(){

})
简写:
$(funtion() {…});

注意,若是需要在JS或者图片都加载完毕才能进行操作的话,建议用window.onload。

选择器
$(“p”) //元素选择器
$("#txt") //ID选择器
$(this) //获取当前HTML元素
$(“p:first”) //选取第一个p元素
$("[href]") //选取带href属性的元素
$(“ul li:first-child”) //选取每个<ul> 元素的第一个 <li> 元素
$(“ul li:first”) //选取第一个 <ul> 元素的第一个 <li> 元素

事件
在这里插入图片描述
hover触发mouseenter和mouseleave方法

$("p").hover(
    function(){ alert("进入了p")},
    function(){  alert("离开了p")};
);

隐藏显示
----hide()、show()、toggle()切换hide和show方法
----fadeIn()淡入,fadeOut()淡出、fadeToggle()、fadeTo()渐变效果(0-1)
动画
animate()
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

    $("button").click(function(){
 		 $("div").animate({
  			  left:'250px',
   			  opacity:'0.5',
   			 height:'150px',
    		width:'150px'
  });
});

animate()属性名用驼峰命名法,paddingLeft、marginRight.

清除动画
$(selector).stop(stopAll, goToEnd);
stop():当有多个动画时,stop用于停止当前正在进行的动画。
stopAll为true时会 停止所有的动画。默认值是false。
GoToEnd: 是否立即完成当前动画,默认是false。

jQuery链
在一个元素上链接多个动作
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

添加元素
append(): 在被选元素结尾插入内容
prepend():在被选元素开头插入内容,都是在元素内部嵌入
after()、before()在元素外面追加

jQuery获取元素的盒子尺寸
width() /height()返回或者设置元素的内容盒子的宽/高,不包括内边距、边框或外边距
innerWidth().innerHeight()返回或设置元素包括内边距的宽/高。
outerWidth()/outerHeight()返回或设置元素包括内边距和边框的宽/高。
outerWidth(true)/outerHeight(true)返回或设置元素包括内边距、边框、外边距(如果有的话)的宽/高。
遍历
parent():返回被选元素的直接父元素,无参数
parents():返回被选元素的所有祖先元素,一直到根元素,无参数
parentsUtil():返回在两个给定元素之间的所有祖先元素,有参数。
若是选择器和参数为同一个,会变成返回该元素的所有祖先元素。
若是选择器是参数的父元素,那么返回的是选择器的所有祖先元素
若是选择器是参数的子元素,那么会返回选择器的在参数元素以内的父元素。结果不会包含参数元素。

$(document).ready(function() {
	$('span').parentsUtil('div');  //返回在span和div之间的所有祖先元素
})

遍历后代
children():返回被选元素的所有直接子元素(不包括子孙元素),参数如果存在则有点条件筛选的意思。
find():返回被选元素的所有子元素包括子孙元素。

遍历兄弟元素
siblings():被选元素的所有同胞元素。不包括同胞元素中的子元素
next():被选元素的下一个相邻同胞元素。没有参数
nextAll():被选元素的所有跟随同胞元素,往下找。没有参数
nextUtil():给定两个被选元素之间的同胞元素。有参数
若是选择器元素在参数之前,返回两者之间的同胞元素。
若是选择器在参数元素之后,则会返回选择器的相邻下代同胞元素
prev(),prevAll(),prevUtil(),与上述类似,但是是向前查找

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值