ready 函数
DOM节点加载完毕后,触发执行函数
$(document).ready(function(){
console.log($("div"))
})
缩写为
$(function(){}) 就是$(document).ready(function(){})
将需要操作DOM节点的代码放在ready函数中执行,可以保证操作的节点肯定加载出来了
jQuery筛选
$(function(){
// eq() 根据索引取出jq对象中对应的标签,返回jq对象
// 参数是索引,从0开始
$("ul>li").eq(1).css("color", "red")
// 参数填负值,倒着数,最后一个为-1
$("ul>li").eq(-1).css("color", "red")
// 伪类选择器
$("li:first").css('color',"blue")
// first() 找到符合前面选择器的第一个jquery对象
$("li").first().css("color", "yellow")
// get()函数根据索引取标签,返回是原生js标签对象
console.log($("li").get(0))
console.log($("li")[0])
// 原生js标签元素对象不能使用jq对象函数,可以转换一下
$($("li").get(0)).css("color","cyan")
// 过滤
var $li = $("li")
// filter() 过滤函数
console.log($li.filter(".cls").hasClass("cls"))
// filter() 自定义过滤条件
// 过滤函数,返回 true表示该标签符合条件,最后会将所有符合条件的标签放入jq对象返回
$li.filter(function(i, ele){
// i 索引 ele 原生js标签对象
console.log(i, ele)
if (i % 2 == 0){
return false
}else{
return true
}
// return i>0&&i<4
}).css({
color:"gray"
})
// map() 函数 返回jq对象,jq对象存储函数返回的结果
// 适用于做数据处理
var arr1 = $("li").map(function(i, ele){
//
return $(ele).text()
})
console.log(arr1.get().join("===="))
// has() 函数 返回包含span子标签元素的li标签,jq对象
$("li").has("span").css("color", "orange")
// not() 从前面选择器结果中,再进行一次筛选
$("li").not(".cls").css("color", "skyblue")
// children() 获取父级元素的子标签
console.log($("ul").children())
console.log($(".cls").children())
// slice() 切割标签
$("li").slice(1,3).css("color", "green")
// find() 一般用于大范围查找 性能更高
$("ul").find(".cls").css("font-size", "30px")
// next()下一个兄弟节点 nextAll()下面所有的兄弟节点 nextUntil()直到符合条件
console.log($(".cls").nextUntil("ul li:eq(-2)"))
// prev(), prevAll(),prevUntil()
// parent() 函数 获取父级标签
console.log($(".cls").parent())
// parents() 获取所有祖先标签
console.log($(".cls").parents())
// addBack() 结果中加上上一层选择器标签
console.log($(".cls").nextAll().addBack())
})
事件代理(委托)
虚拟DOM,不存在的DOM节点,给虚拟DOM添加了事件,DOM不存在,所以需要找一个委托对象,把事件先添加到委托对象,现在这个委托对象就是body,当DOM标签被加载出来时,body会自动将事件转交给DOM标签,这种添加事件的方式:事件委托(代理)
由body代理 当里面有div这个标签的时候归还给div样式 先保存着样式 直到有div这样的标签
$("body").on("click", "div", function(e){
console.log("事件触发了",e.target)
})