直接操作css属性
两个参数设置属性
$("p").css("font-size","24px");
一个参数获取属性值
$("p").css("font-szie");
一次设置多个属性
$("p").css({"border":"1px solid black","color":"blue"});
位置操作
不加参数获取位置参数
$(".c3").offset()
加参数设置位置
$(".c3").offset({top:200,left:100})
position只能获取值,不能设置值
scrollTop获取当前滚动条偏移量
$(window).scrollTop();
设置滚动条偏移量
$(window).scrollTop(0);
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
加参数为设置
文本操作
text(),html() 不加参数获取值,加参数设置
val() 不加参数获取值,加参数设置
属性操作
获取文本属性
获取值 $("#d1").attr("s1");
设置属性值
$("#d1").attr("s1","heh");
设置多个属性
$("#d1").attr({"num":50,"a":"bbb"});
删除属性
$("#d1").removeAttr("num");
获取check与radio标签的checked属性
$("#i1").prop("checked")
$("#i1").prop("checked",true)
文档处理
标签内部尾部追加元素
$("#d1").append(pEle);
$pEle.appendTo($("#d1"))
标签内部头部添加元素
$("#d1").prepend(pEle)
$pEle.prependTo($("#d1"))
标签外部下面添加元素
$(A).after(B)
$(A).insertAfter(B)
标签外部上面添加元素
$(A).before(B)
$(A).insertBefore(B)
替换标签
replaceWith()
replaceAll()
事件
hover事件
$("p").hover(写两个函数,第一个鼠标移进,第二个鼠标移出)
input实时监听
$("#i").on("input",方法)
focus/blue雷士
取消标签默认事件
return false 或 e.preventDefault();
阻止事件冒泡
e.stopPropagation()
事件委托
$(发起委托的标签).on(委托事件,委托人,事件)
文档加载
$(document).ready(function(){
//JS代码
})
$(function(){
//JS代码
})
jQuery自带动画效果
$("img").hide(5000)
$("img").show(5000)
$("img").slideDown(5000)
$("img").slideUp(5000)
$("img").fadeIn(5000)
$("img").fadeOut(5000)
$("img").fadeTo(5000,0.4)
each()
$.each(array,function(index){
console.log(index);
})
$.each(array,function(){
console.log(this);
})
$divEles.each(function(){
console.log(this);
})
data()
给所有div标签都保存一个名为k,值为100
$("div").data("k",100)
返回第一个div标签中保存的k值
$("div").data("k")
删除标签上存放的k值
$("div").removeData("k")
https://www.cnblogs.com/Dominic-Ji/p/10490669.html?tdsourcetag=s_pctim_aiomsg#autoid-18-0-0