jQuery学习
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
常用的语法：
$(this).hide() 隐藏当前的HTML元素
$(“test”).hide() 隐藏id为test的元素
$(“p”).hide() 隐藏所有<p>元素
$(“.test”).hide() 隐藏所有class=“test”的元素
所有jQuery函数位于一个document ready函数中,为了防止文档在完全加载之前就运行jquery代码而导致操作失败
$(document).ready(function(){
--- jQuery functions go here ----
});
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。 根据元素名匹配
$("p.intro") 选取所有 class="intro" 的 <p> 元素。根据类名.class
$("p#demo") 选取所有 id="demo" 的 <p> 元素。根据ID #id
$(“div,span,p.myClass”) 选取匹配到的元素合并后一起返回
层次选择器：
$(“div span”) 选取<div>里的所有<span>元素
$(“div > span”) 选择div下元素名是span的子元素
$(‘.one + div ’)选取class 为one的下一个div兄弟元素 可以用next()方法代替：
$(“.one”).next(“div”);
$(‘#two ~ div ’) 选取id为two的元素后面的所有div兄弟元素 siblings,这个可以用nextAll()代替： $(“#prev”).nextAll(“div”);
过滤选择器：
都以一个冒号 : 开头
可以分为：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤
基本过滤：
:first
:last
:not(selector) 取出所有与选择器匹配的元素 $(“input:not(.myClass)”)
:even() 选取索引为偶数的元素，索引从0开始
:odd()
:eq(index) 选取索引等于index的元素，索引从0开始 $(“input:eq(1)”)
:gt(index) 选取索引大于index的元素而不包含index greater
:lt(index) 小于index less
:header 选取所有标题元素<h1><h2><h3>
:animated 选取当前正在执行动画的所有元素
内容过滤选择器： 主要体现在他所包含的子元素或文本内容上
:contains(text) 选取含有文本内容为text的元素
:empty 选取不包含子元素或者文本的空元素
:has(selector)选取含有选择器所匹配的元素的元素 $(“div:has(p)”)选取含有p元素的div元素
:parent 选取含有子元素或者文本的元素
可见性过滤选择器：
:hidden 选取所有不可见的元素 $(“:hidden”)选取所有不可见的元素，包含<div style=”display:none;”> 文本隐藏域<input type=”hidden”>和visibility:hidden之类的元素。如果只想选择input元素 $(“input:hidden”)
:visible 选取所有可见的元素
jQuery 属性选择器：
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("div[id]") 选取拥有属性id的元素。
$("div[title=test]") 选取属性title为test的div元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$(“[attribute^=value]”) 选取属性值以value开始的元素
$(“[attribute$=value]”) 以value结束
$(“div[title*=test]”) 选取属性title含有test的div元素
子元素过滤选择器：
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素，index从1开始
:first-child 选取每个父元素的第1个子元素
:last-child 选取最后一个子元素
:only-child 选取父元素中只有一个子元素的元素
$(“ul li:only-child”) 在ul中选取是唯一子元素的<li>元素
表单对象属性选择器：
$(“#form1 :enabled”); 选取表单内可用元素
$(“#form1 :disabled”); 选取不可用元素
$(“input:checked”); 选取被选中的<input>元素
$(“select :selected”); 选取所有被选中的选项元素
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
CSS选择器，可以改变元素的CSS属性：
$("p").css("background-color","red");
方法：
$("p").hide()隐藏 $("p").show() 显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed参数规定隐藏、显示的速度，slow,fast,毫秒数
callback参数是动作完成或所执行的函数名称
toggle()方法来切换hide()和show()方法
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo(speed,opacity,callback) 允许渐变为给定的不透明度（0-到1之间）
jQuery滑动方法：
slideDown(speed,callback) 向下滑动元素
slideUp(speed,callback) 向上滑动元素
slideToggle()在两个方法之间切换
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
$("button").click(function(){
$("div").animate({left:'250px'});
});
默认所有HTML元素都有一个静态位置且无法移动，如需对位置进行操作首先要把CSS position属性设置为relative，fixed或absolute 相对，确定，绝对
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
<div style="background:#98bf21;height:100px;100px;position:absolute;">
</div>
opacity：‘0.5’不透明度
使用相对值：相对于元素的当前值。+=，-=
height:'+=150px',
'+=150px'
也可以把属性的动画值设置为show,hide,toggle
先把<div>元素移到右边再增大字号：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
方法链接：chaining 允许在相同的元素上运行多条jquery命令
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
DOM （Document Object Model）文档对象类型
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
alert("Value: " + $("#test").val());
获取属性：
attr() $("button").click(function(){
alert($("#w3s").attr("href"));
});
jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
属性操作：
attr()获取和设置属性，removeAttr()删除元素属性
jQuery attr() 方法也用于设置/改变属性值。
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
实例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
添加新的 HTML 内容,插入节点
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容 appendTo()
- prepend() - 在被选元素的开头插入内容 prependTo()
- after() - 在被选元素之后插入内容 insertAfter()
- before() - 在被选元素之前插入内容 insertBefore()
删除元素/内容,删除节点
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素，清除元素的内容
remove()方法也可以传递参数来选择性的删除元素：
$(“ul li”).remove(“li[title!=菠萝]”);
也可用appendTo()方法来移动元素：
$(“ul li:eq(1)”).appendTo(“ul”);
过滤被删除的元素：
$(“p”).remove(“.italic”) 删除 class="italic" 的所有 <p> 元素：
复制节点：clone()方法
$(“ul li”).click(function(){ $(this).clone().appendTo(“ul”); })
带参数后 clone(true) 则同时复制元素中所绑定的事件
替换节点：
repalaceWhith()
replaceAll()
包裹节点：
wrap(); 是将所有的元素进行单独的包裹
wrapAll(); 是将所有匹配的元素用一个元素来包裹
wrapInner(); 是将每一个匹配元素的子内容包括文本节点包裹起来
获取和设置HTML、文本和值：
<p title="选择你喜欢的水果" class="high"><strong>你喜欢的水果是</strong> </p>
var aa = $("p").html();
alert(aa); 结果：<strong>你喜欢的水果是</strong>
设置HTML的内容：
$("p").html("<strong>这是更新后的内容</strong>");
$(“p”).text()；值显示文本值
可以使下拉框的多个选项被选中：
$("#mutiple").val(["选择2号","选择4号"]);
也可以使用attr()方法实现同样功能：
$("#mutiple option:eq(3)").attr("selected",true);
$(“[value=radio2]:radio”).attr(“checked”,true);
遍历节点：children();next();prev();siblings();closest();
var $ul = $("ul").children();
for (var i = 0,len = $ul.length;i<len;i++ ) {
alert($ul[i].innerHTML);
}
closest() :
给点击的目标元素的最近的li元素添加颜色：
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","green");
})
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("p").toggleClass("add"); 在样式之间重复切换
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
也可以在addClass()方法中规定多个类： $("div").addClass("important blue");
返回CSS属性： css(“属性名”)
$("p").css("background-color");
设置CSS属性：$("p").css("background-color","yellow");
设置多个属性：$("p").css({"background-color","yellow",”font-size”:”200%”});
$("p :eq(1)").css({"font-size":"40px",backgroundColor:"888888"});
如果在设置这些属性的时候不带引号，那么就要用驼峰式写法：如：
$("p :eq(1)").css({fontSize:"40px",backgroundColor:"#888888"});
如果带上了引号：可以写成 “font-size”也可以是” fontSize” 一般建议带上引号
offset()方法：获取在当前视窗的相对偏移，返回的对象包含两个属性，
left获取左偏移，top 获取右偏移
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法：
- width() 设置或返回元素的宽度（不包括内边距、边框、外边距）
- height()设置或返回元素的高度（不包括内边距、边框、外边距）
- innerWidth() 返回元素宽度，包括内边距
- innerHeight() 返回元素高度，包括内边距
- outerWidth()
- outerHeight()
设置指定的<div>元素宽高：
$("#div1").width(500).height(500);
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent() 返回被算元素的直接父元素，只会向上一级对DOM树遍历
- parents() 返回元素的所有祖先元素
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素
· $("span").parentsUntil("div");
向下遍历 DOM 树
children() 返回元素的所有直接子元素，只向下一级遍历
$(“div”).children(“p.1”) 返回class = 1的所有<p>元素
find() 返回 $(“div”).find(“span”) 返回<div>后代是所有<span>元素
$(“div”).find(“*”) 返回<div>的所有后代
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
var $p1 = $("li").siblings();
for (var i = 0, len = $p1.length; i < len; i++) {
alert($p1[i].innerHTML);
}
- siblings() siblings() 方法返回被选元素的所有前后同胞元素。
- nextAll()返回被选元素的所有跟随的同胞元素。
- next() 返回被选元素的下一个同胞元素，只返回一个元素。取得匹配元素后面紧邻的同辈元素。
- nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素。
- prev() 后面三个都是向前的
- prevAll()
- prevUntil()
first()方法返回元素的首个元素
$(“div p”).first();选取首个<div>元素内部的第一个<p>元素
last()返回最后一个<p>元素
图片的提示效果，鼠标移动时提示也跟着移动：
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='"+this.href+"'alt='预览图'/>" + imgTitle + "</div>";
$("body").append(tooltip);
$("#tooltip").css(
{
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
</script>
<ul>
<li><a href="../images/1.jpg" class="tooltip" title="测试图片1"><img src="../images/1.jpg" height="150px" width="150px" alt="图片1"/></a></li>
<li><a href="../images/2.jpg" class="tooltip" title="测试图片2"><img src="../images/2.jpg" height="150px" width="150px" alt="图片2"/></a></li>
</ul>
Jquery中的事件：
javascript中的 window.onload事件一次只能保存对一个函数的引用。
Jquery的$(document).ready()每次调用$(document).ready()方法都会在现有的行为上追加新的行为，会根据注册的顺序依次执行函数。
绑定事件：
<script type="text/javascript">
$(function () {
$("#panel h5.head").bind("mouseover", function () {
$(this).next().show();
});
$("#panel h5.head").bind("mouseout", function () {
$(this).next().hide();
});
})
//简写绑定事件
$(function () {
$("#panel h5.head").mouseover( function () {
$(this).next().show();
});
$("#panel h5.head").mouseout( function () {
$(this).next().hide();
});
})
</script>
<div id="panel">
<h5 class="head">测试Jquery事件绑定</h5>
<div class="content">
<ul>
<li>显示的内容</li>
<li><img src="../images/1.jpg" style="height: 270px" /></li>
</ul>
</div>
</div>
绑定多个事件：
$("#panel h5.head").bind("mouseovwe mouseout", function () {
$(this).next().toggle();
});
Jquery有两个合成事件，hover(),toggle()
hover(enter,leave) 用于模拟光标悬停事件，当光标移动到元素上时触发第一个函数，移出时触发第二个函数。
toggle(fn1,fn2,fn3…),开关的意思
$(function () {
$("#panel h5.head").toggle(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
});
})
也可以切换元素的可见状态：
$(function () {
$("#panel h5.head").toggle(function () {
$(this).addClass("highlight");
$(this).next().toggle();
}, function () {
$(this).removeClass("highliht");
$(this).next().toggle();
});
})
事件冒泡问题：
function (event) event为事件对象。
停止事件冒泡：event . stopPropagation();
阻止默认行为：event . preventDefault();
也可以使用 return false; 对上面的简写。阻止表单的提交。
事件对象的属性：
event.type 获取事件类型
event.target 获取触发事件的元素
event.PageX, event.pageY 获取鼠标当前相对于页面的坐标
event.which 鼠标单击事件中获取到鼠标的左中右键，返回1,2,3 在键盘中获取键盘的按键
移出按钮元素的上以前的注册事件：
.unbind(); 移出所有click事件
.unbind(“click”,myFun2); 删除绑定的函数2
one(type,[data],fn) 方法的结构与bind()方法类似使用方法相同
为元素绑定单击事件，只在第一次单击按钮时执行函数，之后单击不再执行
模拟操作： trigger()
$("input").trigger("focus");
触发focus事件后会执行浏览器的默认操作，使<input>元素得到焦点。
$("input").triggerHandler("focus");
只触发事件不得到焦点。
添加事件命名空间便于管理： name就是命名空间
$("#panel h5.head").bind("mouseovwe . name mouseout . name", function () {}
用Jquery做动画效果要求要在标准模式下，否则会引起动画抖动，在文件头部包含如下DTD定义：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/ xhtml1-transitional.dtd">
《锋利的Jquery》—单东林—人民邮电出版社
Jquery对表单、表格的操作及更多应用：
表单有1表单标签，2表单域，3表单按钮 三部分组成。
获取和失去焦点改变样式：
<style type="text/css">
#msg
{
height: 134px;
330px;
}
.focus
{
border:1px solid #F00;
background:#FCC
}
</style>
<script type="text/javascript">
$(function () {
$(":input").focus(function () {
$(this).addClass("focus");
}).blur(function () {
$(this).removeClass("focus");
});
})
</script>
</head>
<body>
<form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称</label>
<input id="username" type="text" />
</div>
<div>
<label for="pass">密码</label>
<input id="pass" type="password" />
</div>
<div>
<label for="msg">信息</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form>
</body>
过渡动画使文本框变大小
var $comment = $('#msg');
$('.bigger').click(function () {
if (!$comment.is(":animated")) {
if ($comment.height <= 500) {
$comment.animate({ height: "+=50" }, 400);
}
}
})
全选全不选可以用一个复选框来操作：
<input type="checkbox" id="checkedAll" />全选/取消<br />
$("#checkedAll").click(function () {
$('[name=items]:checkbox').attr('checked', this.checked);
});
反向选择：
<input type="button" id="CheckedRev" value="反¤¡ä选?" />
$("#CheckedRev").click(function () {
$('[name=items]:checkbox').each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
复选框和复选框组联动：
$('[name=items]:checkbox').click(function () {
var flag = true;
$('[name=items]:checkbox').each(function () {
if (!this.checked) {
flag = false;
}
});
$("#checkedAll").attr('checked', flag);
});
Jquery中的ajax
load()方法时Jquery中能载入远程HTML代码并插入DOM中。
load(url [,data] [,callback])
$.get(),$.post()
GET请求会将参数跟在URL后进行传递，而POST是最为HTTP消息的实体内容发送给Web浏览器。
GET传输的数据有大小限制，不能大于2KB，post理论上不受限制。
GET请求的数据会被浏览器缓存下来。
$.ajax({
type:”POST”,
url:””,
dataType:””
});
$.ajax()方法是Jquery最底层的ajax实现，因此可以用它来代替前面的所有方法。
序列化元素：
1、serialize()方法，表单元素复杂时可以将DOM元素内容序列化为字符串，用于ajax请求
2、serializeArray()方法，不是返回字符串，而是返回JSON格式的数据。
3、$.param()方法，是serialize()的核心，用来对一个数组或对象按照key/value进行序列化。
Jquery中的ajax全局事件：
ajaxStart()
ajaxStop()
如果使某个ajax请求不受全局方法的影响，可以在$.ajax参数中的 global:false