jquery

jquery

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

特点

  1. 动态特效
  2. AJAX
  3. 通过插件来扩展
  4. 方便的工具 - 例如浏览器版本判断
  5. 渐进增强
  6. 链式调用
  7. 多浏览器支持,支持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>
posted @ 2017-03-18 12:57  半夏小疯子  阅读(130)  评论(0编辑  收藏  举报