jQuery笔记第二天

其他静态方法

• isWindow()；

​ 作用：判断传入的对象是不是window对象

​ 返回值：true/false

• isArray()

​ 作用：判断传入的对象是不是真数组

​ 返回值：true/false

• isFunction();

​ 作用：判断传入的对象是不是函数

​ 返回值：true/false

• jQuery本质上是一个立即执行函数

• $.holdReady(true);

  ​ 作用暂停ready执行

选择器

:empty作用：找到既没有文本也没有子元素的指定元素

:parent作用：照当没有文本内容或有子元素的指定元素

：contains(text)作用：找到包含指定文本内容的指定元素

:has(selector):作用：找到指定子元素的指定元素

属性节点‘

			1什么是属性
				对象身上保存的变量就是属性
			2.如何操作属性
	
				对象.属性名称=值
				对象.属性名称；
				
				2.
				对象["属性名称"]=属性值；
				对象["属性名称"]
			3.什么是属性节点
				在编写html代码是在html标签中添加的属性
				在浏览器中找到dom元素后展开看到的都是属性
				在attributes属性中的所有内容都是属性节点
			
			4.如何操作属性节点
					span.setAttribute("name","lnj");
					DOM元素.setAttribute("属性名称","值");
					DOM元素.getAttribute("属性名称");
			5.属性和属性节点有什么不同
					任何对象都有属性，只有dom对象才有属性节点
			*/

对节点的操作

1.attr(name|pro|key,val|fn)
作用：获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果穿第一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值

	注意点：
	如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
	如果是设置：找到多个元素就会设置多少个元素
	如果设置的节点不存在系统会新增
	
	2.removeAttr（name)
	删除属性节点

​
​ 注意点：
​ 会删除所有找到的元素指定的节点

prop方法

1.prop方法
	特点和attr方法一致
	2.removeProp方法
	特点和removeattr方法一致

注意点：
prop方法不仅能操作属性还能操作属性节点

在具有true和false两个属性的属性节点时用prop其他用attr

对类的操作

	1.addClass([class|fn])
	添加类 多个用空格隔开
	2.removeClass([class|fn])
	删除类 多个空格隔开
	3.toggleClass([class|fn[,sw]])
	有就添加没有就删除

对文本的操作

	1.html([val|fn])
	和js中的innerHTML一样
	2.text([val|fn])
	和js中innerText一样
	3.val([val|fn|arr])

设置css样式

	/1.逐个设置
	$("div").css("width","100px"); 
	$("div").css("height","100px");
	$("div").css("background","red");
	   
	   //2.链式设置
	   	$("div").css("width","100px").css("height","100px").css("background","red");
	   
	   //3.批量设置
	   $("div").css({
		   width:"100px";
		   height:"100px";
		   background:"red"
	   })
	   
	   //4.获取
	 console.log($("div").css("width")) ;
	   });

操作位置的方法

offse([coordinates])
//作用：获取元素距离窗口的偏移位
console.log( $(".son").offset().left) Position() //获取元素距离定位元素的偏移位 //Position()只能获取不能设置 console.log($(".son").Position().left)
}

滚动

scrollTop()方法可以获取滚动的偏移位

		}
</style>
<script>
$(function(){
    //编写jQuery代码
	
	var btns=document.getElementsByTagName("button");
	//监听获取
	btns[0].onclick=function(){
		//获取滚动的偏移位
	console.log($(".scroll").scrollTop()); 
	//获取网页的偏移位
		console.log($("html").scrollTop()+$(".body").scrollTop()); 
	}
	btns[1].onclick=function(){
		//设置滚动的偏移位
		$(".scroll").scrollTop(300);
		
		//设置网页的偏移位
		$("html,body").scrollTop(300);
	}
});

​
​
​

​

​ 我是div我是div我是div我是div我是div我是div我是div我是div我是div ​ 我是div ​ 我是div我是div ​ 我是div ​ 我是div ​ 我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div ​ 我是div我是div我是div我是div我是div ​ 我是div我是div我是div我是div ​ 我是div我是div我是div我是div ​ ​

​ 获取 ​ 设置

事件

两种绑定事件

jQuery中有两种绑定时间的方式
1.eventName(fn);
编码效率略高/部分事件jQuery没有实现，不能添加
2.on(eventName,fn);
编码效率略低/所以js事件都能添加

	注意点：
	可以添加多个相同或者不同的事件不会覆盖

	注意点：
	可以添加多个相同或者不同的事件不会覆盖
	
	*/
   $("button").click(function(){
	   alert("hello lnj");
	   
   });
   $("button").click(function(){
   		   alert("hello 123");
   		   
   });
   $("button").onmouseleave(function(){
   		   alert("onmouseleave lnj");
   		   
   });
   $("button").onmouseenter(function(){
   		   alert("onmouseenter lnj");
   		   
   });
   
   // $(button).on("click".function(){
	  //  alert('hello lnj2');

​
​
​ // });
​ });

​
​
​

​ 我是一个按钮

解绑事件

/off方法是解绑事件
//off方法如果不传参那种会移除所有事件
$(“button”).off();
//传一个参数会移除这一类型的参数
$(“button”).off(“click”);
//如果传两个会移除这一类型的这一参数
$(“button”).off(“click”，text1);

	}
	function text2(){
			   alert("hello 123");
			   
	}
	
	$("button").click(text1);
	$("button").click(text2);
	$("button").onmouseleave(function(){
			   alert("onmouseleave lnj");
			   
	});
	$("button").onmouseenter(function(){
			   alert("onmouseenter lnj");
			   
	});

//off方法是解绑事件
//off方法如果不传参那种会移除所有事件
$(“button”).off();
//传一个参数会移除这一类型的参数
$(“button”).off(“click”);
//如果传两个会移除这一类型的这一参数
$(“button”).off(“click”，text1);

