#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> -
省市联动
<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($("")); }); }); })$(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")); });});
-
-
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提交表单
-
案例二：
三级联动效果
-
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+")"); 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>"); }); } }); }); });
7648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
