1.定义：
jQuery是一个快速、简洁的JavaScript框架，一个优秀的JavaScript代码库。
2.作用：
jQuery设计的宗旨是“write Less，Do More”。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
简单来说：对常用的方法和对象进行封装,方便我们使用.
3.Jquery和HTML整合
注意：jquery是单独的js文件
通过script标签的src属性导入即可。
我这里用的是1.11.3.min.js版本，
eg：在Hbuider中：
<script src="../js/jquery-11.0.mini.js"></script>在eclipse中：
<script type="text/javascript" src="${pageContext.request.contextPath}/js/js/jquery-11.0.mini.js""</script>4.获取Jquery对象
$("选择器") 或者 jQuery("选择器")
//通过原生js
alert(document.getElementById("username").value)
//通过jquery 获取jquery对象
var $username=$("#username");//#+id的值
var $username=jQuery("#username");
lert($username.val());5.dom对象和jquery对象之间的转换
//dom >>>>jquery $(dom对象)
//1.首先获取dom对象
var obj=document.getElementById("username");
//2.转化
var $user=$(obj);
alert($user.val());
//alert($user.value);错误的，不可混用//jquery>>>>dom
//1.获取jquery独享
var $u=$("#username");
//2.转换
//2.1 方式1
var obj=$u.get(0);//一个元素的索引是0.
//2.2 方式2
var obj = $u[0];
alert(obj.value);6.Jquery的页面加载
js: window.onload=function(){}//在一个页面中只能使用一次
jquery 在一个页面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){});7.派发事件
js dom对象.onclick=function(){....}
jquery $("选择器").click(function(){...});去掉on javaScript中的on，加上$即可
掌握事件:
focus
blur
submit
change
click
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//派发事件
$("#bId").click(function(){
alert(123)
});
});
</script>
</head>
<body>
<input type="button" id="bId" value="点击查看" />
</body>
</html>8.jquery中效果:
1.隐藏或展示
show(毫秒数) hide(毫秒数)
2.滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
3 .淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
//没有引入css忽略
<script type="text/javascript">
$(function(){
//藏b1div
$("#b1").click(function(){
//$("#b1Div").hide(1000);
//$("#b1Div").hide();
//切换
$("#b1Div").toggle(1000);
});
//滑出/滑入b2Div
$("#b2").click(function(){
//$("#b2Div").slideUp(2000);
$("#b2Div").slideToggle(1000);
});
//出/淡入b3Div
$("#b3").click(function(){
$("#b3Div").fadeOut(1000);
});
})
</script>
9.应用实例-弹出广告
注意：其中的function是函数，不管是js还是jquery都是这样写的，而且方法是可以写多个的
不要和jquery中的$(function(){...})加载页面的 方式混淆
<script>
$(function(){
//开启一个定时器 2秒之后展示div
setTimeout(showAd,2000);
});
//编写展示的方法
function showAd(){
//获取div,调用效果
//$("#ad").show(1000);
//$("#ad").slideDown(1000);
$("#ad").fadeIn(1000);
//开启另一个隐藏的定时器
setTimeout("hideAd()",3000);
}
//编写隐藏方法
function hideAd(){
//$("#ad").hide(1000);
//$("#ad").slideUp(1000);
$("#ad").fadeOut(1000);
}
</script>10.Jquery中的选择器
选择器总结:
1. 基本选择器★
$("#id值") $(".class值") $("标签名")
eg: $(function(){//加载页面的 //<input type="button" value="选择 id为 one 的元素." id="btn1"/> $("#btn1").click(function(){//选择器型的#+id的值，派发事件 $("#one").css("background-color","#ff0");//key --value的形式 }); 需要注意的是表达样式这里可以用。css的形式js中的是style
了解:$("*")
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
2.层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟eg: $(function(){ // <input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("body div").css("background-color","#f0f"); //这代表的是所有的div });
3. 基本过滤选择器:★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <eg: $(function(){ // <input type="button" value="选择 body内的所有div元素." id="btn1"/> $("#btn1").click(function(){ $("div:first").css("background-color","#f0f");//第一个div });
4.内容过滤:
:has("选择器"):包含指定选择器的元素eg： <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("div:has('.mini')").css("background-color","#0ff"); });//选取class为mini的元素的div }); </script>
5.可见过滤:
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
:visible<script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $(div:visible).css("background-color","#0ff"); }); }); </script>
6.属性过滤器:★
[属性名]
[属性名="值"]<script type="text/javascript"> $(function(){ $("#btn2").click(function(){ $("div[title='test']").css("background-color","#ff0"); }); });//选取含有 属性title 的div元素. </script>
7.表单过滤:
:input 所有的表单子标签 input select textarea button
//input是form下的子标签，所以先过滤掉form 比如#+form1是第一个的表单的id选择器<script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //alert($("#form1 :input").size()); //alert($("#form1 :input").length); alert($("#form1 input").size()); }); }); </script>
10应用实例-隔行换色（jquery实现）
<style type="text/css">
.odd{
background-color: #BCD68D;
}
.even{
background-color: #FFFFCC;
}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
/*$("tr:gt(0):odd").css("background-color","#BCD68D");
$("tr:gt(0):even").css("background-color","#FFFFCC");*/
$("tr:gt(0):odd").addClass("odd");
$("tr:gt(0):even").addClass("even");
})
</script>11.属性和css操作总结:
对属性的操作:
attr():设置或者获取元素的属性
方式1:获取
attr("属性名称")
$function()
{
//给username添加title属性
var $username =$("[name="username"]")
$username.attr("title",姓名)；
}
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性 json
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称"):移除指定属性
addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
对css操作:操作元素的style属性&和上类似
css():获取或者设置css样式
方式1:获取
css("属性名")
//给div添加边框样式
var $div=$("div");
$div.css("border","1px, solid, red)
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
获取元素的尺寸:
width()
height()
12.应用实例-全选或全不选（jquery）一句话搞定
<script type="text/javascript">
$(function(){
$("#selectAll").click(function(){
//1.获取当前元素的选中状态 this在funcation中代表的是当前dom对象
//alert(this.checked);
//alert($(this).attr("checked"));//获取undefined
//alert($(this).prop("checked"));//用的是prop代替
//2.获取所有的复选框 让其状态和 当前元素的选中状态保持一致
$(".itemSelect").prop("checked",$(this).prop("checked"));
});
});
</script>12应用实例-省市联动（jquery）
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
arr[1] = new Array("长春市","吉林市","四平市","通化市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
</script>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("[name='pro']").change(function(){
//获取市下拉选
var $city=$("[name='city']");
//初始化
$city.html($("<option>").html("-请选择-"));
var pro=$(this).val();
//获取所有的市数组
var cities=$(arr[pro]);
//alert(cities);
//遍历数组,拼装成option 追加到市下拉选中
cities.each(function(){
$city.append("<option>"+this+"</option>");
//$city.html($(""));
});
});
});
</script>补充：
1.遍历数组
数组.each(function(){});
$.each(遍历数组,function(){});
注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)
//
2.设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置
/
3. 设置获取获取标签体的内容
html()
text()
xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容
设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码
text:获取只是页面展示的内容4.文档操作:
内部插入
a.append(c):将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面<script type="text/javascript"> $(document).ready(function(){ //0.获取两个元素 var $city=$("#city"); var $fk=$("#fk"); //1.在city的后面内部追加 反恐 // $city.append($fk); //2.在city的前面内部插入 反恐 $city.prepend($fk) });
appendTo
prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
a.insertAfter(c)
a.insertBefore(c)
删除
empty() 清空元素
remove() 删除元素
13.应用实例-左右选中jquery
<script type="text/javascript">
$(function(){
//移动一个，left的孩子就是下面的option
$("#toRight1").click(function(){
$("#left>option:selected:first").appendTo($("#right"));
});
//移动多个
$("#toRight2").click(function(){
$("#right").append($("#left option:selected"));
});
//移动全部
$("#toRight3").click(function(){
$("#right").append($("#left option"));
});
})
</script>补充：表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