</script>     

我是一个按钮

事件冒泡和默认行为

1.什么是事件冒泡
	2.如何阻止事件冒泡
	在子元素中写
		return false;
		event.stopPropagation();
	3.什么是默认行为
	4.如何阻止默认行为
	return false;
	event.preventDefault();

	*{
		margin: 0;
		padding: 0;
		
	}
	.father{
		width: 200px;
		height: 200px;
		background-color: red;
		
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: blue;
	}
</style>
<script>
$(function(){
    //编写jQuery代码
	/*
	1.什么是事件冒泡
	2.如何阻止事件冒泡
	在子元素中写
		return false;
		event.stopPropagation();
	3.什么是默认行为
	4.如何阻止默认行为
	return false;
	event.preventDefault();

​
​ // */
​ // $(".son").click(function( event){
​ // alert(“son”);
​ // // return false;
​ // event.stopPropagation();
​ // });
​ // $(".father").click(function(){
​ // alert(“father”);
​ // })
​
​ $(“a”).click(function(event){
​ alert(“弹出注册框”);
​ // return false;
​ event.preventDefault();
​ })

​
​ });

​
​
​

​

​

​

​ 我是百度 ​ ​ ​ ​ ​

事件自动触发

• trigger()方法
  • trigger()方法会触发事件冒泡
  • trigger()会触发默认行为
• triggerHandler（）方法
  • triggerHandler（）自动触发事件不会触发事件冒泡
  • triggerHandler（）不会触发默认行为

注意：
对于a标签来讲如果想要触发默认行为需要在a里边套一个span给span绑定事件监听span

	*{
		margin: 0;
		padding: 0;
		
	}
	.father{
		width: 200px;
		height: 200px;
		background-color: red;
		
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: blue;
	}
</style>
<script>
$(function(){
    //编写jQuery代码
	/*
	1.什么是事件冒泡
	2.如何阻止事件冒泡
	在子元素中写
		return false;
		event.stopPropagation();
	3.什么是默认行为
	4.如何阻止默认行为
	return false;
	event.preventDefault();

​
​ // */
​ $(".son").click(function( event){
​ alert(“son”);
​
​ });
​ $(".father").click(function(){
​ alert(“father”);
​ })
​

		// $(".father").trigger("click");
		// $(".father").triggerHandler("click");
		
		/*
		trigger()方法会触发事件冒泡
		
		*/
		// $(".son").trigger("click");
		
		/*
		triggerHandler（）自动触发事件不会触发事件冒泡
		*/
		// $(".son").triggerHandler("click");
		
		$("input[type='submit']").click(function(){
			alert("submit");
		})
		/**
		 * trigger()会触发默认行为
		 * 
		 * 
		 * */
		// $("input[type='submit']").trigger("click");
		/*
		triggerHandler（）不会触发默认行为
		*/
	// $("input[type='submit']").triggerHandler("click");

/*注意：
对于a标签来讲如果想要触发默认行为需要在a里边套一个span给span绑定事件监听span

*/
$(“span”).click(function(){
alert(“a”);
})

// $("a").triggerHandler("click");
$("span").trigger("click");
  
});

​
​
​

​

​

​

​ 我是百度 ​ ​ ​ ​ ​

自定义事件

自定义事件的条件
1.时间必须是通过on绑定的
2.事件通过trigger（）来触发

	*{
		margin: 0;
		padding: 0;
		
	}
	.father{
		width: 200px;
		height: 200px;
		background-color: red;
		
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: blue;
	}
</style>
<script>
$(function(){
  
			// $(".son").myClick(function( event){
			// 	alert("son");

			// });
			/*
			自定义事件的条件
			1.时间必须是通过on绑定的
			2.事件通过trigger（）来触发 

​
​ */
​ $(".son").on(“myClick”,function(event){
​ alert(“son”);});

​
​ $(".son").trigger(“myClick”);
​
​ });

​
​
​

​

​

​

​ 我是百度 ​ ​ ​ ​ ​

事件命名空间

事件命名空间只能是on添加的才可以设置

然后通过trigger（）事件触发

		}

		.father {
			width: 200px;
			height: 200px;
			background-color: red;

		}

		.son {
			width: 100px;
			height: 100px;
			background-color: blue;
		}
	</style>
	<script>
		$(function(){

​
​ /*
​ 事件命名空间只能是on添加的才可以设置
​ 然后通过trigger事件触发
​ */
​
​ $(".son").on(“click.zs”,function(event){
​ alert(“Click1”);
​

				});
			
		$(".son").on("click.ls",function(event){
			alert("Click2")
			;
			
			}); 	
			
			$(".son").trigger("click.ls");

​
​ });

​
​
​
​
​
​

​

​

​ 我是百度
​
​
​
​
​
​

事件委托

/*
1.什么是事件委托
请别人帮忙做事情，然后将做完的结构反馈给我们

在jQuery中，如果通过核心函数找到的元素不止一个那么在添加事件的时候jQuery会遍历所有找到的元素，给所有找到的元素添加事件

//delegate（）方法做事件委托

​
​ */
​ $(“botton”).click(function(){
​ $(“ul”).append(“

我是新增的li

”);
​ })
​ });
​

/*
在jQuery中，如果通过核心函数找到的元素不止一个那么在添加事件的时候jQuery会遍历所有找到的元素，给所有找到的元素添加事件

​
​ */
​

// $("ul>li").click(function(){
// 	console.log((this).html());
// })
//delegate（）方法做事件委托
$("ul").delegate("li","click",function(){
		console.log((this).html());
})
</script>     

• 第一个
• 第二个
• 第三个

新增一个li