版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
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选择器
选择器效果
基本选择器
标签选择器
扫描二维码关注公众号,回复: 7593422 查看本文章$("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>"); }); } }); }); });