在网站的首页上定时弹出一个广告，过几秒之后，广告会自动消失。
【JQuery的概述】
JQuery1.x JQuery2.x(不支持IE6,7,8)
大大简化的JS的代码编写.
将页面与JS分离
JQuery,prototype,dwr,ExtJS...
【JQuery的入门】
<script src="../../js/jquery-1.8.3.js"></script>
<script>
// 页面加载完毕
window.onload = function(){
alert("Hello 王守义");
}
window.onload = function(){
alert("Hello 老王");
}
// DOM树绘制完毕以后就会执行
jQuery(document).ready(function(){
alert("Hello 王如花");
});
// JQ的简写 jQuery = $
/*jQuery(document).ready(function(){
alert("Hello 王凤");
});*/
$(function(){
alert("Hello 王凤");
});
</script>
【JQ和DOM对象的转换】
使用JS写的代码只能调用JS中的属性和方法.
使用JQ写的代码只能调用JQ中的属性和方法．
<script src="../../js/jquery-1.8.3.js"></script>
<script>
// JS
function writeIn(){
// document.getElementById("s1").innerHTML = "Hello 王超杰";
var s1 = document.getElementById("s1");
// 将JS对象转成JQuery的对象
$(s1).html("Hello 王超杰");
}
// JQ
$(function(){
$("#bt2").click(function(){
// $("#s1").html("Hello 王守义");
// 将JQ的对象转成JS的对象。
// $("#s1")[0].innerHTML="Hello 王守义";
// $("#s1").get(0).innerHTML = "Hello 王守义";
});
});
</script>
【JQ的获得元素】
$(“#id”)
【JQ的效果】
* show(); --显示某个元素
* hide(); --隐藏某个元素
* slideDown(); --向下滑动
* slideUp(); --向上滑动
* fadeOut(); --淡出
* fadeIn(); --淡入
* animate(); --自定义动画
* toggle(); --单击事件的切换
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
var time;
$(function(){
// 设置定时 5秒后执行一个显示广告的函数
time = setInterval("showAd()",5000);
});
// 显示广告的函数
function showAd(){
// 获得广告的div，显示
// $("#divAd").show(1000);
// $("#divAd").slideDown(3000);
$("#divAd").fadeIn(3000);
// 清空定时：
clearInterval(time);
// 重新设置定时:
time = setInterval("hideAd()",5000);
}
// 隐藏广告的函数:
function hideAd(){
// 获得广告的div，隐藏
// $("#divAd").hide(3000);
// $("#divAd").slideUp(3000);
$("#divAd").fadeOut(3000);
// 清空定时：
clearInterval(time);
}
</script>
【基本选择器】
$(“#id”)
$(“.class”)
$(“元素”)
$(“*”)
$(“#id,.class”)
【基本选择器的案例】
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background","#bbffaa");`
});
$("#btn2").click(function(){
$(".mini").css("backgroundColor","#bbffaa");
});
$("#btn3").click(function(){
$("div").css("backgroundColor","#bbffaa");
});
$("#btn4").click(function(){
$("*").css("backgroundColor","#bbffaa");
});
$("#btn5").click(function(){
$("#two,.mini").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
【JQ的层级选择器】
【JQ层级选择器的代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background","#bbffaa");
});
$("#btn2").click(function(){
$("body>div").css("backgroundColor","#bbffaa");
});
$("#btn3").click(function(){
$("#two+div").css("backgroundColor","#bbffaa");
});
$("#btn4").click(function(){
$("#one~div").css("backgroundColor","#bbffaa");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
【JQ的基本过滤选择器】
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background","#bbffaa");
});
$("#btn2").click(function(){
$("body div:last").css("backgroundColor","#bbffaa");
});
$("#btn3").click(function(){
$("body div:odd").css("backgroundColor","#bbffaa");
});
$("#btn4").click(function(){
$("body div:even").css("backgroundColor","#bbffaa");
});
});
【JQ的属性选择器】
<script>
$(function(){
$("#btn1").click(function(){
$("div[title]").css("background","#bbffaa");
});
$("#btn2").click(function(){
$("div[title=‘aaa‘]").css("backgroundColor","#bbffaa");
});
});
</script>
【JQ的表单选择器】
$(function(){
$("#btn1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#btn2").click(function(){
$(":text").css("background","#bbffaa");
});
});
制作一个表格，隔行换色.第一行标题的行，不需要进行换色，其他的行需要变换颜色．
【JQuery的CSS类】
使用addClass(),removeClass(); 添加或移除样式
<script>
$(function(){
// 找奇数行：
//$("tr:odd").addClass("odd");
// 偶数行:
//$("tr:even").addClass("even");
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
});
</script>
有如下的表格的数据，批量的进行删除.将上面的复选框选中，下面其他的复选框都被选中。如果上面的复选框没有被选中，那么将下面的所有的复选框全不选.
【JQuery操作某个元素的属性】
<script>
$(function(){
$("#bt1").click(function(){
// 获得属性的值
// alert($("#img1").attr("src"));
// 修改属性的值:
$("#img1").attr("src","../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg");
});
});
</script>
$(function(){
// 步骤一：为上面的复选框绑定单击事件:
$("#selectAll").click(function(){
/*if(this.checked == true){
// 如果上面的复选框被选中：
$("input[name=‘ids‘]").attr("checked",true);
}else{
// 上面的复选框没有被选中
$("input[name=‘ids‘]").attr("checked",false);
}*/
// $("input[name=‘ids‘]").attr("checked",this.checked);
$("input[name=‘ids‘]").prop("checked",this.checked);// this JS的对象
});
});
低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.
在注册的页面上有省市联动.
【JQuery的遍历】
each的方法进行遍历.
一种用法：
* JQ的对象.each(function(i,n){
});
二种用法
* $.each(数组,function(i,n){
});
【JQuery的DOM的操作】
JS中添加元素：appendChild();
JQ中添加元素：
append();
appendTo();
// 定义二维数组：
var cities = [
["长春市","吉林市","延边市","白山市","松原市"],
["济南市","青岛市","临沂市","烟台市"],
["石家庄","唐山","保定","承德","秦皇岛"],
["南京","苏州","扬州","无锡"]
];
$(function(){
// 获得省份的下拉列表，绑定事件
$("#province").change(function(){
// 获得下拉列表的值:
// alert(this.value);
var val = this.value;
var $city = $("#city");
$city[0].options.length = 0;
$(cities).each(function(i,n){
// alert(i+" "+n);
if( val == i){
$(n).each(function(j,m){
// alert(m);
// 创建option元素
var opEL = document.createElement("option");
// 创建文本节点
var textNode = document.createTextNode(m);
// 将文本添加到option中
// opEL.appendChild(textNode);
$(opEL).append(textNode);
// 将option添加到第二个列表中
$city.append(opEL);
});
}
});
});
});
【JQuery的文档操作】
$(“a”).append(“b”); // 将b添加到a元素中.
$(“a”).appendTo(“b”); // 将a添加到b元素中.
$(“a”).insertBefore(“b”); // 将a元素插入到b元素之前
$(“a”).insertAfter(“b”); // 将a元素插入到b元素之后
$(“a”).remove(); // 将a元素移除
在数据的编辑的页面中，有已选的商品和未有的商品两个下拉列表，可以左右进行选择
JQuery的选择器和文档操作.
<script>
$(function(){
// 将左侧选中的option添加到右侧
$("#add").click(function(){
$("#selectLeft option:selected").appendTo("#selectRight");
});
// 将左侧所有的option添加到右侧
$("#addAll").click(function(){
$("#selectLeft option").appendTo("#selectRight");
});
// 双击事件
$("#selectLeft").dblclick(function(){
$("option:selected",this).appendTo("#selectRight");
});
});
</script>
原文：http://www.cnblogs.com/Jixiangwei/p/7056418.html