JQ是js函数库
- HTML 元素选取
- HTML 事件函数
- HTML 元素操作
- HTML DOM 遍历和修改
- AJAX
- JS 特效和动画
- CSS 操作
- Utilities
实例:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
JQ安装
下载 jQuery 库,使用 HTML 的 <script> 标签引用它
<head>
<script src="jquery.js" type="text/javascript" ></script>
</head>
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
JQ语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
JQ选择器
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
。。。jQuery 元素选择器
$(this).hide()
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("p").hide()
演示 jQuery hide() 函数,隐藏所有 <p> 元素。(标签名)
$("#test").hide()
演示 jQuery hide() 函数,隐藏 id="test" 的元素。(id)
$(".test").hide()
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。(类名)
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
。。。jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
。。。jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
实例:
把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");
实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
jQuery 事件函数
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常用方法
$(document).ready(function(){}) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function(){}) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function(){}) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function(){}) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function(){}) 触发或将函数绑定到被选元素的鼠标悬停事件
JQuery 元素操作(操作DOM)
jQuery 拥有可操作 HTML 元素和属性的强大方法
获取/设置内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
获取:
alert("Text: " + $("p.test").text());
设置:
$("p.test").text("Hello World!");
html() - 设置或返回所选元素的内容(包括 HTML 标记)
获取:
alert("Html: " + $("p.test").html());
设置:
$("p.test").html("<b>Hello World!</b>");
val() - 设置或返回表单字段的值
获取:
alert("获取输入框的值:" + $("input.test").val());
设置:
$("input.test").val("Hello World!");
attr() - 获取属性值
获取:
alert("链接地址是:" + $("a.test").attr("href"));
设置:
$("a.test").attr("href","http://www.baidu.com");
设置多个属性
$("a.test").attr({
"href":"http://www.baidu.com",
"id":"test2"
});
提示:
设置单个属性时,属性和值之间是用逗号隔开;
设置多个属性时,属性和值之间是用分号隔开,属性之间用逗号隔开。
text()、html()、 val()及attr() 的回调函数
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
text()、html()及val()的回调函数的写法:
$("p.test").text(function(i,origText){
return "原始值:" + origText + "新值是return后面的所有文字(index:" + i + ")";
});
提示:text()、html()及val()使用回调函数后,text()的括号中不需要输入新值,而是在回调函数中使用return返回新值;
attr()的回调函数的写法:
$("a.test").attr("href",function(i,origText){
return origText + "/index.asp";
});
提示:attr()使用回调函数后,attr()的括号中需要填写属性及回调函数,在回调函数中的return返回新的属性值;
jQuery 特效、动画(CSS样式设置)
隐藏、显示、切换,滑动,淡入淡出,以及动画
。。。隐藏和显示
$(selector).hide(speed,callback); 隐藏
$(selector).show(speed,callback); 显示
$(selector).toggle(speed,callback); 隐藏/显示切换
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
。。。淡入、淡出
$(selector).fadeIn(speed,callback); 淡入
$(selector).fadeOut(speed,callback); 淡出
$(selector).fadeToggle(speed,callback); 淡入/淡出切换
$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度(值介于 0 与 1 之间)
。。。滑动
$(selector).slideDown(speed,callback); 向下滑动
$(selector).slideUp(speed,callback); 向上滑动
$(selector).slideToggle(speed,callback); 向上/向下切换滑动
向下滑动(我的理解):先设置一个div的display:none;然后在JQ中添加向下滑动效果,在触发滑动事件时,div的display由none成block,同时div的高度逐渐变为设置的高度
。。。动画
$(selector).animate({params},speed,callback); 创建自定义动画
必需的 params 参数定义形成动画的 CSS 属性。
。可操作多个属性(必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left)
$(selector).animate({left:'250px',height:'250px'});
。可使用相对值(需要在值的前面加上 += 或 -=:)
$(selector).animate({left:'+=150px'});
。可使用预定义值(可以把属性的动画值设置为 "show"、"hide" 或 "toggle":)
$(selector).animate({heigth:'toggle'});
。可使用队列功能(逐一运行)
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
。。。停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
。。。Callback 函数(动画完成后执行的函数)
$(document).ready(function(){
$(".nav").click(function(){
$("p").hide(1000,function(){
alert('动画圆满完成');
})
});
});
。。。Chaining允许我们在一条语句上加上多个方法(在同一元素上)
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
提示:当进行链接时,代码行会变得很差。不过,jQuery 在语法上不是很严格;您可以按照希望的格式来写,包含折行和缩进。