jQuery

直接操作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

原文地址:https://www.cnblogs.com/LinChengcheng/p/10677928.html