当前位置：文档之家› JQuery教程 简单易懂又全面的教程

JQuery教程 简单易懂又全面的教程

JQuery教程 简单易懂又全面的教程
JQuery教程 简单易懂又全面的教程

官方网站：https://www.doczj.com/doc/7a17845810.html,

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！

下载地址：Starterkit （http://jquery.bassistance.de/jquery-starterkit.zip）

jQuery Downloads （https://www.doczj.com/doc/7a17845810.html,/src/）

下载完成后先加载到文档中，然后我们来看个简单的例子！

If you click on me, I will disappear. 【6】jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数，可以通过下面的标记把jQuery添加到网页中： 第2讲jQuery语法 【1】jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() ·美元符号定义jQuery ·选择符selector“查询”和“查找”HTML元素·jQuery 的action()执行对元素的操作 【2】【$(this).hide()：隐藏当前Html元素】 【3】【$("#test").hide()：隐藏所有 id="test" 的元素】

jQuery的起点教程(PDF版)

以下部分为原文翻译: jQuery入门指南教程 这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。 内容提要

Hello jQuery 在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function(){ //do stuff when DOM is ready }); 放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert. $(document).ready(function(){ $("a").click(function(){ alert("Hello world!"); }); }); 这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。 (译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。) 让我们看一下这些修改是什么含义。$("a")是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即），$号是jQuery“类”(jQuery"class")的一个别称，因此$()构造了一个新的jQuery对象(jQuery object)。函数click()是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法. 这里有一个拟行相似功能的代码: Link 不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样. 下面我们会更多地了解到选择器与事件. 本章的相关链接:

jquery教程

一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能. 二.前言 经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI. 如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择. 使用插件有太多的坏处: 1.不利于维护 2.增加页面大小 3.不利于成员间交流共享,具有学习成本. 4.不够健壮, 不能保证插件版本一直更新并修复所有问题. 下面就引入今天的主角:jQuery UI 三.jQuery UI jQuery UI 是jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI可以实现底层交互, 各种高级特效, 动画, 并且可定制主题. 我们可以用它轻松的构建高度交互的Web应用程序. 官方首页: https://www.doczj.com/doc/7a17845810.html,/ 下载: https://www.doczj.com/doc/7a17845810.html,/download 示例和文档: https://www.doczj.com/doc/7a17845810.html,/demos/ 皮肤: https://www.doczj.com/doc/7a17845810.html,/themeroller/ jQuery UI 的在线网站十分强大. 首先就是在下载时可以组装自己想要的功能定制下载:

并且针对各种控件不仅提供了详细的参数说明和实例, 还可以随时更换实例的皮肤: 本文主要讲解实例, 大家可以通过实例代码快速上手jQuery UI. 使用jQuery UI我们可以再不借助其他插件的情况下完成大部分页面应用, 说其是一个官方的超级UI插件也不为过. 包含所有功能的jQuery UI类库文件为188K, 启用Gzip压缩后是45K. 虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受. 目前还没有jQuery UI的中文教程. 因为本文是实战篇, 所以不会仔细讲解基础内容. 在后面的章节中我会加入jQuery UI的基础教程.争取成为中文jQuery UI第一教程. 四. 准备工作 我将所有相关的文件, 包括各种类库文件, Theme模板放置在如下路径: https://www.doczj.com/doc/7a17845810.html,/JSLib/ 此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织. 另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN 本文的实例的所有引用都使用WebConfig.ResourceServer 这个属性: public class WebConfig { public static string ResourceServer = @"https://www.doczj.com/doc/7a17845810.html,/";}五.弹出层对话框 弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景. 1. 艺龙网应用场景举例 (1) 静态提示类弹出层. 弹出层的内容是固定的. (2) 动态提示类弹出层. 弹出层内容是根据事件源变化的. (3)遮罩类弹出层. 弹出时背景变灰并不可点击. 2. 应用实例 使用jQuery UI 的Dialog 组件. 我以轻松实现上面三种效果.

Jquery基本语法

一、jQuery的基本用法: 随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名 的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等， jQuery是继prototype之后的又一个优秀的Javascript框架。它是由John Resig 于2006 年初创建 的，它有助于简化JavaScript 以及Ajax 编程。 它具有如下一些特点： 1. 代码简练、语义易懂、学习快速、文档丰富。 2. jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。 3. jQuery支持CSS1-CSS3,以及基本的xPath。 4. jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。 5. 可以很容易的为jQuery扩展其他功能。 6. 能将JS代码和HTML代码完全分离，便于代码和维护和修改。 7. 插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、 tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。 使用方法(同prototype) 在需要使用JQuery的页面中引入JQuery的js文件即可。 例如： 引入之后便可在页面的任意地方使用jQuery提供的语法。 二、学习教程及参考资料 请参照《jQuery中文API手册》和https://www.doczj.com/doc/7a17845810.html,/visual/cn/index.xml 推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用jQuery 简化Ajax 开发》(说明：以 上文档都放在了【附件】中) 三、语法总结和注意事项 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath 条件等 方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 如: 01.$("#msg").html();-->通过ID 02.$("div").html(); $("input").val(); -->通过元素名(jQuery获取的是一个集合) 03.$("div p"); -->第一行代码得到所有

标签下的元素。 04.$("div.container") -->第二行代码得到class为container的
元素 05.$("div #msg"); -->第三行代码得到
标签下面id为msg的元素。 06.$("table a",context); -->第四行代码得到context为上下文的table里面所有的连接元素。

jQuery入门教程实例

jQuery入门教程实例 这个jquery入门教程是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS 的一些常识。它包括了一个简 单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。这个指南包括了很多代码，你可以复制它们，并试着修改它们，看看产生的效果。、 下面是目录 说明 1. 安装 2. Hello jQuery 3. Find me:使用选择器和事件 4. Rate me:使用AJAX 5. Animate me(让我生动起来):使用FX 6. Sort me(将我有序化):使用tablesorter插件(表格 排序) 7. Plug me:制作您自己的插件 8. Next steps(下一步) Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事 件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了: $(document).ready(function() { // do stuff when DOM is ready }); 放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert. $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); 这样在你点击页面的一个链接时都会触发这个”Hello world”的提示。 (译者

JQuery实用教程(含语法和特效)

基本语法： $("HTML元素").action() 实例: $(this).hide(); 隐藏当前元素 $("p").hide(); 隐藏所有段落 $("p.test").hide(); 隐藏所有class="test"的段落 $("#test").hide(); 隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function(){ -------- }); 这是为了防止文档在完全加载（就绪）之前运行jQuery 代码。 下面是两种假如文档完全加载之前运行函数的话，操作失败的情况： ?试图隐藏一个不存在的元素。 ?获得未完全加载的图像的大小。 .divcss{ background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取 元素。

$("p.intro") 选取所有class="intro" 的 元素。 $("p#demo") 选取id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。 $("[href!='#']") 选取所有带有href 值不等于"#" 的元素。 $("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变HTML 元素的CSS 属性。 下面的例子把所有p 元素的背景颜色更改为红色： $("p").css("background-color","red"); 更多实例 $(this) 当前HTML 元素 $("p") 所有 元素 $("p.intro") 所有class="intro" 的 元素 $(".intro") 所有class="intro" 的元素 $("#intro") id="intro" 的第一个元素 $("ul li:first") 每个

    的第一个
  • 元素 $("[href$='.jpg']") 所有带有以".jpg" 结尾的href 属性的属性 ("div#intro .head") id="intro" 的
    元素中的所有class="head" 的元素jQuery 事件函数 jQuery 事件处理函数是jQuery 中的核心函数。 事件处理函数是当HTML 中发生事件时自动被调用的函数。 由“事件”（event）“触发”（triggered）是经常被用到的术语。

    JQuery入门、手册及教程

    浅谈JQUREY（摘自https://www.doczj.com/doc/7a17845810.html,/softwave/article/details/2070815） JQUERY手册（第七页，附教程） Jquery是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多，简单了解过。但使用上jquery 之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery 就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。 一，找到你了！ 还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的： Java代码 1.var someElement = $("#myId"); [java]view plaincopyprint? 1.var someElement = $("#myId"); 看起来比其他两个框架的要多了一个#，好，看看下面的用法： Java代码 1.$("div p");(1) 2.$("div.container")(2) 3.$("div #msg");(3)

    [java]view plaincopyprint? 1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4) 在prototype里看过这样的写法吗？第一行代码得到所有

    标签下的元素。第二行代码得到class 为container的
    元素,第三行代码得到
    标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。 如果你熟悉CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。 二，Jquery对象？ jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）： Java代码 1.var a = $("#cid");(1) 2.var b = $("hello ");(2) 3.var c = document.createElement("table"); var tb = $(c); [java]view plaincopyprint? 1.var a = $("#cid");(1) var b = $("hello ");(2) var c = document.createElement("table"); var tb = $( c); 三，代替body标签的onload 这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码： Java代码

    最全Jquery UI 教程

    最全Jquery UI 教程 jQuery Tools 是一套非常优秀的Web UI 库，包括Tab 容器，可折叠容器，工具提示，浮动层以及可滚动容器等等，可以为你的站点带来非同寻常的桌面般体验，这套工具的主要作用是显示内容，这是绝多多数站点最需要的东西。这套令人惊异的UI 库只有5.59K 大小，基于MIT 和GPL 两种许可模式。 和别的Web UI 库不同，别的UI 库很多是面向行为的，如拖放，滚动，表格排序，可拖放窗口等等，它们更适合于富Web 应用，如Email 客户端，任务管理，图片组织整理等。而jQuery Tools 主要面向内容展示，因此更适用于单纯的内容型网站。 jQuery Tools 使用也很简便，只需几行调用代码即可，其官方站点包含大量演示和调用代码可以参考。以下是该UI 库中包含的主要UI 工具介绍。 jQuery Tools / Tabs Web 上最受欢迎的UI 部件当属Tab 容器，如果没有Tab，我们的很多网页不知要多么混乱，所有用户都熟悉Tab 这种用户友好的部件，jQuery Tools / Tab 非常好用，甚至可以使用浏览器的前进后退导航按钮在Tab 间前进或后退。 jQuery Tools / Flashembed 如今JavaScript真是越来越快了，所有浏览器都在JavaScript 引擎上较量，我们会看到越来越多的基于JavaScript 的Web 部件面世，然而至少在当下，Flash 仍有其用武之地，比如播放视频。 jQuery Tools / Flashembed 可以用来在网页中加载Flash 对象，虽然类似的工具比比皆是，但Flashembed 绝对是其中最好用的一个。 jQuery Tools / Overlay Overlay （浮动层）可以用来浮动在任何HTML对象的上方，在现代Web 设计中，浮动层是一种非常有效的UI 概念，可以用来 1.着重显示你的产品。 2.显示警示信息。 3.提示用户输入。 4.以灯箱风格浏览图片库。 jQuery Tools / Overlay 可以很轻松地处理上述各种情形和各种效果。 jQuery Tools / Tooltip

    jquery

    1 你在公司是怎么用jquery的？ 答：在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊，复选框啊，表单啊，ajax啊，事件等 配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可 2 你为什么要使用jquery？ 答：因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。 3 你使用jquery遇到过哪些问题，你是怎么解决的？ 答：jquery库与其他库冲突： 1>如果其他库在jquery库之前导入的话 1.我们可以通过jquery.noconflict()将变量的$的控制权过度给其他库 2.自定义快捷键,用一个变量接住jquery.noconflict() 3.通过函数传参 2>如果jquery库在其他库之前导入就直接使用jquery 在处理一个数据问题时，发现jQuery.ajax()方法返回的值一直有问题，清除缓存后数据无误，多次测试后发现返回的值都是之前的值，并且一直未执行url(后台为JAVA，设置断点一直未进入)。在网上查找下,发现是未设置type的原因。如果没设置jQuery.ajax的type="Post"，那么ajax就会默认type="Get"，这就会导致之前数据被缓存起来。加上type="Post"，问题解决！ 4 你知道jquery中的选择器吗，请讲一下有哪些选择器？ 答：jQuery中的选择器大致分为:基本选择器，层次选择器，过滤选择器，表单选择器 5 jquery中的选择器和css中的选择器有区别吗？ 答：jQuery选择器支持CSS里的选择器， jQuery选择器可用来添加样式和添加相应的行为 CSS 中的选择器是只能添加相应的样式 6 你觉得jquery中的选择器有什么优势？ 答：简单的写法$(“#ID”) 来代替document.getElementById()函数 支持CSS1 到CSS3 选择器 完善的处理机制(就算写错了id也不会报错)

    相关主题
    文本预览
    相关文档 最新文档