Jquery的基本入门

#Jquery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

##Jquery使用方式

• 导入jquery的js文件

    jquery-1.11.0.min.js
  

• 在html或者jsp进行关联

    <script src="../js/jquery-1.11.0.min.js"></script>
  

Jquery使用

###jquery基本操作

• 获取jquery中dom对象
  

  //获取dom对象
  var $username = $("#username");
  //弹出dom对象中的value
  alert($username.val())
  

• 事件派发
  

    $(function() {
    		$("#mbt").click(function() {
    			alert("哈哈哈，被点击了")
    		});
    });
  

• 各种事件

  • 页面加载事件

      onload = function() {
      		alert(12);
      }
      
      $(function() {
      		alert ("hahaha");
      })
    

  • 获取焦点 失去焦点

      $(function() {
      		$("#username").blur(function() {
      			alert("失去焦点");
      		}).focus(function() {
      			alert("获取到焦点");
      		});
      	});
    
      $(function() {
      	$("#e01").mouseover(function() {
    
      		alert("鼠标移上");
    
      	}).mouseout(function() {
      		alert("鼠标移出")
      	});
      });
    

##JQuery选择器

• 选择器效果

• 基本选择器

  • 标签选择器

      $("div")
    

  • id选择器

      $("#div1"）
    

  • 类选择器

      $(".div1")
    

  • 所有元素的选择器

      $("*")
    

  • 组合选择器

      $("div,#div1")
    

• 层级选择器

    	$("div p")
    	$("div .mini")
  

  • 选择自己

      $(this)
    

  • 属性选择器

      $("[href]");
    

  • 奇数偶数选择器

      $("tr:even");
      $("tr:odd");
    

  • 类型选择器

      $(":button")
    

  • 属性选择器

      $([name='username'])
    

###jquery基本效果

• 显示隐藏

    hide()
  
    show()
  
    toggle()	
  

• 淡入淡出

    fadeIn()
    fadeOut()
    fadeToggle()
  

• 滑动

    slideDown()
    slideUp()
    slideToggle()
  

##Jquery工具

###jQuery HTML

• jQuery 捕获 和设置

   text() - 设置或返回所选元素的文本内容
   html() - 设置或返回所选元素的内容（包括 HTML 标记）
   val() - 设置或返回表单字段的值
   获取属性 -
    attr() alert($("#w3s").attr("href"));
   设置属性
   $("#a").attr("href", "http://www.baidu.com");
  

• JQuery 添加元素

    append() - 在被选元素内部的结尾插入指定内容
    prepend() - 在被选元素内部的开头插入指定内容
    after() - 在被选元素之后插入内容
    before() - 在被选元素之前插入内容 
  

• JQuery 删除元素

    remove() - 删除被选元素（及其子元素）
    empty() - 从被选元素中删除子元素
    $("p").remove(".italic");
  

• 案例演示

  • 全选全不选
    prop() 方法

      prop() 方法设置或返回被选元素的属性和值。
    
      
      <table id="tab1" border="1" width="800" align="center">
      <tr>
      	<td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
      </tr>
      <tr>
      	<th><input type="checkbox" id="selectAll"></th>
      	<th>分类ID</th>
      	<th>分类名称</th>
      	<th>分类描述</th>
      	<th>操作</th>
      </tr>
      <tr>
      	<td><input type="checkbox" class="itemSelect"></td>
      	<td>1</td>
      	<td>手机数码</td>
      	<td>手机数码类商品</td>
      	<td>
      		<a href="">修改</a>|
      		<a href="">删除</a>
      	</td>
      </tr>
      <tr>
      	<td><input type="checkbox" class="itemSelect"></td>
      	<td>2</td>
      	<td>电脑办公</td>
      	<td>电脑办公类商品</td>
      	<td>
      		<a href="">修改</a>|
      		<a href="">删除</a>
      	</td>
      </tr>
      <tr>
      	<td><input type="checkbox" class="itemSelect"></td>
      	<td>3</td>
      	<td>鞋靴箱包</td>
      	<td>鞋靴箱包类商品</td>
      	<td>
      		<a href="">修改</a>|
      		<a href="">删除</a>
      	</td>
      </tr>
      <tr>
      	<td><input type="checkbox" class="itemSelect"></td>
      	<td>4</td>
      	<td>家居饰品</td>
      	<td>家居饰品类商品</td>
      	<td>
      		<a href="">修改</a>|
      		<a href="">删除</a>
      	</td>
      </tr>
    

      $(".itemSelect").prop("checked",$(this).prop("checked"));
    

  • 左右移动

      <table>
      <tr>
      	<td>
      		<select id="left" multiple="true" style="width:100px" size="10">
      			<option>呜呜</option>
      			<option>哈哈</option>
      			<option>吼吼</option>
      			<option>呵呵</option>
      			<option>嘿嘿</option>
      			<option>嘻嘻</option>
      			<option>呼呼</option>
      			<option>喵喵</option>
      		</select>
      	</td>
      	<td>
      		<input type="button" value=">" id="toRight1"><br>
      		<input type="button" value=">>" id="toRight2"><br>
      		<input type="button" value=">>>" id="toRight3"><br><br>
      		<input type="button" value="<" id="toLeft1"><br>
      		<input type="button" value="<<" id="toLeft2"><br>
      		<input type="button" value="<<<" id="toLeft3">
      	</td>
      	<td>
      		<select id="right" multiple="true" style="width:100px" size="10">
    
      		</select>
      	</td>
      </tr>
    

    jquery代码

      $(function() {
    
      $("#toRight1").click(function() {
      	$("#left>option:selected:first").appendTo($("#right"));
      });
      
    
      $("#toRight2").click(function() {
      	$("#left>option:selected").appendTo($("#right"));
      });
      
      $("#toRight3").click(function(){
      	$("#right").append($("#left>option"));
      });
    
      });
    

  • 省市联动

      <select name="pro">
      		<option >-请选择-</option>
      		<option value="0">黑龙江</option>
      		<option value="1">吉林</option>
      		<option value="2">辽宁</option>
      		<option value="3">河南</option>
      	</select>
      <select name="city">
      		<option >-请选择-</option> 	
      </select>
    
      // 定义二维数组:
      var arr = new Array(4);
      arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
      arr[1] = new Array("长春市","吉林市","四平市","通化市");
      arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
      arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
    
    
    
      $(function() {
      $("#pro").change(function() {
      	//获取当前所选择的城市信息
      	var pro = $(this).val();
      	//初始化city的信息
      	$("#city").html($("<option>").html("-请选择-"));
      	//获取数组
      	var cityArr = arr[pro];
      	//遍历数组
      	for(var i = 0; i < cityArr.length; i++) {
      		$("#city").append("<option>" + cityArr[i] + "</option>")
      	}
    
    
      	//cities.each(function(){
      	//	$city.append("<option>"+this+"</option>");
      		//$city.html($(""));
      	});
      });
      })
    

