jquery
jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。
特点
- 动态特效
- AJAX
- 通过插件来扩展
- 方便的工具 - 例如浏览器版本判断
- 渐进增强
- 链式调用
- 多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)
动态特效
较快速度的淡入
$("#msg").show("fast");
较慢速度的淡出
$("#msg").hide("slow");
淡入淡出
$("#msg").fadeIn();
$("#msg").fadeOut();
带参数的淡入淡出
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
滑动
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
遍历函数
jquery提供了很多遍历的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是jquery对象。使一个Dom对象成为一个jquery对象很简单,通过下面一些方式(只是一部分):
代码
var a = $("#cid");
var b = $("<p>hello</p>");
var c = document.createElement("table");
var tb = $(c);
实例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<div>11111111</div>
<div>22222222222</div>
<div>333333333333
<div id="div31">313131313131</div><span>323232</span>
<div>3232323232</div>
</div>
</div>
<input type="text" size="100"/>
<br/>
<button onclick="getinfo()">获取子元素</button>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
function getinfo(){
// next 找兄弟元素
// $("input[type='text']").val($("div").next().length);
$("div").next().each(function(i){
alert(i+"====="+this.innerHTML);
});
//找子元素
// $("input[type='text']").val($('div div').length); // 4
// $("input[type='text']").val($('#div1>div').length); // 3
// $("input[type='text']").val($('#div1').children('div').length); // 3
// 通过子元素来找父元素
// $("input[type='text']").val($("#div31").parent().html());
// $("input[type='text']").val($("#div31").parents().html());
// 匹配含有子元素或者文本的元素
// $("input[type='text']").val($('#div31:parent').html());
}
// jQuery ====> $
// var obody = document.body; // js下DOM元素
// var jqbody = $(obody); // 将DOM元素转换为jQuery的对象
// jqbody = $("body");
</script>
</body>
</html>