JQuery笔记（五）

• 什么JQuery:
    jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（*或JavaScript框架*）。
    jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，
    提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    
    jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
    拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
    
  JQuery的作用:
   1. 写更少的代码,做更多的事情: write Less ,Do more
   2. 将我们页面的JS代码和HTML页面代码进行分离
   
  为什么学习JQuery:
    	提高我们的工作效率
  

•  【JQ中根据ID查找元素】
    	html
    	全都是根据选择器去找的
    	#ID{}
    	.类名{}
    	$("#ID的名称")
  

•  【JQ和JS之间的转换】
    - JQ对象,只能调用JQ的属性和方法
    - JS对象 只能调用JS的属性和方法
      function changeJS(){
    		var div = document.getElementById("div1");
          //div.innerHTML = "JS成功修改了内容"
    		//将JS对象转成JQ对象
    		$(div).html("转成JQ对象来修改内容")
    	}
    	$(function(){
    		//给按钮绑定事件
    		$("#btn2").click(function(){
    		//找到div1
          //$("#div1").html("JQ方式成功修改了内容");
    		//将JQ对象转成JS对象来调用
    			var $div = $("#div1");
          //var jsDiv = $div.get(0);
    			var jsDiv = $div[0];
    			jsDiv.innerHTML="jq转成JS对象成功";
    		});
    	});
  

• JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)
  
    1. 导入JQ相关的文件
    2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
    3. 确定相关操作的事件
    4. 事件触发函数
    5. 函数里面再去操作相关的元素
    
  显示和隐藏  img.style.display
  

• 【JQ中的动画效果】
    javascript
    show()
    hide()
    slideUp
    slideDown
    fadeIn
    fadeOut
    animate : 自定义动画
  

•  定时器：
   
  

•   JQuery中的选择器
    1.基本选择器的案例
    让我们能够更加精确找到我们要操作的元素
    
    
    
    2.JQ中的层级选择器
    
    
    3.JQ中的基本过滤器
    
    
    4.JQ中的属性选择器
    $(function(){
    		//找到有name属性的input
    		$("#btn1").click(function(){
    			$("input[name]").attr("checked",true);
    		});
    		$("#btn2").click(function(){
    			$("input[name='accept']").attr("checked",true);
    		});
    		$("#btn3").click(function(){
    			$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
    		});
    	});
    	
    	5.JQ中的表单过滤器
    	
  

•  使用JQ完成表格的隔行换色
   $(function(){
    		//获得所有的行 :   元素选择器
    		$("tbody > tr:even").css("background-color","#CCCCCC");
    		//修改基数行
    		$("tbody > tr:odd").css("background-color","#FFF38F");
    		//$("tbody > tr").css("background-color","#FFF38F");
    	});
  

•  使用JQuery完成表单的全选全不选功能
    
  

•  使用JQ完成省市联动效果技术分析:
    1. 准备工作 : 城市信息的数据
    2. 添加节点 :  appendChild (JS)
       1. append  :  添加子元素到末尾
       2. appendTo  : 给自己找一个爹,将自己添加到别人家里
       3. prepend : 在子元素前面添加
       4. after :   在自己的后面添加一个兄弟
    3. 遍历的操作:
   代码实现：
   $(function(){
    		$("#province").change(function(){
          //alert(this.value);
    		//得到城市信息
    		var cities = provinces[this.value];
    		//清空城市select中的option
    		/*var $city = $("#city");
    		//将JQ对象转成JS对象
    		var citySelect = $city.get(0)
    		citySelect.options.length = 0;*/
    		$("#city").empty();  //采用JQ的方式清空
    		//遍历城市数据
    		$(cities).each(function(i,n){
    			$("#city").append(""+n+"");
    		});
    	});
    });
  

•   使用JQ完成下拉列表左右选择