Jquery框架

JQuery基础

1. 概念：JavaScript框架。

2. 快速入门

    1. 下载JQuery
    2. 导入JQuery的js文件：导入min.js文件
    3. 使用
   

3. JQuery对象和JS对象区别与转换

    1. JQuery对象在操作时，更加方便
    2. JQuery对象和js对象方法不通用
    3. 两者相互转换
    	* jq --> js：jq对象[索引]	或者		jq对象.get(索引)
    	* js --> jq：$(JS对象)
   

4. 选择器

    1. 基本操作学习
    	* 事件绑定
    		//1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });
   
    	* 入口函数
    		 $(function () {
               
   			 });
    		 window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                 * $(function)可以定义多次的
   
    	* 样式控制
    		$("#div1").css("background-color","red");
   
    2. 分类
    	* 基本选择器
    		1. 标签选择器（元素选择器）
    			* $("html标签名") 获得所有匹配标签名称的元素
    		2. id选择器
    			* $("#id值") 获得与指定id属性值匹配的元素
    		3. 类选择器
    			* $(".class值") 获得与指定的class属性值匹配的元素
    		4. 并集选择器
    			* $("选择器1，选择器2...") 获取多个选择器选中的所有元素
   
    	* 层级选择器
    		1. 后代选择器
    			* $("A B") 选择A元素内部的所有B元素
    		2. 子选择器
    			* $("A > B") 选择A元素内部的子元素中的B元素
   
    	* 属性选择器
    		1. 属性名称选择器
    			* $("A[属性名]")	包含指定属性的选择器
    		2. 属性选择器
    			* $("A[ 属性名 = '值' ]") 包含指定属性等于指定值的选择器
    		3. 复合属性选择器
    			* $("A[ 属性名 = '值' ] [属性名 = '值' ]...") 
   
    	* 过滤选择器
    		1. 首元素选择器
    			* :first	获得选择的元素中的第一个元素
    		2. 尾元素选择器
    			* :last 获得选择的元素中的最后一个元素
    		3. 非元素选择器
    			* :not(selector) 不包括指定内容的元素
    		4. 偶数选择器
    			* :even 偶数
    		5. 奇数选择器
    			* ::odd 奇数
    		6. 等于索引选择器
    			* :eq(index) 指定索引元素
    		7. 大于索引选择器
    			* ::gt(index) 大于指定索引元素
    		8. 小于索引选择器
    			* :lt(index) 小于指定索引元素
    		9. 标题选择器
    			* :header 获得标题（h1~h6）元素，固定写法
   
    	* 表单过滤选择器
    		1. 可用元素选择器
    			* :enabled 获得可用元素
    		2. 不可用元素选择器
    			* :disabled 获得不可用元素
    		3. 选中选择器
    			* :checked 获得单选/复选框选中的元素
    		4. 选中选择器
    			* :selected 获得下拉框选中的元素
   

5. DOM操作

    1. 内容操作
    	* html()：获取/设置元素的标签体内容
    	* text()：获取/设置元素的标签体纯文本内容
    	* val()：获取/设置元素的value属性值
   
    2. 属性操作
    	* 通用属性操作
    		1. attr()：获取/设置元素的属性
    		2. removeAttr()：删除属性
    		3. prop()：获取/设置元素的属性
    		4. removeProp()：删除属性
    		* attr和prop区别：推荐prop操作固有属性，attr操作自定义属性
    		
    	* 特殊属性操作
    		1. addClass()：添加class的属性值
    		2. removeClass()：删除class的属性值
    		3. toggleClass()：切换class的属性值
    		4. css()：获取/设置元素的CSS属性
    	
    3. CRUD操作
    	* append():父元素将子元素追加到末尾
    	* prepend():父元素将子元素追加到开头
    	* appendTo()
    	* prependTo()
    	* after():添加元素到元素后边
    	* before():添加元素到元素前边
    	* insertAfter()
    	* insertBefore()
   
    	* remove():移除元素
    		* 对象.remove():将对象删除掉
    	* empty():清空元素的所有后代元素。
    		* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
   

JQuery高级

1. 动画

    * 默认显示和隐藏方式
    	1. show()
    	2. hide()
    	3. toggle()
   
    * 滑动显示和隐藏方式
    	1. slideDown()
    	2. slideUp()
    	3. slideToggle()
   
    * 淡入淡出显示和隐藏方式
    	1. fadeIn()
    	2. fadeOut()
    	3. fadeToggle()
   
    * 参数：
    	speed:动画的速度。可以用"slow","fast","normal"或设置毫秒值
    	easing：切换效果，默认”swing“，匀速切换"linear"
    	fn：动画完成后执行该函数
   

2. 遍历

    * js的遍历方式
    	* for(初始化值;循环结束条件;步长)
    * JQuery的遍历方式
    	1. jq对象.each(callback)
    	2. $.each(object, [callback])
    	3. for(元素对象 of 容器对象)：JQuery3.0之后提供
    	* 返回值为true结束本次循环，返回值为false结束循环
   

3. 事件绑定

    * JQuery标准的绑定方式
    	* JQ对象.事件方法(回调函数);
    	* 注意：如果调用事件方法，不传递回调函数，会触发浏览器默认行为
    * on绑定事件/off解除绑定
    	* JQ对象.on("事件名称", 回调函数)
    	* JQ对象.off("事件名称")
    	* 注意：如果off不传递参数，会将对象的所有事件全部解除
    * 事件切换：toggle
    	* 当单击JQ对象对应的组件后，会执行fn1，第二次点击执行fn2...
    	* 注意：JQuery1.9版本之后该事件删除，使用JQuery Migrate插件恢复此功能