jQuery 常用方法
- 1.
$(".class")最常用的DOM获取 - 2.
$oDiv.attr([key],[vall])获取/设置属性- key是属性名，如果只传key表示获取此属性的属性值
- vall是属性值，如果传两个变量表示改变key的属性值
- 如果$oDiv对象里面有多个DOM 获取的时候只能获取到第一个DOM的属性值，设置的时候所以的DOM都能被设置
- 3.
$oDiv.data([key],[val])- 如果只传key，获取$oDiv里面的data-[key]属性值
- 如果key val 都传，就是设置$oDiv中的[key] = [val]，而不是data-[key]属性
- 4.
class$oDiv.addClass([val]);添加一个class为val$oDiv.removeClass([val]);删除一个class为val$oDiv.hasClass([val]);检测一个class是否有val 如果$oDiv里面有多个DOM 只判断第一个$oDiv.toggleClass([val]);判断$oDiv有没有class [val] ，有就删除，没有就添加
- 5.
$oDiv.html([val])- [val] 有值就是设置$oDiv 的innHtml
- 没有就是获取$oDiv的html
- 6.
$input.val([val])- [val] 有值就是设置$input的value
- 没有[val]值就是获取$input的value
$input.val(function (index,text) {//index是当前input的索引 text是input中value值 console.log(index, text); return index+text; })复制代码 - 7
$Dom.offset()- 返回一个对象{top:val, left:val }分别是距离body的偏移量
- 8
$Dom.position()- 返回一个对象{top:val, left:val }分别是距离父级的偏移量
- 9
$oDiv.css(name|pre[,val|fn])- 传参两种方式，一种是两个字符串，第一个是key，第二个是value
- 第二种是传对象，对象里面的key/value就是css属性的key/value
- [value]可以说是一个参数有两个参数[index,key]，jQuery集合有多少项就执行多少次，参数分别是当前DOM在集合的索引和当前DOM css属性value值（未修改之前的值）
let $oDiv = $(".hello"); $oDiv.css("color","red"); $oDiv.css("background","pink"); $oDiv.css({marginTop:"20px", color:"red", height:function (index,text) { console.log(index, text); return 300; }, background:"black"} )复制代码 -
10
$oDiv.width([val]) $oDiv.height([val])- 不传val就是获取宽/高
- 传val就是设置宽/高
- 和
$oDiv.css()获取的宽高的区别，css获取的宽高带单位的字符串 - width/height获取的是不带单位的number类型
-
11
on/off事件- jQuery两种绑定事件的方式
- $oDiv.[event] (fn)
- $oDiv.on([event],fn) 都可以绑定多次，一般用第二种
$oDiv.click(function (){ alert(1);})$oDiv.on("click",function (){ alert(1);})复制代码 $oDiv.off([event], [name])- 两个参数都有：解除event事件的name方法
- 如果name参数为空，解除event事件的所有方法
- 如果两个参数都没有，解除当前DOM绑定的所有事件
let $oDiv = $(".hello"); function fn() { alert(1); } $oDiv.on("click", fn); $oDiv.on("click", fn); $oDiv.on("click", fn); setTimeout(function () { console.log(1); $oDiv.off("click", fn) }, 5000);复制代码 -
$(this).index()
$focusLis.on('mouseenter', function () { console.log($(this).index()) // 获取当前DOM在 所有兄弟元素 里面的索引 })复制代码