• 笔记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);
  • 相关阅读:
    为什么叫做重叠端口?
    为什么叫做重叠端口?
    拷贝构造函数的参数为什么必须使用引用类型
    拷贝构造函数的参数为什么必须使用引用类型
    2018 网易校招题目
    似友非友?
    贫穷与富有
    (OK) Android
    Android
    (OK) Android
  • 原文地址:https://www.cnblogs.com/xiaoaiying/p/13344010.html
Copyright © 2020-2023  润新知