首页 > 代码库 > jquery及jquery动态的一些方法
jquery及jquery动态的一些方法
一、了解jquery
1.jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
2.jQuery 库包含以下特性：
? HTML 元素选取
? HTML 元素操作
? CSS 操作
? HTML 事件函数
? JavaScript 特效和动画
? HTML DOM 遍历和修改
? AJAX
? Utilities
3.通过下面的标记把 jQuery 添加到网页中
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>
</head>
4.有两个版本的 jQuery 可供下载：
? Production version - 用于实际的网站中，已被精简和压缩。
? Development version - 用于测试和开发（未压缩，是可读的代码）
5.CDN（内容分发网络）
6.替代方案
1??Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
2??Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
7.jQuery 语法实例
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
8.基础语法是：$(selector).action()
? 美元符号定义 jQuery
? 选择符（selector）“查询”和“查找” HTML 元素
? jQuery 的 action() 执行对元素的操作
9.jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合
10.如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
? 试图隐藏一个不存在的元素
? 获得未完全加载的图像的大小
11.实例中的所有 jQuery 函数位于一个 document ready 函数中是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
12.jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Event 函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
13.结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
? 把所有 jQuery 代码置于事件处理函数中
? 把所有事件处理函数置于文档就绪事件处理器中
? 把 jQuery 代码置于单独的 .js 文件中
? 如果存在名称冲突，则重命名 jQuery 库
14.语法
描述
$(this)
当前 HTML 元素
$("p")
所有 <p> 元素
$("p.intro")
所有 class="intro" 的 <p> 元素
$(".intro")
所有 class="intro" 的元素
$("#intro")
id="intro" 的元素
$("ul li:first")
每个 <ul> 的第一个 <li> 元素
$("[href$=‘.jpg‘]")
所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")
id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("p").css("background-color","red");把所有 p 元素的背景颜色更改为红色
二、jquery的动态
语法：$(selector).hide(speed,callback);
1.speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
2.callback 参数是 hide完成后所执行的函数名称
1.$(document).ready(function (){
$(“p”).click(function(){
$(this).hide();//隐藏p标签的内容
$(“p”).show();//显示p标签的内容
})
})
3.$(document).ready(function(){
$(“p”).toggle(); //toggle() 方法来切换 hide() 和 show() 方法。
})
4.$(document).ready(function(){
$(“#div”).fadeIn();//淡入淡出
$(“#div”).fadeOut();
$(“#div”).fadeToggle();
$(“#div”).fadeTo(“slow”,0.5);
//语法：$(selector).fadeTo(speed,opacity,callback);
opacity设置为透明度（值介于0与1之间）
})
5.
滑动
jquery slideDown()向下滑动
jquery slideUp()向上滑动
query slideToggle()切换上下滑动
6.
jQuery Callback 函数
当动画 100% 完成后，即调用 Callback 函数。
典型的语法：
$(selector).hide(speed,callback)
7.
正确（有 callback）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
8.
jQuery stop()停止滑动
语法：$(selector).stop(stopAll,goToEnd);
stopAll：规定是否应该清楚动画队列。默认是false，即停止动画；
goToEnd：规定是否立即完成当前动画，默认是false
实例：$(“#id”).click(function (){
$(“p”).stop();
})
9.
动画
方法：
jquery animate()
语法：
$(selector).animate({params},speed,callback)
params参数定义形成动画的CSS属性
实例：
$(“button”).click(function (){
$(“div”).animate({left:’250px’});
})
10.
实例：
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2200);
jquery及jquery动态的一些方法