jQuery
2019-03-06 15:31:11 0 举报AI智能生成
jQuery
作者其他创作
大纲/内容
事件操作
常用事件
click（）
鼠标单击
mouseout（）
鼠标离开
mouseover（）
鼠标进入
sumbit（）
表单提交
blur（）
元素失去焦点
focus（）
元素获得焦点
hover(function(){},function(){})
鼠标持久悬放(函数1写鼠标移入的代码，函数2写鼠标移出的代码)
事件绑定
方式一：元素.事件名(function(){})
方式一：元素.事件名(function(){})
方式二：元素.on("事件名"，function(){})
获取当前触发事件元素
$(this)
事件冒泡
子元素的事件触发，会导致父元素的同一类事件被触发。这种现象，可以称之为“事件冒泡”
阻止方法： event.stopPropagation()
事件委托
$("父级元素的选择器").on("事件类型","事件发生源的css选择器",function(){
// 针对事件发生的子元素的统一操作
});
// 针对事件发生的子元素的统一操作
});
阻止事件行为
return false
动画
关键字：animate（）
参数一：要改变的样式属性值，写成对象的形式
参数二：动画持续的时间，单位为毫秒，一般不写单位
参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
参数四：动画回调函数，动画完成后执行的匿名函数
预设动画
对角线动画
$("div").show(400)
显示
$("div").hide(400)
隐藏
$("div").toggle(400)
在隐藏和显示之间进行切换
滑动动画
$("div").slideDown(400)
向下滑动
$("div").slideUp(400)
向上滑动
$("div").slideToggle(400)
上下滑动之间进行切换
透明度动画
$("div").fadeIn(400)
淡入
$("div").fadeOut(400)
淡出
$("div").fadeToggle(400)
淡入和淡出之间进行切换
$("div").fadeTo(400,0.5)
设置元素变化指定透明度
排队机制
在频繁触发动画效果的时候，jQ会自动记录触发的总次数，直到把所有动画执行完毕为止。
解决方法：在动画函数前面加.stop()
DOM操作
创建标签
let div2 = $('<div>这是一个div元素</div>')
删除标签
$('#div1').remove()
插入元素
添加子元素
appendTo()
在现存元素的内部，从后面放入元素
prependTo()
在现存元素的内部，从前面放入元素
添加兄弟元素
insertAfter()
在现存元素的外部，从后面放入元素
insertBefore()
在现存元素的外部，从前面放入元素
获取元素标签
选择器类型
1.id选择器
$("#id")
2. 类选择器
$(".class")
3.层级选择器
$("ul li")
4. 群组选择器
$("h1,div")
选择器筛选
$('div').has('p');
选择包含p元素的所有div元素
$('div').not('.myClass')
选择class不等于myClass的所有div元素
$('div').eq(5)
选择所有div元素中下标为5的div元素
选择器关系
同级关系
prev（）# 前面紧挨的同辈元素
prevAll（） 元素之前所有的同辈元素
next（） 元素后面紧挨的同辈元素
nextAll（） 元素后面所有的同辈元素
silsiblings（） 元素的同级元素
嵌套关系
children（） 元素的所有子元素
parent（） 元素的父元素
parents（） 元素的所有父元素
find（）
html元素内容
获取 html（）内容
$('#div1').html();
设置元素的html内容
$('#div1').html('<span>添加文字</span>')
表单元素
获取表单元素的值
$('#input1').val()
设置表单元素的值
$('#input1').val('admin')
操作元素属性
获取元素属性
$("#img1").attr("src")
$("#fav").prop("checked") 建议使用这个
设置元素的属性值
$('#img1').attr("src","test.jpg")
$('#img1').prop({"src": "test.jpg", "alt": "Test Image" })
操作css样式
获取css样式
$("div").css("width")
设置css样式
$("div").css({"font-size":"30px","color":"red"})
操作类名
$("#div1").addClass("divClass2")
追加单个
$("#div1").removeClass("divClass")
移除单个
$("#div1").removeClass("divClass divClass2")
移除多个
$("#div1").toggleClass("anotherClass")
切换样式名
链式编程
var 对象 = {
方法名:function(){
// .....
return this; // 实现链式编程的核心
}
}
方法名:function(){
// .....
return this; // 实现链式编程的核心
}
}
0 条评论
下一页
