jQuery简介
jQuery库可以通过一行简单的标记被添加到网页中。
jQuery库是一个JavaScript函数库
Html元素选取
Html元素操作
CSS操作
Html事件函数
JavaScript特效和动画
HtmlDom遍历和修改
Ajax
Utilities
向页面添加jQuery库
jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数
<head>
<script type=”text/javascript” src=”jquery.js”</script>
</head>
在html5中不用添加type=”text/javascript”，因为javaScript 是html5以及现代所有的浏览器的默认脚本语言
实例 ：
<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>
安装下载
有两个版本可供选择：
production version,实际网站中，已被精简和压缩
Development version，用于测试和开发，未被压缩，是可读代码
另一种选择方法：（库的替代）
不自己的计算机上存放jQuery库，从Google或Microsoft加载CDN jQuery核心文件
使用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>
jQuery语法：
$(selector).action()
美元符号定义jQuery()
选择符（selector）“查询“和”查找”html元素
Jquery的action()执行对元素的操作
jQuery语法实例
$(this).hide()
隐藏当前的Html元素。
$(“#test”).hide()
隐藏id=”test“的元素
$(“p”).hide()
隐藏所有的<p>元素
$(“.test”).hide()
隐藏所有的class=”test”的元素
文档就绪函数
$(document).ready(function(){
});
为防止文档在完全加载（就绪）之前运行jQuery代码
jQuery效果
1.隐藏和显示
hide()、show()使用实例
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">展示</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
2.淡入淡出
fadeIn() ,用于淡入已隐藏的元素
fadeout()，用于淡出可见元素
fadeToggle()，在fadeIn()和fadeout()之间切换
fadeTo()，允许渐变 为给定的不透明度（值在0和1之间）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</body>
</html>
3.jQuery滑动
$(selector).slideDown(speed,callback);
可选的Speed参数规定效果时长，可以取“slow”、”fast”、毫秒
可选的callback参数是滑动完成后的所执行的函数名称。
slideDown() :向下滑动元素
slideUp()：向上滑动元素
slideToggle()：向上、向下的切换
动画
Animate()创建自定义动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'},4000); //距离左侧250px，移动时间4s
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px', //距离左侧250像素
opacity:'0.5', //透明度0.5
height:'150px', //高度
width:'150px' //宽度
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
Callback函数
在当前动画100%完成之后执行的。
$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
Chaining方法
可以把动作/方法链接起来
Chaining允许我们在一条语句中允许多个jQuery方法（在相同的元素上）
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","green")
.slideUp(2000) //注意前面有个.
.slideDown(2000);
});
});
JQuery HTML
jQuery获取
jQuery DOM操作
DOM=Document Object Model(文档对象模型)
获得内容-text（）、html()、val（）
Text() 设置或返回所选元素的文本内容
Html() 设置或返回所选元素的内容（包括HTML标记）
Val() 设置或返回表单字段的值（获取输入字段的值）
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val()+$("#passw").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value=" "></p>
<p>密码：<input type="password" id="passw" value=""></p>
<button>显示值</button>
</body>
</html>
获取属性-attr()
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>
</html>
添加新的html内容
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after（） 在被选元素之后插入内容
before（）在被选元素之前插入内容
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");//在文章的最后添加
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");//在罗列的条目里添加
});
});
删除元素
remove()—删除被选元素（及其子元素）
empty() –从被选元素中删除子元素
$("#div1").remove();
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
获取并设置CSS类
addclass() 向被选元素中添加一个或者多个类
removeclass() 向被选元素中删除一个或者多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
4.css() 设置或返回样式属性。
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
|
|
收藏
淘帖
踩
