`
anson_xu
  • 浏览: 505907 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

jQuery一些简单用法

阅读更多
jQuery是最近比较火的一个JavaScript库,从del.icio.us/上相关的收藏可见一斑。

到目前为之jQuery已经发布到1.2.1版本,而在这之前的一个星期他们刚发布1.2版本,看看他的各个版本的 发布时间 ,不难发现他的飞速发展,每个月都在更新版本;而且不断有人开发出新的 jQuery插件 ,最近又推出了 jQuery UI 库。

jQuery于2006年一月十四号在BarCamp NYC (New York City)面世。主将 John Resig ,写有《Pro JavaScript Techniques》一书,因为效力于mozolla,据说firefox 3将包含Jquery,现在的 Jquery团队 有主要开发人员,推广人员,UI,插件开发,网站设计维护,其中3个主要开发人员分别是:两个美国人John Resig/Brandon Aaron,一个德国人Jorn Zaefferer)

下面简单介绍一下jQuery的一些特性和用法:

1.精准简单的选择对象(dom):

$('#element');// 相当于document.getElementById("element")

$('.element');//Class
$('p');//html标签
$("form > input");//子对象
$("div,span,p.myClass");//同时选择多种对象
$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
$(":input");//表单对象
$("input[name='newsletter']");//特定的表单对象
2.对象函数的应用简单和不限制:


element.function(par);

$(”p.surprise”).addClass(”ohmy”).show(”slow”)...
3.对已选择对象的操作(包括样式):

$("#element").addClass("selected");//给对象添加样式
$('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改变对象样式
$("p").text("Some new text.");//改变对象文本
$("img").attr({ src: "test.jpg", alt: "Test Image" });//改变对象文本
$("p").add("span");//给对象增加标签
$("p").find("span");//查找对象内部的对应元素
$("p").parent();//对象的父级元素
$("p").append("<b>Hello</b>");//给对象添加内容
4.支持aJax,支持文件格式:xml/html/script/json/jsonp

$("#feeds").load("feeds.html");//相应区域导入静态页内容
$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});//导入动态内容
4.对事件的支持:

$("p").hover(function () {
      $(this).addClass("hilite");//鼠标放上去时
    }, function () {
      $(this).removeClass("hilite");//移开鼠标
    });//鼠标放上去和移开的不同效果(自动循环所有p对象)
5.动画:

$("p").show("slow");//隐藏对象(慢速渐变)
$("#go").click(function(){
$("#block").animate({
    width: "90%",
    height: "100%",
    fontSize: "10em"
}, 1000 );
});//鼠标点击后宽、高、字体的动态变化
6.扩展:

$.fn.background = function(bg){
    return this.css('background', bg);
};
$(#element).background("red");
如果要为每一个jQuery 对象添加一个函数,必须把该函数指派给 $.fn,同时这个函数必须要返回一个 this(jQuery 对象)

jQuery相关

《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》第一本由jQuery的开发人员写的关于如何学习jQuery的书已经于七月面世,同时还有三本相关的书在问世当中。
jQueryCamp 2007,一个jQuery开发人员的见面会也将于10月27日在Boston召开。
VisualJquery是一个Jquery的学习和查询网站,也跟着更新到了1.1.2版本。
jQuery官网介绍翻译:

jQuery是一个以前未曾有过的JavaScript库。
他快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。

jQuery是为了改变JavaScript的编写方式而设计的。

他适合所有人:设计师、开发人员、极客、商业应用...
体积小:26.5KB(1.2.1压缩版),45.3KB(1.2.1精简版),78.6KB(1.2.1完整版)...20.7KB(1.1.2压缩版),57.9KB(1.1.2完整版)
兼容性:支持CSS 1-3和基本的XPath
跨浏览器:IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+(向后兼容)
jQuery插件:

Ajax (25)/Animation and Effects (26)/Browser Tweaks (6)/Data (17)/DOM (21)/Drag-and-Drop (6)/Events (19)/Forms (39)/Integration (12)/JavaScript (20)/jQuery Extensions (37)/Layout (23)/Media (13)/Menus (13)/Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4)

jQueryUI库:

基本的鼠标互动:拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
各种互动效果:手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)
分享到:
评论

相关推荐

    jquery简单用法大全

    **jQuery简单例子** 例如,使用jQuery实现点击按钮隐藏某元素: ```javascript $(document).ready(function() { $("#myButton").click(function() { $("#myElement").hide(); }); }); ``` 在这个例子中,当...

    jquery的几种使用方法

    本篇文章将详细探讨jQuery的几种使用方法,帮助你更好地理解和运用这一强大的工具来提升网页设计的效率和用户体验。 1. **DOM操作**:jQuery的核心功能之一就是对HTML文档对象模型(DOM)进行操作。通过选择器,如`...

    jquery easyui简单示例

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,用于快速构建功能丰富的、用户友好的 Web 应用程序。这个压缩包文件"qbldmonitor"可能包含了一个使用 jQuery EasyUI 实现的监控系统...

    jquery 简单效果源代码

    5. **AJAX交互**: jQuery 的 `$.ajax()` 和 `$.get()`, `$.post()` 方法简化了与服务器的数据交互,使得异步请求变得更简单。 6. **链式操作**: jQuery 的方法返回的是jQuery对象本身,所以可以连续调用多个方法,...

    jquery简单实例代码

    在jQuery中,操作DOM变得非常简单。例如,要添加一个新的HTML元素,可以使用`append()`或`prepend()`方法。要删除元素,使用`remove()`。修改元素内容,用`html()`, `text()`, 或 `val()`。 **事件处理** jQuery...

    jQuery.validate 用法

    本文将深入探讨jQuery.validate的使用方法以及源码解析,帮助开发者更好地理解和运用这一工具。 首先,我们来了解一下jQuery.validate的基本用法。引入jQuery和jQuery.validate库后,我们可以通过调用`$("#formID")...

    jQuery简单例子

    &lt;title&gt;jQuery简单例子 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;!-- 图片元素 --&gt; 示例图片"&gt; 切换图片显示状态 &lt;script src="script.js"&gt;&lt;/script&gt; ``` 在这个例子中...

    jQuery插件 简单日期设置

    一个基本的jQuery插件通常会定义一个新的方法,这个方法接受一些参数,并在内部操作DOM元素。例如: ```javascript (function($){ $.fn.dateTimePicker = function(options) { // 插件的代码 }; })(jQuery); ```...

    jQuery简单计算器

    **jQuery简单计算器** ...通过这个jQuery简单计算器项目,初学者不仅可以掌握jQuery的基本用法,还能了解到事件处理、DOM操作和基本的计算逻辑实现。实践中不断调试和优化,有助于提升JavaScript和jQuery的实战技能。

    jquery 教程 详细解释了jquery的使用方法

    这个“jQuery 教程”旨在为初学者提供详细的jQuery使用方法。 一、jQuery特点 1. 轻量级:jQuery库文件小巧,原始版本大约几十KB,经过压缩后通常不超过18KB,这使得它在网页加载时不会增加太多负担。 2. 强大选择...

    jquery一些案列和一些选择器

    jQuery提供了`.ajax()`方法用于异步数据交互,简化了XMLHttpRequest的使用。例如,发送一个GET请求: ```javascript $.ajax({ url: "http://example.com/data", type: "GET", success: function(data) { ...

    jquery插件使用方法大全

    使用jquery实现ajax同样异常简单 代码 (1) $.get("search. do",{id:1},rend); function rend(xml){ alert&#40;xml&#41;; } (2) $.post("search. do",{id:1},rend); function rend(xml){ alert&#40;xml&#41;; } (3) $...

    一个简单的含js和jQuery的网页

    标题 "一个简单的含js和jQuery的网页" 暗示我们正在探讨一个基本的Web页面,其中包含了JavaScript和jQuery这两个重要的前端技术。JavaScript是Web开发中的基础脚本语言,用于实现网页的动态交互,而jQuery则是一个...

    JQuery的简单应用

    **jQuery的简单应用** jQuery是一个高效、简洁且强大的JavaScript库...通过学习这个项目,开发者不仅可以掌握jQuery的基本用法,还能了解到如何将jQuery与其他技术(如数据库和Ajax)结合,以构建功能丰富的Web应用。

    jquery的简单实用

    **jQuery的简单实用** jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能而备受开发者喜爱。它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互,使得网页开发变得更加高效。在...

    使用struts2+JQuery实现的简单的ajax例子

    在这个简单的Ajax例子中,我们将探讨如何整合Struts2和jQuery来实现页面无刷新的数据更新。 首先,我们需要在项目中引入Struts2和jQuery的相关依赖。Struts2通常通过Maven或Gradle添加依赖库,包括核心库、struts2-...

    jQuery的简单实现

    在本篇文章中,我们将探讨如何理解和实现一些基本的jQuery功能,以便于初学者入门。 首先,引入jQuery库是使用它的前提。在`demo.html`文件中,我们通常会在`&lt;head&gt;`标签内通过CDN(内容分发网络)或本地文件引入...

    php+jquery+ajax最简单例子

    2. jQuery:这是一个JavaScript库,极大地简化了JavaScript的使用,提供了一种更简单的方式来处理DOM操作、事件处理、动画效果和AJAX交互。jQuery的核心特性是选择器,它允许开发者快速定位并操作DOM元素。 3. Ajax...

    jquery dialog简单实现插件

    要使用jQuery Dialog,首先确保已引入jQuery库和jQuery UI库。然后,选择一个HTML元素并调用`.dialog()`方法将其转化为对话框。例如: ```html 打开对话框 ;"&gt; 这是一个基本的对话框。 $(function() { $...

    Jquery的一些工具集合

    **jQuery:一个强大的JavaScript库** jQuery是一个高效、简洁且易用的JavaScript库,它极大地简化了HTML文档遍历、事件...无论你是想要了解jQuery的基本用法,还是寻找新的功能扩展,这个压缩包都值得你去深入研究。

Global site tag (gtag.js) - Google Analytics