jQuery 是一个 JavaScript 库。
基础语法是:$(selector).action(),下面的action()就是hide();
$("#test").hide();隐藏所有id="test"的元素,$("this").hide();隐藏当前的html元素, $(".test").hide();隐藏所有 class="test" 的元素,$("p").hide();隐藏所有<p> 元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //文档就绪函数,防止文档在完全加载(就绪)之前运行 jQuery 代码。
$("button").click(function() //click()属于触发的事件函数
{ $(".test").hide(); }); //隐藏所有 class="test" 的元素。
$("p").css("background-color","red"); 把所有 p 元素的背景颜色更改为红色。
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
使用 Google 的 CDN
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head>
使用 Microsoft 的 CDN
<head> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
提示:使用谷歌或微软的 jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$this.parent() 获得当前匹配元素集合中每个元素的父元素
$this.children() 方法返回匹配元素集合中每个元素的子元素
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red"); 把所有 p 元素的背景颜色更改为红色。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
单独文件中的函数
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。(通过 src 引用文件):
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 事件
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 点击事件 |
$(selector).dblclick(function) | 双击事件 |
$(selector).focus(function) | 获得焦点事件 |
$(selector).mouseover(function) | 鼠标悬停事件 |
jQuery hide() 和 show()
$(selector).hide(speed,callback); $(selector).show(speed,callback);
实例
$("button").click(function(){
$("p").hide(1000); //1000就是1秒,隐藏的速度
});
jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
实例
$("button").click(function(){ $("p").toggle(); });
jQuery Fading 方法
- $(selector).fadeIn(speed,callback); 淡入 例子:$("#div1").fadeIn(); .fadeIn("slow"); .fadeIn(3000);
- $(selector).fadeOut(speed,callback); 淡出
- $(selector).fadeToggle(speed,callback); 切换
- $(selector).fadeTo(speed,opacity,callback); 改变不透明度
jQuery 滑动方法
- $(selector).slideDown(speed,callback);
- $(selector).slideUp(speed,callback);
- $(selector).slideToggle(speed,callback);
jQuery 动画 - animate() 方法 创建自定义动画。
$(selector).animate({params},speed,callback);
实例
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', height:'+=150px' 使用相对值也可 height:'toggle' 让高度收缩,再次点击展开 width:'150px' width:'-=50px' 负的相对值 }); });
提示:animate() 方法几乎可以操作所有 CSS 属性!不过,使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用队列功能
如果编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
$("button").click(function(){ var div=$("div"); 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"); });
jQuery stop() 方法 停止动画或效果,适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
stopAll 清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
goToEnd 立即完成当前动画。默认是 false。
实例 1
jQuery Callback 函数 当动画 100% 完成后,调用 Callback 函数。
$(selector).hide(speed,callback)
错误(没有 callback),alert在动画完成前就跳出提示框了
$(document).ready(function(){$("button").click(function(){$("p").hide(2000);alert("The paragraph is now hidden");});});正确(有 callback),alert在动画完成后才跳出提示框
jQuery 方法链接
提示:链接一个动作,您只需简单地把该动作追加到之前的动作上。这样的话,浏览器就不必多次查找相同的元素。
例子 1
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery DOM 操作 DOM = Document Object Model(文档对象模型)
用于 DOM 操作的 jQuery 方法:获得内容+属性 http://www.w3school.com.cn/jquery/jquery_dom_get.asp
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() - 获取属性
jQuery DOM 操作
jQuery添加新的 HTML 内容
- append() - 在结尾插入内容 $("p").append("<b>Appended text</b>. ");
- prepend() - 在开头插入内容 $("ol").prepend("<li>Prepended item</li>"); //给列表加添加项,需要在<body>中建立列表
- after() - 在被选元素之后插入内容 $("img").after("Some text after");
- before() - 在被选元素之前插入内容 $("img").before("Some text before");
jQuery删除元素/内容
- remove() - 删除被选元素(及其子元素) $("#div1").remove(); $("p").remove(".italic"); 删除 class="italic" 的元素
- empty() - 删除子元素 $("#div1").empty();
- - addClass() - 添加一个或多个类 $("h1,h2,p").addClass("important blue"); http://www.w3school.com.cn/tiy/t.asp?f=jquery_dom_addclass2
- - removeClass() - 删除一个或多个类 $("h1,h2,p").removeClass("blue");
- - toggleClass() - 切换添加/删除类
- - css() - 返回样式属性 $("p").css("background-color"); 返回首个匹配元素的 background-color 值 http://www.w3school.com.cn/tiy/t.asp?f=jquery_css_getcolor
-
- css() - 设置样式属性 $("p").css({"color":"red","font-size":"200%"}); 设置多个CSS属性(使"p" 元素变为红色,再变大200%)
- - width() 设置或返回元素的宽度(不包括内边距、边框或外边距)$("#div1").width()
- - height() 设置或返回元素的高度(不包括内边距、边框或外边距)$("#div1").height()
- - innerWidth() 返回元素的宽度(包括内边距) $("#div1").innerWidth()
- - innerHeight() 返回元素的高度(包括内边距) $("#div1").innerHeight()
- - outerWidth() 返回元素的宽度(包括内边距、边框) $("#div1").outerWidth()
- - outerHeight() 返回元素的高度(包括内边距、边框) $("#div1").outerHeight()
- - outerWidth(true) 返回元素的宽度(包括内边距、边框和外边距) $("#div1").outerWidth(true)
- - outerHeight(true) 返回元素的高度(包括内边距、边框和外边距) $("#div1").outerHeight(true)
-
返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:$(document).height() $(document).height()
$(window).width();$(window).height();
遍历,意为“移动”,根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素。
下图展示了一个家族树。通过 jQuery 遍历,从被选(当前的)元素开始,在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。
这种移动被称为 对 DOM 进行遍历。
- <div> 元素是 <ul> 的父元素,是所有内容的祖先。<ul> 元素是 <li> 的父元素, <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素, <div> 的后代。<span> 元素是 <li> 的子元素, <ul> 和 <div> 的后代。
- 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素, <div> 的后代。<b> 元素是<li> 的子元素, <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞(有相同的父元素)。
提示:祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
向上遍历 DOM 树
- parent() $("span").parent("ul").css({"color":"red"}); 找到<span>的直接父元素,并且它是 <ul> ,显示成红色;
- parents() $("span").parents().css({"color":"red"}); 找到<span>的所有祖先,一路向上直到 根元素 (<html>),显示成红色;
- parentsUntil() $("span").parentsUntil("div").css({"color":"red"}); 返回介于<span> 与 <div>之间的所有祖先元素 ;http://www.w3school.com.cn/tiy/t.asp?f=jquery_parentsuntil
向下遍历 DOM 树
- children() $("div").children("p.1").css({"color":"red"}); 找到<span>的直接子元素,并且它是<p class="1">p,显示成红色;
- find() $("div").find("span").css({"color":"red"}); 找到<div>所有后代,并且它是 <span>,显示成红色 ;
- $("div").find("*").css({"color":"red"});找到<div>的所有后代,显示成红色;
水平遍历 DOM 树
- siblings() $("h2").siblings("p"); 找到<h2>的所有同胞元素,并且它是 <p> ;
- next() $("h2").next(); 返回 <h2> 的下一个同胞元素;
- nextAll() $("h2").nextAll(); 返回 <h2> 的所有跟随的同胞元素;
- nextUntil() $("h2").nextUntil("h6"); 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素;http://www.w3school.com.cn/tiy/t.asp?f=jquery_nextuntil
- prev() 逆向,向上(上一个同胞元素)
- prevAll() 逆向,向上
- prevUntil() 逆向,向上
jQuery遍历—过滤
- first() $("div p").first(); 选取首个 <div> 元素内部的第一个 <p> 元素; 注意,$()中填了<div> <p>两个元素;
- last() $("div p").last(); 选取最后一个 <div> 元素内部的最后一个 <p> 元素;
- eq() $("p").eq(1); 选取索引号为 1的<p> 元素;http://www.w3school.com.cn/tiy/t.asp?f=jquery_eq
- filter() $("p").filter(".intro"); 选取类名= intro 的所有 <p> 元素;
- not() $("p").not(".intro"); 选取类名=! intro 的所有 <p> 元素;