`
- 浏览:
76924 次
-
<script 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>)的元素。
从以下几个内容来讲解jquery的使用:
1.核心部分
2.DOM操作
3.css操作
4.javascript处理
5.动态效果
6.event事件
7.ajax支持
8.插件程序
一、核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jquery操作
都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
为执行jquery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
alert($("div > p").html());
}
运行:当点击id为test的元素时,弹出two,即div标签下p元素的内容
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
运行:当点击id为test的元素时,向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>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
alert($(document).find("div>p").html());
}
运行:当点击id为test的元素时,弹出two,即div标签下p元素的内容
function jq(){
$(document.body).background("black");
}
运行:当点击id为test的元素时,背景色变成黑色
$(elems)
说明:限制jquery作用于一组特定的DOM元素
参数:elem:一组通过jquery对象压缩的DOM元素
例子:
为执行jquery前:
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onclick="jq()">jquery</a>
jquery代码及功能:
function jq(){
$(form1.elements).hide();
}
运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
$(fn)
说明:$(document).ready()的一个速记方式,但文档全部载入时执行函数。可以有多个 $(fun)
当文档载入时,同时执行所有函数!
参数: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>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
var f=$("div");
alert($(f).find("p").html());
}
运行:当点击id为test元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn(Function):需要执行的函数
例子:
未执行jquery前:
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
$("img").each(function(){
this.src="2.jpg";
});
}
运行:当点击id为test的元素时,img标签的src都变成了2.jpg。
ep(pos)
说明:减少匹配对象到一个单独的dom元素
参数:pos(Number):期望限制的索引,从0开始
例子:
未执行jquery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
alert($("p").eq(1).html())
}
运行:当点击id为test的元素时,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>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
alert($("p").get(1).innerHTML);
}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
注意get和eq的区别,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>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jquery前:
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jquery</a>
jquery代码及功能:
function jq(){
alert($("img").length);
}
运行:当点击id为test的元素时,弹出alert对话框分别显示2,表示找到两个匹配对象
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
jQuery入门笔记涵盖了JavaScript库jQuery的基本知识点,包括其核心概念、语法、选择器、事件处理以及页面元素操作等内容。在深入之前,我们先明确jQuery是一个高效的JavaScript库,它通过简化DOM操作、事件处理、...
一、jQuery入门 1. 引入jQuery库:通常通过在HTML文件中添加标签来引入jQuery库,如:<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>。或者,将jQuery源码复制到项目中。 2. jQuery入口函数...
《jQuery入门到精通学习资源概览》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合是针对jQuery从入门到精通的学习资料,旨在帮助初学者快速...
《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库,由 John Resig 在2006年创建,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...
本人学习jquery的代码和笔记,主要是jquery的入门知识,以及前后台数据交互。包括一个jquery的web工程和一个配置好的tomcat。jquery工程是用myeclipse10做的,如果eclipse打不开可以重新建工程,再把对应的文件拷贝...
总的来说,这个压缩包提供的资源覆盖了jQuery的基本用法、API、UI组件以及实际应用案例,非常适合初学者入门和有经验的开发者深入学习。通过这些资料,你可以掌握如何选择和操作DOM元素,处理事件,创建动画,以及...
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...
这份“jQuery自学笔记”结合“jQuery API汉化版”提供了全面而简洁的学习资源,适合初学者快速掌握jQuery的核心概念和用法。 首先,jQuery的核心理念是“写得更少,做得更多”。它的选择器机制借鉴了CSS,使得选取...
由于工作需要,所以研究了一段时间的jQuery,参考了大量的宝贵资源,所以资源回馈一下,该笔记详细,有重点,经word排版可直接打印,以方便查阅,打印出来字体应该不小的! 参考: 《jQuery基础教程》、《锋利jQuery》 王兴魁 ...
一、jQuery入门 在创建第一个jQuery程序时,需要在HTML文件中引入jQuery库。在示例中,通过`<script>`标签引用了jQuery 1.8.3版本的js文件。这允许我们在JavaScript代码中使用jQuery的功能。通常,jQuery库会放在`...
**jQuery简介** jQuery是一款高效、简洁的JavaScript库,它的出现极大地简化了JavaScript的前端开发工作。"Write Less, Do More"是jQuery的核心理念,通过简短的代码实现丰富的页面交互和动画效果。jQuery的设计...
**jQuery 快速入门:15天掌握核心概念** jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及AJAX交互等任务。本教程的目标是在15天内帮助你从零基础快速上手jQuery,从而...
- W3C School的jQuery教程:提供了详尽的jQuery教程和实例,适合初学者入门。 - jQuery API文档:官方提供的完整API文档,供开发者查阅具体方法和参数。 通过深入学习和实践这些知识点,你将能够熟练运用jQuery提升...
对于希望入门或加深对jQuery控制页面实现理解的读者来说,本篇笔记提供了丰富且详细的参考资料。需要注意的是,代码示例应当与实际的学习目标和项目需求相结合,在编写具体实现时加以灵活运用。
在第1章"jQuery开发入门"中,我们将会接触到jQuery的基本概念、核心理念以及如何开始使用这个强大的库来简化JavaScript编程。 1. **jQuery介绍**:jQuery是一个轻量级的JavaScript库,它通过封装JavaScript的DOM...
一、 JavaScript 二、 数据库单表 三、 数据库多表 四、 事务的管理 五、 JDBC 六、 JDBC连接池 七、 DBUtils ...十五、 Jquery 十六、 Redis 十七、 nginx & svn 十八、 框架基础加强 十九、 补充
JQuery入门教程,笔记式学习。希望能够帮助各位JQUERY的初学者哈。
本周公司技术讲座轮到我了,准备说说现在流行的jQuery,下面是概要提纲,关键是看custom.js,已上传源码,程序中“//##”是分段用的,大家可以根据每一段取消注释,然后找到相应的id或class名查看效果。
#### 第一章:jQuery入门 1. **什么是jQuery?** - **定义**:jQuery是一个跨平台的开源JavaScript库,其主要目标是简化HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery的核心理念是“write less, do ...