强大的JQuery（一）--基础篇

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JQuery是一个优秀的Javascript框架，是轻量级的js库，使用jQuery将极大的提高编写javascript代码的效率,，让写出来的代码更加优雅，更加健壮。

学好了jquery，我们相当于站长了巨人的肩膀上。

我将分三篇博客为大家介绍jquery，本篇博客将主要介绍jquery的基本语法、智能感知、选择器和事件。

一、基本语法

<html>

<head>

<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

  $(this).hide();

});

});

</script>

</head>

<body>

<button type="button">Click me</button>

</body>

</html>

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

——美元符号定义 jQuery

——选择符（selector）“查询”和“查找” HTML 元素

—— jQuery 的 action() 执行对元素的操作

二、jquery智能感知

所谓”工欲善其事必先利其器“，我们在具体介绍jquery之前先介绍一个实用的小技巧--智能感知，也叫智能代码提示。

我们在以往编程中都会有智能代码提示，这一点对于基础知识掌握的还不熟练的初学者来说是一个非常必要的功能，可是无论是vs还是dreamweaer中都没有智能代码提示。

那么我们该怎么办呢？其实在vs中是有智能感知的，我们来看看是怎么做的。

1、我们新建一个网站，会发现它会自动生成一个Scripts的文件夹，里面有三个文件。

2、在html页引用vsdoc版的jquery库

    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>

3、此时再编写jquery代码看看是不是有智能提示了？

4、在独立的.js文件中启用脚本智能感知

以上方法只适用于html页中的jquery编写，那么在独立文件中是如何实现呢？

也同样非常简单，只需要在.js文件开头添入这样一段。

///<reference path="jquery-1.4.1-vsdoc.js" />

5、注意：示例中我们引入了"jquery-1.4.1-vsdoc.js"文件. 如果引用其他版本比如min版本的jQuery类库就无法启用智能提示.但是在正式环境下,。

我们必须要使用"min"版本的jquery库文件

三、jquery选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

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

1、jquery元素选择器

jquery使用css选择器来选取HTML元素。

例如：

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

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

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

2、jQuery 属性选择器

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

例如：

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

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

3、jQuery CSS 选择器

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

下面的例子把所有 p 元素的背景颜色更改为红色：

例如：

<span style="font-size:18px;"><span style="white-space:pre">	</span>$("p").css("background-color","red");</span>

四、jquery事件

jQuery 事件处理方法是 jQuery 中的核心函数。jquery的事件函数使用和javascript、c#等语言很像。

在jquery帮助文件中可以很容易查到jquery的全部事件用法。这里写一下常见的。

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件