[JQuery] 中常用的属性和方法
只有原生js中才有this,不管this代表谁跟定是个原生对象
1.回调参数集合
function f1(a){console.log("f1:"+a)}
function f2(a,b){console.log("f2:"+a+b)}
f1(1);
f2(1,1);
var $call=$.Callbacks(); 回调参数集合
console.log($call);
$call(f1,f2) add表示向回调函数集合中增加方法名
$call.fire(1,2) fire表示去依次执行里面的函数,可以传参数,函数执行的时候回自动获取想要的参数
$call.fire(1);
$call.remove(f1);删除回调函数集合中的方法
console.log($call.has(f1)); ->false
has判断回调函数集合中有没有这个函数
$call.empty(); 表示清空里面的函数
2.属性
attr()
⬆️获取或者是设置属性 一般都是自定义属性,会显示在html标签上
一个参数是获取
两个参数是设置
也可以批量设置第二个参数是对象{}
$("#box").attr("p","p")
$("#box").attr({a:"p",b:"b"})
removeAttr() ->移除属性
$("#box").removeAttr("a");
$("#box").removeAttr("a b c") ->批量删除
prop 获取\设置属性(一般是天生自带的内置属性)如果设置的是内置属性 就会显示在html结构上,如果是自定义属性则不会显示
class
addClass增加/removeClass删除/toggleClass有就删除没有就增加
$("#box").addClass("box1 box2 box");
关于JQ中遍历的方法
each() 遍历JQ元素集合的方法(和数组中forEach很像)
参数是一个函数,这个函数默认执行的时候传了2各参数 第一个参数是索引,第二个参数是当前的那一项而且是个原生对象
$("#oUl>li").each(function(index,item){
这里的this就是item
$(this).addClass("JQ");
item原生对象
给每个li增加一个class名"JQ"
item.className+=" JQ"
})
map -->跟each一样只是他有返回值
var $map=$("#Ulo>li").map(function(index,item){})
console.log($map.length);
css()样式的获取/设置,批量设置
$("#box").css("color","red")
$("#box").css({"color":"yellow","fontSize":"40px"})
5.offset() 当前元素距离body 的偏移量
$("#box").offset().left
$("#box").offset().top
scrollTop()/scrollLeft() 不传参数是获取 , 传了参数是修改
$("body").scrollTop(1000):
width()/height()不传参是获取,传参数是修改 没有单位
$("#oUl>li").height(50)
innerWidth()/innerHeight() 这个跟原生的client系列一样
不传参是获取传参是修改,修改的时候padding不变改宽高
outerWidth()/outerHeight() 相当于offset系列
不传参数是获取,传参数是修改(没有单位)修改的时候padding+border不改变宽高
注意outerWidth(true)/outerHeight(true),是获取并且加上margin
JQuery中强大的链式写法
JQuery中的方法都有返回值 返回的是个JQuery对象
$(".box1").css({width:100,height:100,backgroundColor:"red"})
文档处理
父级.append(新元素可以是原生的也可以是JQ对象)
var oDiv =document.createElement("div");
$(".box1").append(oDiv);
$(".box1").append($("#("#p1")"))
新元素.appendTo(父级)
$("#p1").appendTo($(".box"));
prepend/prependTo 加在当前元素的前面
$("ul").prepend($("#p1"));
after/before 家在当前元素的后面/前面
$(".box1").after($("#p1"))
$(".box").before($("#p1"))
JQ选择的元素.insertBefore(指定元素)
将JQ选择的元素添加到指定元素的前面
JQ选择出来的元素.insertAfter(指定元素)
将JQ选择出来的元素添加到指定元素的后面
replaceAll(选择器)
$(".box1").replaceAll("#p1") 将#p1替换成.box1
remove() 删除
$(".box1").remove():
$(".box1").remove(".box1") 把所有div中类名是box1的元素删掉
筛选
eq()/first()/last()
var $li=$("ul>li")
$li[0] 这是一个原生的元素
$li.eq(0) 此时就得到一个JQ对象
$li.first
$li.last;
同级过滤filter
$("ul>li").filter(".li1") ->在所有的li中找类名是li1的元素
子级过滤
$("ul").children(".li1") ->在ul下找类名为li1的孩子
后代过滤find()
$("ul").find(".li1") 在ul下找类名是li1的后代(子子孙孙)
DOM
parent
$(".box1").parent() ->一个父级元素
$(".box1").parents() ->父亲 父亲的父亲 父亲的父亲的父亲.......直到html
next()下一个弟弟
prev()上一个哥哥
nextAll()所有的弟弟
prevAll()所有的哥哥
siblings()所有的兄弟
