jQuery 相关的学习
文章目录
1、什么是jQuery ?
javascript and Query
1、jQuery 是 Javascript 的一个库;
2、简化了JavaScript 的编程;
3、jQuery 学习比较简单;
jQuery 是一个快速、轻量级、可扩展的 js 库,它提供了易于使用的跨浏览器的API,使得
访问dom,时间处理、动画效果、ajax请求变得简单。
简化了JS对DOM的操作
2、jQuery 的相关特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
3、添加相关的 jQuery 库(网络,本地)
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
// 此处使用的是通过微软进行的网页进行加载
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
请注意,
4、jQuery 的相关语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery(jQuery 使用 $ 符号作为 jQuery 的简写。)
(考虑到其他的JavaScript框架,可以通过全名替代简写的方式来使用 jQuery,以此用来和其他的框架进行区分)
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例:
$(this).hide() – 隐藏当前元素;
$(“p”).hide() – 隐藏所有段落;
$(“.test”).hide() – 隐藏所有 class=“test” 的所有元素;
$(“#test”).hide() – 隐藏所有 id=“test” 的元素;
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码;
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
试图隐藏一个不存在的元素;
获得未完全加载的图像的大小;
5、选择器
选择器可以对数组或者单个元素进行相关的操作
5.1、元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素:
$(“p”) 选取
元素。
$(“p.intro”) 选取所有 class=“intro” 的
元素。
$(“p#demo”) 选取所有 id=“demo” 的
元素。
5.2、元素选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素
$(“[href]”) 选取所有带有 href 属性的元素;
$(“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素;
$(“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素;
(
”
[
h
r
e
f
(“[href
(“[href=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素;
5.3、属性选择器
6、事件
jQuery 是为了事件从而进行的特别设计;
jQuery 事件处理方法是 jQuery 中的核心函数;
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用;
通常会把 jQuery 代码放到 部分的事件处理方法中;
下面是 jQuery 中事件方法的一些例子:
Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
7、jQuery 效果
7.1、隐藏,显示
<!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();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
7.2、淡入淡出
jQuery Fading 方法
通过 jQuery,可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
7.3、滑动
7.4、动画
7.5、stop
7.6、callback
Callback 函数在当前动画 100% 完成之后执行;
在动画完成之后,执行相关的代码,显示想要展示的东西
$(selector).hide(speed,callback)
// 下面的没有callback , 在后面没有需要执行的函数,1000后面是空的;
$(“p”).hide(1000);
alert(“The paragraph is now hidden”);
// 下面有callback 因为在1000 的后面有调用的参数,满足callback 的相关语法参数
$(“p”).hide(1000,function(){
alert(“The paragraph is now hidden”);
});
7.7、Chaining
Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上);
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
// 在此处,同时使用了多个 jQuery 语句
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery 乐趣十足!</p>
<button>点击这里</button>
</body>
</html>
8、jQuery HTML
9、jQuery AJAX
什么是AJAX?
是一种服务器交换数据的艺术,在不重载页面的情况之下,实现了数据的动态刷新