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())
js和jquery转换
js对象转成jquery对象
var obj = document.getElementById("username"); var $jobj = $(obj); alert($jobj.val());
jquery对象转成js对象
var $u=$("#username"); var u=$u[0]; alert(u.value);
事件派发
$(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 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"));
省市联动
<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>") } }); })