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) 触发或将函数绑定到被选元素的鼠标悬停事件

以上就是jquery的基础知识，从上面的内容我们就可以看出，jquery比javascript确实强大了不少。下一篇博客我将为大家介绍jquery的动画效果，继续与大家感知query的强大之处。

强大的JQuery（一）--基础篇的更多相关文章

  1. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  2. 强大的JQuery（三）--操作html与遍历

    前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历. 一.jquery操作html 1.获取内容和属性 text() - 设置或返回所 ...

  3. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  4. 前端面试题目汇总摘录（JS 基础篇）

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  5. ABP框架实践基础篇之开发UI层

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...

  6. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  7. SQL Server调优系列基础篇（常用运算符总结——三种物理连接方式剖析）

    前言 上一篇我们介绍了如何查看查询计划,本篇将介绍在我们查看的查询计划时的分析技巧,以及几种我们常用的运算符优化技巧,同样侧重基础知识的掌握. 通过本篇可以了解我们平常所写的T-SQL语句,在SQL ...

  8. SQL Server调优系列基础篇（并行运算总结篇二）

    前言 上一篇文章我们介绍了查看查询计划的并行运行方式. 本篇我们接着分析SQL Server的并行运算. 闲言少叙,直接进入本篇的正题. 技术准备 同前几篇一样,基于SQL Server2008R2版 ...

  9. SQL Server调优系列基础篇（子查询运算总结）

    前言 前面我们的几篇文章介绍了一系列关于运算符的介绍,以及各个运算符的优化方式和技巧.其中涵盖:查看执行计划的方式.几种数据集常用的连接方式.联合运算符方式.并行运算符等一系列的我们常见的运算符.有兴 ...

随机推荐

  1. 8.1搜索专练DFS和BFS

    这是第一次全部做出来的依次练习了,有一些都是做过两遍了的,但是还是错了几回,更多时候我还是应该多注意下细节,就好像章爷笑我 的一样,像什么vis[]标记没清0,什么格式错误,还有什么题目没看清,还是的 ...

  2. C# 数据类型详解

    在asp.net中C#数据类型包括有值类型.简单类型.整型.布尔型.字符型.浮点型.结构类型等等,有需要学习的朋友可进入参考参考. 4.1 值类型 各种值类型总是含有相应该类型的一个值.C#迫使你初始 ...

  3. android 照相或从相册获取图片并裁剪

    照相或从相册获取图片并裁剪 在android应用中很多时候都要获取图片(例如获取用户的头像)就需要从用户手机上获取图片.可以直接照,也可以从用户SD卡上获取图片,但获取到的图片未必能达到要求.所以要对 ...

  4. HTML第五天学习笔记

    今天先是学习了基础的css样式 <html> <head> <title></title> <meta http-equiv = "co ...

  5. Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境（十六）

    今天我们继续实验Bridge方式的网络配置. Bridge的逻辑原理图如下: 上图中的“br0”就充当了一个桥的作用,主机上的物理网口eth0等根据需要加入到这个桥里面,所有虚拟机要跟外界通信都通过这 ...

  6. cocos2d-x android黑屏后返回游戏卡顿

    转自:http://blog.csdn.net/wolfking_2009/article/details/8824931 2013年5月17日更新:对于之前说的资源释放问题,cocos2d-x 2. ...

  7. C++字节对齐问题

    关于C++字节对齐问题 关于C/C++的字节对齐 这两天写解析SWF文件的程序,在结构体指针和从文件里读出来的进行转换的时候遇到一些问题,就是有一个struct A,比如: struct A { ch ...

  8. linux tar.gz zip 解压缩 压缩命令

    http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0. ...

  9. FluorineFx对于现有站点的配置

    step 1:新建一个FluorineFX网站,作为参考 step 2:在现有网站添加FluorineFX网站的相关dll引用,并拷贝console.aspx和gateway.aspx至网站根目录(最 ...

  10. [Angular2 Form] Display Validation and Error Messaging in Angular 2

    Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access ...