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 在语法上不是很严格;您可以按照希望的格式来写,包含折行和缩进。