ready函数 jQuery筛选 事件代理(委托)

---

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)
		})

---