一、简介
jquery是一个轻量级js框架,它兼容css3和各大浏览器,封装domajax、event、animate等简易操作,提供
各种插件的解决方案;它的宗旨是:write less,do more(所谓轻量级框架就是它比较小巧,体积小,用起来
比较简单)
版本:
1.0:
2.0:不支持IE6、7、8
没有任何问题)
非min版:适合阅读查看源代码
引入方式:
<script type="text/javascript" src="jquery的js代码位置">
</script>记住引用写在调用之前,因为html的瀑布式加载。
基本语法:
jQury(选择器)或者$(选择器)
获取到的jquery对象建议以$开头
jquery与dom对象转换:
jQuery对象[]或jQuery对象.get(index)获取dom对象。
dom -- 》 jQuery:用$(dom对象)
注意:遍历jQuery对象时用[]拿到的是dom对象,不要搞混
一般jquery代码当页面加载完再执行:
$(function(){});
$(document).ready(function(){}); (document可有可无)
这相当于window.onload,但是ready可以写多个,而window.onload只能写一个,写多个后面的会将前面
的覆盖。
二、选择器
基本选择器:
元素选择器:$("元素名")
id选择器:$("#id名")
class选择器:$(".class名")
选择所有:$("*");用多个选择器的时候用逗号隔开
层级选择器:
祖先A下的所有后代B元素:$("A B")
父A下的所有B子元素:$("A > B")
紧接在A后的下一个相邻B元素:$("A + B")
A后的所有B兄弟元素:$("A ~ B") (A的所有兄弟B元素(包括前后):$("A").siblings();)
属性选择器:
含有a属性的B 元素:$("B[a]")
a属性值等于c的B元素:$("B[a=‘c’]") (属性单引号可写可不写)
a属性值不等于c的B元素:$("B[a!=‘c’]")
a属性值以c开头的B元素:$("B[a^=‘c’]")
a属性值以c结尾的B元素:$("B[a$=‘c’]")
a属性值包含c的B元素:$("B[a*=‘c’]")
如果要在属性中再次选择,可用多个[]如:$(B[a][c=d])
基本过滤选择器:
第一个: :first
最后一个: :last
索引为基数的对象: :odd
索引为偶数的对象: :even (索引从0开始)
所有标题元素: :header
所有正在执行动画的元素: :animated
不包含某些元素: :not(selector)
索引大于、小于、等于: :gt(num) / :lt(num) / :eq(num)
表单选择器:
:text
:password
:radio
:checkbox
:reset
:submit
:image
:button
:hidden
:file
:input
表单属性选择器:
:checked
:selected
:enabled
:disabled
注意:jQuery选择器拿到的都是一个数组对象,即使用id选择器也一样。最常用的选择器三个基本选择器:
元素、id、class和两个表单属性选择器:checked和selected。
三、jQuery的dom操作方法:
操作样式:
获取样式值:css("css属性名")
设置样式值:css("属性","值");
css({属性:"值",属性:"值"});(json格式)
css方法将样式加到元素的style属性上
addClass()
removeClass()
toggleClass()
html代码/文本/值:html()、text()、val()
html属性操作:attr()、prop();一般用操作属性用attr,prop一般用于checked、selected等单值的获取
创建元素:$("<div></div>")或者$("<div/>")
删除:remove()
插入:添加子元素:append,prepend
在某一元素前/后插入:before、after
四、动画效果(了解)
show、hide、toggle:显示/隐藏/切换
slideUp、slideDown、slideToggle:高度滑动显示或隐藏
fadeIn、fadeOut、fadeToggle:淡入淡出
五、案例
广告的淡入淡出
页面打开两秒后弹出广告,两秒后广告自动关闭
<div id="image2" style="display:none"> <img src="../1.jpeg"></div>
setTimeout(function(){
$("#image2").slideDown(3000);
setTimeout(function(){
$("#image2").slideUp(3000);
},2000);
},2000);
表格的隔行换色、悬浮变色、全选、反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.oddTr{
background: pink;
}
.evenTr{
background: yellow;
}
.moveTr{
background: aquamarine;
}
</style>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script>
//页面加载完毕事件
$(function(){
//获取所有的行,为奇数行绑定一个颜色,偶数行也绑定一个颜色
$("tr:gt(0):odd").addClass("oddTr");
$("tr:gt(0):even").addClass("evenTr");
//为每行绑定鼠标移入移出事件,相当于悬浮效果
$("tr:gt(0)").mouseover(function(){
$(this).addClass("moveTr");
});
$("tr:gt(0)").mouseout(function(){
$(this).removeClass("moveTr");
});
//全选全不选框
$("#checkAll").click(function(){
$("input[name=checkItem]").prop("checked",$("#checkAll").prop("checked"));
});
//选item选中全选框
var totalLength = $("input[name=checkItem]").length;
$("input[name=checkItem]").click(function(){
var checkedLength = $("input[name=checkItem]:checked").length;
$("#checkAll").prop("checked",totalLength == checkedLength) ;
});
//反选
$("#reverseCheck").click(function(){
var $inputs = $("input[name=checkItem]");
for(var i=0; i<$inputs.length; i++){
//注意:inputs[i]拿到是dom对象
$($inputs[i]).prop("checked",!$($inputs[i]).prop("checked"));
}
});
});
</script>
</head>
<body>
<div style="width:800px;margin: 10px auto;">
<input type="button" value="反选" id="reverseCheck" />
<table align="center" width="100%" border="1" cellspacing="0" cellpadding="3">
<tr>
<th>
<input id="checkAll" type="checkbox" />
</th>
<th>编号</th>
<th>商品名称</th>
<th>商品类别</th>
<th>操作</th>
</tr>
<tr style="text-align: center;">
<td>
<input name="checkItem" type="checkbox" />
</td>
<td>1</td>
<td>魅族手机</td>
<td>手机数码</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr style="text-align: center;">
<td>
<input name="checkItem" type="checkbox" />
</td>
<td>2</td>
<td>华为手机</td>
<td>手机数码</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr style="text-align: center;">
<td>
<input name="checkItem" type="checkbox" />
</td>
<td>3</td>
<td>360手机</td>
<td>手机数码</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr style="text-align: center;">
<td>
<input name="checkItem" type="checkbox" />
</td>
<td>4</td>
<td>一加手机</td>
<td>手机数码</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr style="text-align: center;">
<td>
<input name="checkItem" type="checkbox" />
</td>
<td>5</td>
<td>中兴手机</td>
<td>手机数码</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr style="text-align: center;">
<td>
<input name="checkItem" type="checkbox" />
</td>
<td>5</td>
<td>努比亚手机</td>
<td>手机数码</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</div>
</body>
</html>
六、遍历jquery对象的三种方法
1.原始方式遍历
var $options = $(“option”);
for(var i=0 ; i<$options.length ; i++){
alert($option[i].value);
}
2.jquery对象的each方法
var $options = $(“option”);
$options.each(function(index,element){
alert(index); //打印索引
alert(element); //打印$options集合对象中的每一个元素(注意:element是js对象)
});
3.jquery的全局each方法
此方法和jquery对象的方法相同,写法不同而已
var $options = $(“option”);
$.each($options,function(index,element){
alert(index); //打印索引
alert(element); //打印$options集合对象中的每一个元素
});
七、jQuery中的事件
1.jquey中常用的事件
jquery的事件与js的事件的功能和意义一样,只是在使用语法上稍微有些差异
hover事件:鼠标悬停事件
例如:要为一个<input id=”btn” type=”button” value=“提交”/>按钮绑定点击事件。
1)js代码实现
document.getElementById(“btn”).onclick=function(){
//逻辑代码... ...
}
2)jquery代码实现
$(“#btn”).click(function(){
//逻辑代码... ...
});
2、事件的绑定与解绑
绑定一个事件:
$("btn").bind("click", function(){
alert();
});
绑定多个事件:(json格式)
$("button").bind({
click:function(){alert()},
mouseover:function(){alert()},
mouseout:function(){alert()}
});
解绑所有事件:
$("btn").unbind();
解绑指定事件:(多个用空格隔开)
$("button").unbind(“click”);
八、表单校验插件
jQuery的表单校验插件提供了四种手动校验的方法,前三种了解,重点掌握第四种:
表单校验插件依赖于jquery库,所以在引用校验插件前必须先引入jquery库。
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
一、检验方式1:class类(了解)
语法:<标签 class=” 类型1 类型2 …”>此方法检验类型种类有限
二、属性(了解)
三、html5-data(了解)
语法:<标签 data-type-类型=“值”>
四、js代码校验
如果将代码写在前面,一般将校验代码写在页面加载完毕事件中:
$(function(){});
语法:(语法中多个值时都用的是json格式,如validate方法中传的是一个json对象,rules和messages也是对应一个json对象,一个校验域对应多个校验规则的话也用的json格式)
$("form表单的选择器").validate({
rules:{
表单项name值:校验规则,
表单项name值:校验规则... ...
},
messages:{
表单项name值:错误提示信息,
表单项name值:错误提示信息... ...
}
});
常用的校验规则:
自定义校验规则:
九、案例
1、省市二级联动
$(function(){
var cities = [["长沙市","岳阳市","湘潭市"],["武汉市","荆州市","大连市"],["大同市","太原市","临汾市"]];
$("#country").change(function(){
$("#city").empty().html("<option value=''>---请选择---</option>");
var cityArr = cities[$(this).val()];
for(var i=0; i<cityArr.length; i++){
$("<option>"+ cityArr[i] +"</option>").appendTo($("#city"));
}
});
});
<select id="country">
<option value="">---请选择---</option>
<option value="0">湖南省</option>
<option value="1">湖北省</option>
<option value="2">山西省</option>
</select>
<select id="city">
<option value="">---请选择---</option>
</select>
2、左右选择
$(function(){
$("#LeftToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
$("#AllleftToRight").click(function(){
$("#left option").appendTo($("#right"));
});
$("#RightToLeft").click(function(){
$("#right option:selected").appendTo($("#left"));
});
$("#AllRightToLeft").click(function(){
$("#right option").appendTo($("#left"));
});
})
<div>
<select multiple="multiple" size="8" id="left">
<option>111111111</option>
<option>2222222</option>
<option>3333333</option>
<option>44444444</option>
<option>666665666</option>
</select>
</div>
<div>
<input type="button" value="--->" id="LeftToRight"><br>
<input type="button" value="--->>" id="AllleftToRight"><br>
<input type="button" value="<---" id="RightToLeft"><br>
<input type="button" value="<<---" id="AllRightToLeft">
</div>
<div>
<select multiple="multiple" size="8" id="right">
</select>
</div>
3、模拟用户分组
$(function(){
$("span").click(function(){
$(".menus ul").css("display","none");
$(this).next().css("display","block");
});
});
<div id="menu">
<ul class="menus">
<li>
<span>第一组</span>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
</li>
<li>
<span>第二组</span>
<ul>
<li>张三2</li>
<li>李四2</li>
<li>王五2</li>
</ul>
</li>
<li>
<span>第三组</span>
<ul>
<li>张三3</li>
<li>李四3</li>
<li>王五3</li>
</ul>
</li>
<li>
<span>第四组</span>
<ul>
<li>张三4</li>
<li>李四4</li>
<li>王五4</li>
</ul>
</li>
<li>
<span>第五组</span>
<ul>
<li>张三5</li>
<li>李四5</li>
<li>王五5</li>
</ul>
</li>
</ul>
</div>