`
zjx2388
  • 浏览: 1330892 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery 入门 操作手册(1)

阅读更多

官方网站:http://jquery.com    Starterkit http://jquery.bassistance.de/jquery-starterkit.zipjQuery Downloads http://jquery.com/src/

<script language="javascript" type="text/javascript">   
    $(document).ready(
function(){
        $("a").click(
function() {
        alert("Hello world!");
   });
});
<script>

     上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)$(document)的方法,表示当document全部下载完毕时执行函数。
    
在进行下面内容之前我还要说明一点$("p")$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id"p"(<span  id="p"></span>)的元素.

                                             一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpathhtml代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:

<p>one</p>
<div>
     
<p>two</p>
</div>
    <
p>three</p> 
    <href="#" id="test" onClick="jq()" >jQuery</a>


jQuery代码及功能:

function jq(){  
    alert($("div > p").html());  
}

运行:当点击idtest的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
    $("<div><p>Hello</p></div>").appendTo("body");
}

运行:当点击idtest的元素时,向body中添加“<div><p>Hello</p></div>”

$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:

<p>one</p>
  
<div>
     
<p>two</p>
  
</div><p>three</p>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($(document).find("div > p").html());
}

运行:当点击idtest的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
   $(document.body).background("black");
}

运行:当点击idtest的元素时,背景色变成黑色

$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:

<form id="form1">
     
<input type="text" name="textfield">
     
<input type="submit" name="Submit" value="提交">
</form>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){ 
   $(form1.elements ).hide(); 
}

运行:当点击idtest的元素时,隐藏form1表单中的所有元素。

$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子:

$( function(){
    $(document.body).background("black");
})

运行:当文档载入时背景变成黑色,相当于onLoad

$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:

<p>one</p>
<div>
   
<p>two</p>
</div>
<p>three</p>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    
var f = $("div"); 
    alert($(f).find("p").html()) 
}

运行:当点击idtest的元素时,弹出对话框文字为two,即div标签下p元素的内容。

each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前:

<img src="1.jpg"/>
<img src="1.jpg"/>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
   $("img").each(
function(){ 
        
this.src = "2.jpg"; });
}

运行:当点击idtest的元素时,img标签的src都变成了2.jpg

eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:

<p>This is just a test.</p>
<p>So is this</p>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("p").eq(1).html())
}

运行:当点击idtest的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:

<p>This is just a test.</p>
<p>So is this</p>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("p").get(1).innerHTML);
}

运行:当点击idtest的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
注意geteq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前:

<div id="test1"></div>
<div id="test2"></div>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("div").index(document.getElementById('test1')));
    alert($("div").index(document.getElementById('test2')));
}

运行:当点击idtest的元素时,两次弹出alert对话框分别显示01
size()   Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:

<img src="test1.jpg"/>
<img src="test2.jpg"/>
<href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("img").length);
}

运行:当点击idtest的元素时,弹出alert对话框显示2,表示找到两个匹配对象 

  

分享到:
评论

相关推荐

    jQuery入门手册1.3.2

    **jQuery入门手册1.3.2** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个“jQuery入门手册1.3.2”是针对初学者的指导性资料,旨在帮助读者快速...

    jQuery使用手册 jquery入门教程

    jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...

    jQuery入门手册

    ### jQuery入门手册精要 #### 一、jQuery简介与优势 **jQuery** 是一款轻量级的 JavaScript 库,由 John Resig 在2006年1月创立,旨在简化 HTML 文档遍历、事件处理、动画以及 Ajax 交互开发。它的核心代码不到...

    jquery入门手册及API(打印经典)[收集].pdf

    《jQuery入门手册及API》是一本面向初学者的指南,旨在帮助读者快速掌握jQuery这一强大的JavaScript库。jQuery简化了JavaScript的许多复杂操作,特别是在CSS选择、DOM操作、事件处理和AJAX方面。以下是对该书内容的...

    jquery入门手册及API

    这个入门手册旨在帮助初学者理解 jQuery 的核心概念和使用方法。 首先,jQuery 的核心部分是其选择器功能,它允许开发者使用 CSS 选择器、XPath 或 HTML 代码来选取页面上的元素。例如,`$("a")` 会选择所有的 `&lt;a&gt;...

    jquery经典学习手册

    **jQuery经典学习手册** jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能而深受开发者喜爱。本手册将带你逐步深入了解jQuery,从基础到高级,让你全面掌握这个强大的工具。 ### 一、jQuery简介 ...

    jquery操作手册中文版

    这个“jQuery 操作手册中文版”是初学者入门和进阶的宝贵资源,包含了丰富的 API、函数、选择器等内容,帮助开发者快速理解和掌握 jQuery。 **jQuery 的核心概念** 1. **选择器**: jQuery 的选择器类似于 CSS,...

    jquery学习手册,30分钟入门

    jQuery 是一个著名的 JavaScript 库,由 John Resig 在2006年初创建,它极大地简化了DOM操作和Ajax交互,适合新手和经验丰富的开发者。jQuery 的核心理念是使代码更加简洁、可读和可重用,减少开发者的重复劳动。 ...

    jquery 中文API手册

    《jQuery中文API手册》是为...这份中文API手册不仅适合初学者入门,也是经验丰富的开发者查阅和参考的重要资源。通过深入学习,开发者可以更好地理解和利用jQuery的强大功能,构建出更加动态和交互性强的网页应用。

    APEX5入门操作手册_V1.0.doc

    这个入门操作手册,"APEX5入门操作手册_V1.0",旨在引导初学者掌握APEX 5的基本操作和开发流程。以下是手册中的关键知识点: 1. **系统需求与建议**: - 推荐使用的浏览器是Firefox或Chrome,因为Internet ...

    jquery 入门到精通 学习总结 资源

    《jQuery入门到精通学习资源概览》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合是针对jQuery从入门到精通的学习资料,旨在帮助初学者快速...

    JQuery入门手册

    ### JQuery入门手册详解 #### 一、什么是JQuery JQuery是一个非常优秀的JavaScript库,它以其轻量级的体积(压缩后仅21K大小)和强大的功能深受开发者喜爱。作为一个跨平台的JavaScript库,JQuery支持多种浏览器,...

    jQuery使用手册.pdf

    《jQuery使用手册》作为一本入门书籍,旨在帮助初学者快速掌握jQuery的基本用法和核心概念,从而在实际项目中灵活运用。 #### 核心知识点解析 ##### 1. 选择器与元素操作 jQuery最吸引人的特性之一就是其强大的...

    JQuery中文手册(.CHM)

    1. **入门指南**: 解释如何引入jQuery库,创建第一个jQuery实例,以及使用选择器的基本概念。 2. **选择器与遍历**: 详述jQuery的各种选择器,以及如何遍历选定的元素集合。 3. **DOM操作**: 描述如何添加、删除、...

    jQuery入门教程(很不错)

    **jQuery入门教程** jQuery,一个轻量级的JavaScript库,由John Resig在2006年创建,因其简洁易用的API而迅速流行起来。它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本教程将帮助初学者...

    jQuery手册1.4.1在线版 - 中文

    这个在线版手册不仅适合初学者入门,也对有经验的开发者在查阅特定功能时提供了便利。将其挂载在个人主页上,可以在任何时候快速查找和学习jQuery的相关知识,提升开发效率。 总的来说,jQuery 1.4.1是JavaScript...

    106个jQuery入门实例代码合集.rar

    这份"106个jQuery入门实例代码合集"是针对初学者精心编排的实践教程,旨在帮助新接触jQuery的朋友们快速掌握其基本用法和常见操作。 一、jQuery简介 jQuery是由John Resig于2006年创建的,它的核心理念是“写得更少...

    jQuery API 手册(英文版)

    首先,`index.html`通常是手册的主页面,它通常包含目录和入门指南,引导用户快速了解jQuery的基本概念和核心功能。在这个页面中,开发者可以找到关于选择器、DOM操作、事件处理、动画效果等主要内容的链接。 `ui....

    jQuery 入门指南 学习文档 范例打包 效果应用 jQuery_api

    总的来说,这个压缩包提供的资源覆盖了jQuery的基本用法、API、UI组件以及实际应用案例,非常适合初学者入门和有经验的开发者深入学习。通过这些资料,你可以掌握如何选择和操作DOM元素,处理事件,创建动画,以及...

Global site tag (gtag.js) - Google Analytics