笔记2:JQuery

一、基础

1--jquery-xxx.js 与 jquery-xxx.min.js区别:
	1、jquery-xxx.js		开发版本。给程序员看的,有良好的缩进和注释。体积大一些
	2、jquery-xxx.min.js	生产版本。程序中使用,没有缩进。体积小一些。程序加载更快


2--jq对象和js对象转换
	1、jq -- > js		jq对象[索引] 或者 jq对象.get(索引)
   	2、js -- > jq 		$(js对象)

3--入口函数
	 $(function () {
       
	 });
	 

4--选择器  作用:获取元素对象  用法:$(选择器类型)
	1、基本选择器
		1. 标签选择器(元素选择器) 语法: $("html标签名") 获得所有匹配标签名称的元素
		2. id选择器   				语法: $("#id的属性值") 获得与指定id属性值匹配的元素
		3. 类选择器					语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
		4. 并集选择器:				语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素
	2、 层级选择器
		1. 后代选择器				语法: $("A B ") 选择A元素内部的所有B元素		
		2. 子选择器					语法: $("A > B") 选择A元素内部的所有B子元素
	3、属性选择器
		1. 属性名称选择器  			语法: $("A[属性名]") 包含指定属性的选择器
		2. 属性选择器				语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
		3. 复合属性选择器                        语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器
	4、.过滤选择器
		1. 首元素选择器 			        语法: $(标签名:first)   获得选择的元素中的第一个元素
		2. 尾元素选择器 			        语法: :last 获得选择的元素中的最后一个元素
		3. 非元素选择器				语法: :not(selector) 不包括指定内容的元素
		4. 偶数选择器				语法: :even 偶数,从 0 开始计数
		5. 奇数选择器				语法: :odd 奇数,从 0 开始计数
		6. 等于索引选择器                        语法: :eq(index) 指定索引元素
		7. 大于索引选择器 			语法: :gt(index) 大于指定索引元素
		8. 小于索引选择器 			语法: :lt(index) 小于指定索引元素
		9. 标题选择器				语法: :header 获得标题(h1~h6)元素,固定写法
	5. 表单过滤选择器
		1. 可用元素选择器 			语法: :enabled 获得可用元素
		2. 不可用元素选择器 		        语法: :disabled 获得不可用元素
		3. 选中选择器 				语法: :checked 获得单选/复选框选中的元素
		4. 选中选择器 				语法: :selected 获得下拉框选中的元素
			

5--DOM操作
	---内容操作
		1. jq对象.html() 		        获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
		2. text() 				获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
		3. val() 				获取/设置元素的value属性值
		
	---属性操作
		----通用属性操作
			jq对象.attr("属性","值")     获取/设置元素的属性
			jq对象.removeAttr("属性")    删除属性
			prop()                      获取/设置元素的属性
			removeProp()                删除属性
			说明:attr和prop区别?
				1. 如果操作的是元素的固有属性,则建议使用prop
				2. 如果操作的是元素自定义的属性,则建议使用attr
		----对class属性操作
			jq对象.addClass("值")        添加class属性值
			jq对象.removeClass("值")     删除class属性值
			jq对象.toggleClass("one")    如果元素对象上存在class="one",则将属性值one删除掉。  如果元素对象上不存在class="one",则添加
			jq对象.css("属性","值")      修改对象的css样式
			jq对象.css("属性")           获取css属性值
	
	---CRUD操作: 		用法:jq对象1.方法(jq对象2)
		1--插入对象到对象内(父子)外(兄弟):
			jq对象2到jq对象1中
				------父子关系
				jq对象1.append(jq对象2)
				prepend()
				------兄弟关系
				after()
				before()
			jq对象1到jq对象2中
				------父子关系
				appendTo():
				prependTo():
				------兄弟关系
				insertAfter()
				insertBefore()

		2--其他方法
			对象.remove()	移除元素				
			对象.empty()	清空元素的所有后代元素
			对象.clone()	克隆元素并保留原来的

