JQuery教程详解一之语法与事件

最新推荐文章于 2024-05-22 14:25:31 发布

技术引领者

最新推荐文章于 2024-05-22 14:25:31 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/qq_37022150/article/details/75315031

版权

1,什么是JQuery ?

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

2,他有哪些特性呢?

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

3,那我怎么下载使用到我的项目呢?

方式一:

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

方式二:

CDN下载，谷歌和微软的服务器都存有 jQuery 。那我使用它们有啥好处?

减少加载时间，并提高加载速度;

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

4,那下载下来我怎么使用呢?

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

实际例子有嘛?

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

5，那$括号里面都有啥?

专业名词是选择器，

5.1有哪些选择器，什么意思，怎么用，为什么用?

选择器允许您对元素组或单个元素进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

6,老说事件，那什么是事件呢?

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

请看下面例子，满足你的好奇心:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

<html></html> : 网页当然要放在html中，这个没有问题.

<head></head> : 通常会把 jQuery 代码放到 <head>部分的事件处理方法中, 这个是前提，如果这个搞不懂，我也没招，你也可以理解为约定.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

这个就很简单，前面提到的下载使用JQuery,记得仔细阅读，两种方式.

但是这个好像和我之前讲的不一样，对了，这个我得考虑这个情况，如果我得页面很多，都需要引入jquery.js，我该咋办?

那我就单独创建一个js文件，然后将下载下来的jquery，存放至此，然后在页面引入jquery.js，真是perfect。

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

$(document).ready(function(){

--- jQuery functions go here ----

});

上面这是啥意思?

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

那下面这个是啥意思?

$("button").click(function() {..some code... } )

这很明显，元素选择器点击事件触发会调用一个方法.

这个p和hide是啥意思?

$("p").hide();

p 是段落标签，正确的写法 <p></p>

我觉得hidde也可以，但是人家使用的是hide，暂且按照这个来,其实我试过hidde，它不起作用，这是他们定义的标准.

我还有个小疑问,$是什么鬼?

Jquery的简称，那能不能用别的名词代替，答案是肯定的,

JQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号

好了，废话一大堆，来理一下思路，只要记住这四步,你就可以很好的使用他了

    把所有 jQuery 代码置于事件处理函数中
    把所有事件处理函数置于文档就绪事件处理器中
    把 jQuery 代码置于单独的 .js 文件中
    如果存在名称冲突，则重命名 jQuery 库

接下来请关注 JQuery教程详解二

更多文章，请关注: http://blog.csdn.net/qq_37022150?viewmode=list