JQ总结。

选择器
一:全选,id,类,标签选择器
// 所有元素
$("*").css(‘color’,‘red’);
// id选择器——一个页面中应当只有一个id值,如果有多个,只能选择集合中的第一个DOM元素,应避免这种情况
$("#id").css(“color”,‘red’);
// 类选择器
$(’.class’).css(‘color’,“red”);
// 标签选择器
$(“p”).css(“color”,“red”);
二:层次选择器
// > 只找他的子元素
$(‘div > p’).css(‘color’,‘red’);
找所有包含在里面的,包含子元素,孙元素等(后代选择器)
$(‘div p’).css(‘color’,‘red’);
// div的下一个兄弟如果是p,就选中,只有一个(相邻的兄弟元素)
$(‘div+p’).css(‘color’,‘red’);
// div同级的后面的所有p(一般的兄弟元素)
$(‘div~p’).css(‘color’,‘red’);
三:筛选
页面中所有class为demo1 和 demo2的元素
$(’.demo1, .demo2’).css(‘color’,‘red’);
页面中所有的p div span 元素
$(“p, span, div”).css(‘color’,‘red’);

所有p元素中的 偶数行,奇数行
$(“p:odd”).css(‘color’,‘red’);
$(“div:even”).css(‘color’,‘blue’);

页面中第一个和最后一个p标签
$(‘p:first’).css(‘color’,‘red’);
$(‘p:last’).css(“fontSize”,“30px”);

找出p元素的父元素的第一个子元素是不是p,如果是,就选中。
$(‘p:first-child’).css(‘color’,‘red’);
$(‘span:last-child’).css(‘color’,‘red’);

选中p的父亲的第一个p
$(‘p:first-of-type’).css(‘color’,‘red’);
$(‘p:last-of-type’).css(‘color’,‘red’);

p的父亲的第二个子元素,如果是p就选中,(第一个和第二个可能都不是p)
$(‘p:nth-child(2)’).css(‘color’,‘red’)
$(‘p:nth-last-child(2)’).css(‘color’,‘red’)

父亲的第二个p元素
$(‘p:nth-of-type(2)’).css(‘color’,“red”);
$(‘p:nth-last-of-type(2)’).css(‘color’,“red”);

如果这个p的父亲只有p这一个孩子,就选中它
$(‘p:only-child’).css(‘color’,‘red’);

如果这个a的父亲里只有这一个a标签,就选中它
$(‘a:only-of-type’).css(‘color’,‘red’);

index是3的li,下标是从0开始
$(“ul li:eq(3)”).css(‘color’,‘red’);
// li的index大于3的
$(‘ul li:gt(3)’).css(‘color’,‘red’);
li的index小于3的
$(‘ul li:lt(3)’).css(‘color’,‘red’);

选中所有的标题元素,h1-h6
$(":header").css(‘color’,“red”);
选中所有正在执行动画效果的元素
$(":animated");
eq(), lt(), gt() :分别代表等于,小于,大于
四 动画
show()显示目标元素
hide()隐藏目标元素
slideDown()通过使用滑动效果 显示目标元素
slideToggle()通过使用滑动效果 在显示和隐藏状态之间进行切换

animate() 用来改变css里面的样式,其改变的过程是一个渐变的过程 ,所以看起来是动画效果
animate(),()里面第一个参数 是要改变的属性和属性值 第二个参数 是改变的时间
例如:$(this).parent().animate({right:0},500)

attr()是以前的setAttribute和getAttribute的结合体
fadeIn():将隐藏的元素淡入

​ fadeIn();

​ fadeIn(“fast”) : fast,slow

​ fadeIn(3000): 给一个毫秒值

fadeOut():将已显示的元素淡出

​ 同上

fadeToggle:

​ 同上

fadeTo():

语法: $(selector).fadeTo(speed,opacity,callback);

speed:速度,毫秒值

opacity:透明度,1完全不透明(可见),0表示完全透明(不可见)

callback:动画执行完成后的回调
五 事件操作
目前,jQuery主要支持以下事件:

.blur() 表单元素失去焦点。
.change() 表单元素的值发生变化
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘(长时间按键,只返回一个事件)
.keypress() 按下键盘(长时间按键,将返回多个事件)
.keyup() 松开键盘
.load() 元素加载完毕
.mousedown() 按下鼠标
.mouseenter() 鼠标进入(进入子元素不触发)
.mouseleave() 鼠标离开(离开子元素不触发)
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开(离开子元素也触发)
.mouseover() 鼠标进入(进入子元素也触发)
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数,依次运行多个函数
.unload() 用户离开页面

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值