• JQuery中的AJAX

  • load

      //通过load加载本地文件
      $("#div1").load("index.jsp");
    

  • get

      //地址，回调
      $.get(URL,callback);
      
      $.get("${pageContext.request.contextPath}/servlet/AJaxServlet?username=zhangsan",function(data, status) {
      		alert(data + "----" + status);
      });
    

  • post
    //地址，参数，回调
    $.post(URL,data,callback);

      $.post("${pageContext.request.contextPath}/servlet/AJaxServlet", {
      	username : "zhangsan",
      	password : 123
      },
      function(data, status) {
      	alert(data + "----" + status);
      });
    

  • ajax
    $.ajax({name:value, name:value, … })

##JQuery案例

• 案例一：

  验证用户名是否存在

• 案例二:

  ajax提交表单

    	javascript] view plain copy
  
  
    		$.ajax({  
                    type: "POST",  
                    url:"SearchInfo/QueryMoreInfo",  
                    data:$('#fm').serialize(),// 序列化表单值  
                    async: false,  
                    error: function(request) {  
                        alert("Connection error");  
                    },  
                    success: function(data) {  
                        window.location.href="跳转页面"  
                    }  
             });  
  

• 案例三：

  三级联动效果

• js中json

    JSON字符串:
    var str1 = '{ "name": "cxh", "sex": "man" }';
  
  
    JSON对象:
    var str2 = { "name": "cxh", "sex": "man" };
  
  
    JSON对象
    var s = {
    	"name" : "Jack",
    	"age" : 30,
    	"isMan" : true,
    	"school" : {
    		"name" : "Lonton University",
    		"location" : "English"
  
    	}
    };
    alert(s.school.name);
  
  
  
    JSON字符串转换为JSON对象
    var m = '{"username" : "zhangsan","password" : "lisi"}';
    var mobject=eval("("+m+")");
    jquery中将json字符串转换成对象
    alert($.parseJSON(str1));
  
    JSON对象转换成JSON字符串（需要导入json.js包）
    var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
  

• 案例

• JQuery实现三级联动:

  -请选择- -请选择- -请选择-

    <input  type="submit" />
  

    //1--先将省加载进来
    $(function() {
    	$.ajax({
    		type : "POST",
    		url : "${pageContext.request.contextPath }/user_province.action",
    		dataType : "json",
    		success : function(data) {
    			//alert(data);
    			//1--获取pro选择框
    			$("#proId").html("<option value=0>-请选择-</option>");
    			//2-遍历data，设置pro展示的城市
    			$.each(data, function() {
    				$("#proId").append(
    						"<option value=" + this.provinceid + ">"
    								+ this.name + "</option>");
  
    			});
    		}
    	});
    $("#proId").change(function(){
    
    $.ajax({
    	type : "POST",
    	url : "${pageContext.request.contextPath }/user_city.action",
    	//data 根据省的id 获取城市  
    	data:"pid="+$(this).val(),
    	dataType : "json",
    	success : function(data) {
    		//alert(data);
    		//1--获取pro选择框
    		$("#cityId").html("<option value=0>-请选择-</option>");
    		//2-遍历data，设置pro展示的城市
    		$.each(data, function() {
    			$("#cityId").append(
    					"<option value=" + this.cityid + ">"
    							+ this.name + "</option>");
    		});
    	}
    });
    });
    
    $("#cityId").change(function(){
    
    $.ajax({
    	type : "POST",
    	url : "${pageContext.request.contextPath }/user_xcity.action",
    	//data 根据省的id 获取城市  
    	data:"cid="+$(this).val(),
    	dataType : "json",
    	success : function(data) {
    		//alert(data);
    		//1--获取pro选择框
    		$("#xcityId").html("<option value=0>-请选择-</option>");
    		//2-遍历data，设置pro展示的城市
    		$.each(data, function() {
    			$("#xcityId").append(
    					"<option value=" + this.xcityid + ">"
    							+ this.name + "</option>");
    		});
    	}
    });
    });
    });