二、高级

1--动画
	参数:
		1----speed:动画的速度。三个预定义的值或毫秒数
			slow
			normal
			fast
			或表示动画时长的毫秒数值(如:1000)
		2----easing:用来指定切换效果,默认是"swing",可用参数"linear"
			swing	动画执行时效果是 先慢,中间快,最后又慢
			linear	动画执行时速度是匀速的
		3----fn:在动 画完成时执行的函数
	---默认方式
		----jq对象.show([speed,[easing],[fn]])		显示
		----jq对象.hide([speed,[easing],[fn]])		隐藏
		----jq对象.toggle([speed],[easing],[fn])        切换
	---滑动方式
		----slideDown([speed],[easing],[fn])
		----slideUp([speed,[easing],[fn]])
		----slideToggle([speed],[easing],[fn])
	---淡入淡出方式
		----fadeIn([speed],[easing],[fn])
		----fadeOut([speed],[easing],[fn])
		----fadeToggle([speed,[easing],[fn]])


2--遍历
	---js的遍历方式
		* for(初始化值;循环结束条件;步长)
	---jq的遍历方式
		回调函数返回值:
			true:如果当前function返回为false,则结束循环(break)。
			false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
		----jq对象.each(callback)
				jquery对象.each(function(index,element){});
					* index			就是元素在集合中的索引
					* element		就是集合中的每一个元素对象
					* this			集合中的每一个元素对象
		----$.each(object, [callback])
		----for..of: jquery 3.0 版本之后提供的方式		用法:for(元素对象 of 容器对象)


3--事件绑定
	---jq对象.方法名(回调函数);
		注释:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
		例子: 表单对象.submit();//让表单提交
		----click()			单击事件
		----mouseover()		鼠标事件
		----mouseout()		鼠标事件
		----focus()			获取焦点
		----submit()		表单提交
		链式编程:jq对象.方法1(回调函数).方法2(回调函数)		例子:$("#lizi").mouseover(function(){alert("鼠标来了")}).mouseover(function(){alert("鼠标走了")});
	
	---on绑定事件/off解除绑定
		jq对象.on("事件名称",回调函数)		例子:$("#lizi").on("click",function(){alert("on方法执行了")});
		jq对象.off("事件名称")
			* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
	
	---jq对象.toggle(fn1,fn2...):当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... 最后一个fn执行完后再点击会返回到第一个fn
		说明:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
			<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script> <!--引入插件-->


4--插件:增强JQuery的功能
	1. $.fn.extend(object)  增强通过Jquery获取的对象的功能 	增强$("#id")这个对象功能
		<script type="text/javascript">
			//定义jquery对象插件
			$.fn.extend({
				//定义的方法,所有的jq对象都可以调用该方法
				check:function(){
					//让复选框选中
					//this 调用该方法的jq对象
					this.prop("checked",true);
				},
				uncheck:function(){
					//让复选框不选中
					this.prop("checked",false);
				}
				
			});
			$(function(){
				//获取按钮
				$("#btn-check").click(function(){
					//获取复选框对象
					$("input[type='checkbox']").check();
				});
				$("#btn-uncheck").click(function(){
					//获取复选框对象
					$("input[type='checkbox']").uncheck();
				});
			});
		</script>
	
	2. $.extend(object) 	增强JQeury对象自身的功能  		增强$/jQuery这个自身对象功能
		$.extend({
			max:function (a,b) {
				//返回两数中的较大值
				return a >= b ? a:b;
			},
			min:function (a,b) {
				//返回两数中的较小值
				return a <= b ? a:b;
			}
		});
		//调用全局方法
		var max = $.max(4,3);
		//alert(max);
		var min = $.min(1,2);
		alert(min);
posted @ 2020-07-20 11:12  小艾影  阅读(114)  评论(0编辑  收藏  举报