- 什么是JQuery
JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装. - JS的常用的框架:
JQuery,ExtJS,DWR,Prototype…
JQuery的入门 - 引入Jquery的js文件
<script src="../../js/jquery-1.11.3.min.js"></script>
- JQuery的入口函数:
// 传统的JS的方式：页面加载的事件只能执行一次.
/*window.onload = function(){
alert("aaa");
}
window.onload = function(){
alert("bbb");
}*/
// JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
// window.onload 等页面加载完成后执行该方法.
// $(function(){}):等页面的DOM树绘制完成后进行执行.
// $相当于JQuery
$(function(){
alert("aaa");
});
$(function(){
alert("bbb");
});
- JS对象和JQ对象的转换
window.onload = function(){
// 传统JS方式：
var d1 = document.getElementById("d1");
// JS对象的属性和方法:
// d1.innerHTML = "JS对象的属性";
// d1.html("aaaaaa");
// 将JS对象转成JQ的对象.
$(d1).html("JS对象转成JQ对象");
}
$(function(){
var $d1 = $("#d1");
// $d1.html("JQ对象的属性");
// 转成JS的对象:
// 一种方式
// $d1[0].innerHTML = "将JQ的对象转成JS对象";
// 二种方式:
$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
});
-
JQ显示和隐藏
-
JQ的效果操作:
-
show();
- 使用一:Jq对象.show();
- 使用二:Jq对象.show(“slow”); // slow,normal,fast
- 使用三:Jq对象.show(毫秒值); // 1000
- 使用四:Jq对象.show(毫秒值,function(){});
-
hide();
- 使用一:Jq对象.hide();
- 使用二:Jq对象.hide(“slow”); // slow,normal,fast
- 使用三:Jq对象.hide(毫秒值); // 1000
- 使用四:Jq对象.hide(毫秒值,function(){});
-
slideDown(); --向下滑动
- 使用一:Jq对象.slideDown();
- 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
- 使用三:Jq对象.slideDown(毫秒值); // 1000
- 使用四:Jq对象.slideDown(毫秒值,function(){});
-
slideUp(); --向上滑动
- 使用一:Jq对象.slideUp();
- 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
- 使用三:Jq对象.slideUp(毫秒值); // 1000
- 使用四:Jq对象.slideUp(毫秒值,function(){});
-
fadeIn(); --淡入
- 使用一:Jq对象.fadeIn();
- 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
- 使用三:Jq对象.fadeIn(毫秒值); // 1000
- 使用四:Jq对象.fadeIn(毫秒值,function(){});
-
fadeOut(); --淡出
- 使用一:Jq对象.fadeOut();
- 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
- 使用三:Jq对象.fadeOut(毫秒值); // 1000
- 使用四:Jq对象.fadeOut(毫秒值,function(){});
-
animate(); --自定义动画
-
toggle(); --单击切换函数
- Jq对象.toggle(fn1,fn2…);单击第一下的时候执行fn1,单击第二下执行fn2…
JQ定时换广告
<script>
var time ;
$(function(){
// 设置定时 5秒钟执行一个 显示广告的方法：
time = setInterval("showAd()",5000);
});
function showAd(){
// 获得元素：
//$("#adDiv").show(2000);
// $("#adDiv").slideDown(2000);
$("#adDiv").fadeIn(3000);
clearInterval(time);
// 再设置定时 5秒钟隐藏.
time = setInterval("hideAd()",5000);
}
function hideAd(){
//$("#adDiv").hide(2000);
// $("#adDiv").slideUp(2000);
$("#adDiv").fadeOut(3000);
clearInterval(time);
}
</script>
- 基本选择器
id选择器 - 用法:$(“#id”)
类选择器 - 用法:$(“.类名”)
元素选择器 - 用法:$(“元素名称”)
通配符选择器 - 用法:$(“*”)
并列选择器 - 用法:$(“选择器,选择器,选择器”)
$(function(){
$("#but1").click(function(){
// alert("aaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("*").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#two,span,.mini").css("background","#bbffaa");
});
});
- 层级选择器
后代选择器：使用空格 所有后代包含孙子及以下的元素
子元素选择器：使用> 第一层的元素（儿子）
下一个元素:使用+ 下一个同辈元素
兄弟元素:使用~ 后面所有的同辈元素
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一层div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查找下一个同辈的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
- 基本过滤选择器
<script>
$(function(){
$("#but1").click(function(){
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
- 内容选择器
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
- 属性选择器
- 表单选择器
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
- 表单属性选择器
给奇数偶数添加样式案例：
<script>
$(function(){
/*$("tr:odd").addClass("odd");
$("tr:even").addClass("even");*/
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
</script>
JQuery对属性的操作的方法：
- attr();
- 使用方法一：$(“”).attr(“src”);
- 使用方法二：$(“”).attr(“src”,”test.jpg”);
- 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
- removeAttr();
- prop();新版本的方法.
- 使用方法一：$(“”).prop(“src”);
- 使用方法二：$(“”).prop(“src”,”test.jpg”);
- 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
- removeProp();
- addClass()
- removeClass();
全选全不选案例：
// 复选框全选和全不选
$(function(){
// 获得上面的复选框:
//var $selectAll = $("#selectAll");
// alert($selectAll.attr("checked"));
/*$selectAll.click(function(){
// alert($selectAll.prop("checked"));
if($selectAll.prop("checked") == true){
// 上面的复选框被选中
$(":checkbox[name='ids']").prop("checked",true);
}else{
// 上面的复选框没有被选中
$(":checkbox[name='ids']").prop("checked",false);
}
});*/
// 简化：
$("#selectAll").click(function(){
$(":checkbox[name='ids']").prop("checked",this.checked);
});
});
- JQuery的DOM操作
- 常用的方法:
- append(); —在某个元素后添加内容.
- appendTO(); —将某个元素添加到另一个元素后.
- remove(); —将某个元素移除.
JQuery的遍历案例：
遍历的方式一：
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
$(function(){
var arrs = new Array("张森","张凤","张芙蓉");
// 将这个数组转成JQ的对象使用each方法.
/*$(arrs).each(function(i,n){
alert(i+" "+n);
});*/
$.each(arrs,function(i,n){
alert(i+" "+n);
});
});
省市二级联动案例：
<script>
$(function(){
//定义数组
var arrs=new Array(3);
arrs[0]=new Array("石家庄","邢台","邯郸");
arrs[1]=new Array("安阳","洛阳","郑州");
arrs[2]=new Array("武汉","襄阳","荆州");
var $city=$("#city");
//获得省份的下拉列表
$("#province").change(function(){
$city.get(0).options.length=1;
var val=this.value;
$.each(arrs, function(i,n) {
if(i==val){
$(n).each(function(j,m){
$city.append("<option>"+m+"</option>")
})
}
});
})
});
</script>
4617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
