一、概述

  • jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
  • jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
  • Query的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

二、jQuery使用

　　1、 导入js文件，可以通过从谷歌CDN库获取，<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

　　百度CDN库 <script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>，还可以从新浪等CDN库获取，具体百度吧。个人倾向于

　　从jQuery官网下载js文件，直接引用本地文件，这样在无网的情况下也是可以用的。

　　官网下载地址　：　http://jquery.com/download/

　　2、在HTML引入

<!--引进js资源-->

<html>

<head>

 　①<script type="text/javascript" src="js本地路径"></script>

    ②<script>

        $(document).ready(function(){

           // todo

         });

     </script>

</head>

<body>

</body>

</html>

这里需要注意两点：

第一点，由于浏览器加载js的顺序是按照<script>出现顺序加载的,所以要注意引入的js文件的位置要位于编写js code 之前，就像上面的顺序一样，②必须位于①后，否则会调不到方法。

第二点，如果考虑到性能加载问题，可能引入的js文件、编写的js code 可以考虑写在body的最底部

三、选择器

(这里暂时不展开,后续会详细解)

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

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

$("#demo") 选取 id为"demo" 的元素。

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

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

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

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

$("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。

四、事件处理

(这里暂时不展开,后续会详细解)

.change() 表单元素的值发生变化

.click() 鼠标单击

.dblclick() 鼠标双击

.focus() 表单元素获得焦点

.hover() 同时为mouseenter和mouseleave事件指定处理函数

.keydown() 按下键盘（长时间按键，只返回一个事件）

.keypress() 按下键盘（长时间按键，将返回多个事件）

.keyup() 松开键盘

.load() 元素加载完毕

.mousedown() 按下鼠标

.mouseout() 鼠标离开（离开子元素也触发）

.mouseover() 鼠标进入（进入子元素也触发）

.mouseup() 松开鼠标

.ready() DOM加载完成

.select() 用户选中文本框中的内容

.submit() 用户递交表单

......

五、Ajax请求

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

jQuery 异步请求方法

jQuery.ajax({

                type:'post',

                url:url,

                data:{

                        key:value,

                        key:value,

                    },

                cache:false,

                dataType:'json',

                success:function(data，textStatus) {

                     // todo

                }

 })    

参数说明
type ：请求方式，常见有：get 、post
URL ： 请求地址
data ： 请求参数，key-value 形式出现
cache ： 设置为false 不会从浏览器缓存中加载请求信息
dataType ： 返回数据类型格式，如果后台返回数据类型是json格式，可以在这里设为‘json’，这样前端直接拿到 data，就不需要再去转为json，如果没指定，得去转换。
success ：请求成功后的回调函数，通常这里就是写异步请求成功后的逻辑代码了，比如请求成功后，往table追加tr内容
error ：请求失败后的回调函数
 

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery的选择器、事件处理由于事件关系，先不展开，后续会完善。上面也是简单提下，也是我做到项目用到的知识，了解肤浅,毕竟不是专业做前端开发的。

参考在线文档 http://api.jquery.com/

推荐学习网站：

http://www.w3school.com.cn/jquery/

jQuer基础的更多相关文章

  1. jquer 基础篇 dom操作

    DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...

  2. jquer基础篇二

    jquery中的过滤选择器: 1.通过标签的内容来进行过滤 :contains(’内容关键字‘) 例: $("input").click(function () { $(" ...

  3. 前端基础------jquer y学习

    一. jquery是什么 快速,简洁,轻量级的JavaScript库(JavaScript框架)使用户可以快速的操作HTML document,实现动画效果,并方便的地为网站提供AJAX交互.文档全面 ...

  4. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  5. Web前端JQuery基础

    JQuery知识汇总 一.关于Jquery简介          jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...

  6. 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发

    01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...

  7. zepto 基础知识(3)

    41.height height() 类型:number height(value) 类型:self height(function(index,oldHeight){...}) 类型:self 获取 ...

  8. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  9. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

随机推荐

  1. [BZOJ 4103] [Thu Summer Camp 2015] 异或运算 【可持久化Trie】

    题目链接:BZOJ - 4103 题目分析 THUSC滚粗之后一直没有写这道题,从来没写过可持久化Trie,发现其实和可持久化线段树都是一样的.嗯,有些东西就是明白得太晚. 首先Orz ZYF-ZYF ...

  2. about mobile web

    http://blog.csdn.net/kavensu/article/details/8722268 http://cavenfeng.iteye.com/blog/1551516 http:// ...

  3. ThinkPHP中视图模型详解.

    很多TP的新手对于模型中的视图模型不甚了解,官方虽然有详细手册,但是对于初学者来说还是比较难以理解! 先简单说一下视图模型所能实现的功能,基本就是主表与副表之间各个字段的关联问题,实现多表关联查询,相 ...

  4. 转载爱哥自定义View系列－－Canvas详解

    上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...

  5. Android 透明Button

    1.是制作9-patch的图片,这样能够匹配文字内容的长短. 2.是指定按钮样式背景,即定制drawable的xml文件,这样做的好处不用图片做背景,节省空间. 定制透明样式的按钮.直接看代码: dr ...

  6. 在redhat6.4下安装 Oracle® Database 11g Release 2

    OS版本: 安装过程的相关信息: pdksh 安装好后根据需要设置oracle开机自启动http://www.cnblogs.com/softidea/p/3761671.html 设置环境变量NLS ...

  7. java代码转换为c# 工具

    Demo Java to C# Converter.exe 已下载到 F:\SoftWare-new\java\Java_to_CSharp_Converter.rar

  8. .net析构函数对垃圾回收的影响简析

    这里说析构函数,其实并不准确,应该叫Finalize函数,Finalize函数形式上和c++的析构函数很像 ,都是(~ClassName)的形式,但是功能上完全不一样.析构函数编译成il语言后会变成一 ...

  9. Oracle EBS 预警系统管理

    本章主要讲述配置和设置Oracle EBS预警系统管理, 它比较方便和及时发用户或系统对数据库操作情况.下面讲一操作步聚: 1.预警系统管理-->系统-->选项 名称"Unix ...

  10. VJ1061迎春舞会之三人组舞

    题目链接 推了半个下午..写的三重超时了  加了点单调队列的思想 优化了下过了 dp[i][j] 第二组的最右边的人选第J个人 那最左边肯定选第j-1个人 肯定是选相邻的 dp[i][j] = min ...