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?
是一种服务器交换数据的艺术,在不重载页面的情况之下,实现了数据的动态刷新

版权声明:本文为CodeDoraemon原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/CodeDoraemon/p/16083304.html