1、jQuery选择器
jQuery语法为HTML元素的选取编制的，可以对元素执行某些操作。
基础语法：
$(selector).action()
美元符号定义jQuery
选择符(selector) ”查询“和”查找“HTML元素
jQuery的action()执行对元素的操作
示例：
$(this).hide()-隐藏当前元素
$("p").hide()-隐藏当前元素p
$("p.test").hide()-隐藏所有class="test" 的段落p
$("#test").hide()-隐藏所有id="test" 的元素
20120830_01JQuery语法定义.jpg
第一段jQuery代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
$("p").hide();
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="确定" />
<p style="border:1px solid black; width:300px; height:200px; background-color:Chartreuse;"></p>
</body>
</html>
简单实例：
//$(document).ready()是一个事件，指文档加载完成之后；
//$("#btn1").click() ID绑定事件，是指点击id为btn1要发生的事；
//$(“p”).hide()类型选择器
$(document).ready(function(){
$("#btn1").click(function(){
$(“p”).hide(); //类型选择器
$("#div1").hide();//id选择器
$(".div2").hide();//类选择器
})
})
//<p class="div2" id="div1">
更多选择器
20120830_02JQuery简单例子.jpg
20120830_04JQuery和js触发事件小例子.jpg
<head>
<title></title>
<style type="text/css">
.div{border:1px solid black; width:300px; height:200px; background-color:Chartreuse;}
.smalldiv{ margin:5px 5px; width:150px; height:80px; border:1px solid blue; background-color:LightSkyBlue}
.div2{ margin:5px 5px 5px 5px; width:200px; height:120px; border:1px solid black; background-color:DeepSkyBlue; float:left;}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//$(document).ready()是一个事件，指当文档加载完成之后
$(document).ready(function () {
$("#btn1").click(function () {//id选择器
// $("p").hide(); //类型选择器
// $("#div1").hide(); //id选择器
// $(".div").hide(); //类选择器
//div3选择方法
// $("#div3").hide();
// $("#div2 #div3").hide(); //包含型选择器
// $(".div #div3").hide();
// $(".div .smalldiv").hide();
// $("div div").hide();
//序列选择
//$(".div:first").hide();//从所有的.div元素中获取第一个元素
//$(".div:last").hide();
//$(".div2:even").hide();
//$(".div2:odd").hide();
//$(".div2:eq(4)").hide();
//元素中包含abc字符串的元素
//$(".div2:contains('abc')").hide();
//$(":empty").hide();//获取没有内容的元素
//$("[myname]").hide();//根据属性名称获取元素
$("[myname='div4']").hide();
});
});
$(document).ready(function () {
$("#btn2").click(function () {
//alert($(":checked").val());
//alert($("[name='Computer']:checked").val());
alert($(":selected").val());
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="确定" />
<p class="div">这是一个段落1</p>
<p class="div">这是一个段落2</p>
<div id="div1" style="border:1px solid black; width:300px; height:200px; background-color:Chartreuse;">
这是div1</div>
<div id="div2" class="div">
<div id="div3" class="smalldiv"></div>
</div>
<div class="div2">0</div>
<div class="div2">1abc</div>
<div class="div2">2</div>
<div class="div2">3</div>
<div class="div2" myname="div4">4abc</div>
<div class="div2" myname="div5">5</div>
<div class="div2" myname="div6"></div>
<div class="div2"></div>
<div class="div2"></div>
<div style="clear:both; width:100%; height:0px;"></div>
<input type="button" id="btn2" value="获取" />
<fieldset>
<legend>表单元素</legend>
<input type="radio" name="fruit" value="apple" />苹果
<input type="radio" name="fruit" value="banana" />香蕉
<input type="radio" name="fruit" value="pear" />梨子
<input type="radio" name="fruit" value="orange" />橘子
<br />
<input type="radio" name="Computer" value="ibm" />IBM
<input type="radio" name="Computer" value="lenovo" />联想
<input type="radio" name="Computer" value="hp" />HP
<input type="radio" name="Computer" value="dell" />Dell
<br />
<select>
<option>男</option>
<option>女</option>
<option>不限</option>
</select>
</fieldset>
<input type="text" value="" />
</body>
</html>
2、jQuery事件
20120830_05jQuery事件列表.jpg
例子：
$(document).ready(function () {
$("div").mousemove(function () {
//$(this)表示当前触发事件的元素
//html()获取或者设置元素的innerHTML属性
$(this).html("x:" + event.offsetX + " y:" + event.offsetY);
//event.offsetX event.offsetY鼠标相对于当前元素左上角的位置
});
});
//$(this)表示当前触发事件的元素
//html()获取或者设置元素的innerHTML属性
html();获取html的文本。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
20120830_06.jpg
例子1：
event.x event.y 鼠标相对于文档左上角的位置：
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function onClick() {
alert("触发了单击事件");
}
$(document).ready(function () {
//$("#btn1").click(onClick);
$("#btn1").click(function () {
alert("x:" + event.x + " y:" + event.y);//event.x event.y 鼠标相对于文档左上角的位置
});
});
<style type="text/css">
.noHover{ width:300px; height:200px; background-color:CornflowerBlue; border:solid 1px blue;}
.Hover{ width:300px; height:200px; background-color:DarkSlateBlue; border:solid 1px blue;}
</style>
<body>
<div style="margin:100px 100px; border:1px solid black; padding:50px 50px;">
<input type="button" value="事件触发" id="btn1" />
</div>
</body>
</html>
event.offsetX event.offsetY鼠标相对于当前元素左上角的位置：
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").mousemove(function () {
//$(this)表示当前触发事件的元素
//html()获取或者设置元素的innerHTML属性
$(this).html("x:" + event.offsetX + " y:" + event.offsetY); //event.offsetX event.offsetY鼠标相对于当前元素左上角的位置
});
});
</head>
<body>
<div style="margin:100px 100px; border:1px solid black; padding:50px 50px;">
<input type="button" value="事件触发" id="Button1" />
</div>
</body>
</html>
hover表示鼠标移上去和移出来两个事件：
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1").hover(function () {//hover表示鼠标移上去，移出来两个事件
$(this).addClass("Hover");//元素上添加一个样式，变颜色
}, function () {
$(this).removeClass("Hover");//元素上移除一个样式，变颜色
});
});
<style type="text/css">
.noHover{ width:300px; height:200px; background-color:CornflowerBlue; border:solid 1px blue;}
.Hover{ width:300px; height:200px; background-color:DarkSlateBlue; border:solid 1px blue;}
</style>
</head>
<body>
<div id="div1" class="noHover"></div>
</body>
</html>
3、jQuery效果
效果图：
div显示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.div{ background-color:CornflowerBlue; width:300px; height:200px; border:1px solid blue; position:absolute;}
a{ margin:5px 5px;}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#aShow").click(function () {
$(".div").show(); //显示
});
</script>
</head>
<body>
<a href="#" id="aShow">显示</a>
</body>
</html>
$("#aHide").click(function () {
$(".div").hide(); //隐藏
});
-－－
<a href="#" id="aHide">隐藏</a>
$("#aShowHide").click(function () {
$(".div").toggle(2000); //自动显示或者隐藏
});
－－－
<a href="#" id="aShowHide">显示隐藏</a>
$("#aSlideToggle").click(function () {
$(".div").slideToggle(); //自动卷动显示隐藏
});
－－－
<a href="#" id="aSlideToggle">卷动显示隐藏</a>
$("#aSlideDown").click(function () {
$(".div").slideDown(); //卷动显示
});
－－－
<a href="#" id="aSlideDown">卷动显示</a>
$("#aSlideUp").click(function () {
$(".div").slideUp(); //卷动隐藏
});
－－－
<a href="#" id="aSlideUp">卷动隐藏</a>
$("#aFadeTo").click(function () {
//call back方法，每种效果执行完成后继续执行的方法
$(".div").fadeTo(5000, 0.3, function () { alert("效果执行完成"); }); //设置元素的透明度，5000表示5000ms，即在5秒钟内变到0.3透明度，透明度取值：0-1，0表示完全透明，1表示完全不透明
});
－－－
<a href="#" id="aFadeTo">透明度</a>
$("#aAnimate").click(function () {
$(".div").animate({ "left": 500, "width": 400 }, "slow");
$(".div").animate({ "top": 400 }, "slow");
$(".div").animate({ "left": 200 }, "slow");
$(".div").animate({ "top": 300 }, "slow");
});
－－－
<a href="#" id="aAnimate">动画效果</a>
DIV的显示和隐藏：
20120830_08Div的显示和隐藏.jpg
页面内移动：
20120830_0JQuery动画效果.jpg
注：2018-08-30 里面直接写 xxx.jpg页面是因为图片存在了网易博客相册里面，一次性可以批量上传，但是上传之后容易找不到，就备注了这个名字稍后加上链接，这里看起来有部分图片之前连链接都没加。