- 浏览: 3454208 次
- 性别:
- 来自: 苏州
-
文章分类
最新评论
-
sonichy:
Qt5改动很多,要改改了。
基于QItemDelegate的例子1 SpinBoxDelegate -
我的主页6:
楼主,2.2子查询的分页方式:SELECT * FROM ar ...
Mysql 分页语句Limit用法 -
liguoqi:
非常感谢楼主的用心指导,工具以及图片例子都提供了 赞!
两款免费DCIOM 图像浏览软件介绍和DICOM图像例子供下载 -
liguoqi:
问下这个图片怎么解压损坏呀
两款免费DCIOM 图像浏览软件介绍和DICOM图像例子供下载 -
liguoqi:
楼主讲解的非常详细,还附带工具和图片例子,非常感谢
两款免费DCIOM 图像浏览软件介绍和DICOM图像例子供下载
原文地址:
http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html
翻译整理:Young.J
官方网站:http://jquery.com
jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!
下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)
jQuery Downloads (http://jquery.com/src/)
下载完成后先加载到文档中,然后我们来看个简单的例子!
$(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>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
jQuery代码及功能:
alert($("div > p").html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
$("<div><p>Hello</p></div>").appendTo("body");
}
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
alert($(document).find("div > p").html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
$(document.body).background("black");
}
运行:当点击id为test的元素时,背景色变成黑色 jQuery代码及功能: 运行:当文档载入时背景变成黑色,相当于onLoad。 jQuery代码及功能: 运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。 jQuery代码及功能: 运行:当点击id为test的元素时,img标签的src都变成了2.jpg。 jQuery代码及功能: 运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容 jQuery代码及功能: 运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容 jQuery代码及功能: 运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1 jQuery代码及功能: 运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象 jQuery代码及功能: 运行:先弹出对话框显示id为test的连接url,在将其url改为2.html,当弹出对话框后会看到转向到2.html 同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解! jQuery代码及功能 执行后相当于 jQuery代码及功能: 复制$("#test")然后插入到<a>后,执行后相当于 执行后相当于 jQuery代码及功能: 执行$("p")得到匹配<p>的对象,有两个,add("span")是在("p")的基础上加上匹配<span >的对象,所有一共有3个,从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合,分别是[<p>Hello</p>],[<p><span>Hello Again</span></p>],[<span>Hello Again</span>]。 jQuery代码及功能: 注意els是一个数组,这里的[ ]不能漏掉。 jQuery代码及功能: 第一个对象是以<u>的父节点的内容为对象,[ <u>two</u> ] jQuery代码及功能: $("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”
$(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>
$(form1.elements ).hide();
}
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子:
$(document.body).background("black");
})
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
var f = $("div");
alert($(f).find("p").html())
}
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前:
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
$("img").each(function(){
this.src = "2.jpg"; });
}
eq(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>
alert($("p").eq(1).html())
}
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
alert($("p").get(1).innerHTML);
}
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前:
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
alert($("img").length);
}
二:DOM操作
属性
我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多方法来进行操作,如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
herf() herf(val)
说明:对jQuery对象属性herf的操作。
例子:
未执行jQuery前
alert($("#test").href());
$("#test").href("2.html");
}
同理,jQuery还提供类似的其他方法,大家可以分别试验一下:
herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)
src() src (val) title() title (val) val() val(val)
操作
after(html) 在匹配元素后插入一段html
append(html)在匹配元素内部,且末尾插入指定html
appendTo(expr) 与append(elem)相反
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
$("a"). appendTo ($("#test"));
}
clone() 复制一个jQuery对象
$("#test").clone().appendTo($("a"));
}
wrap(elem) 将匹配对象包含在给出的对象内
<a href="#" onClick="jq()">jQuery</a>
$("p").wrap( document.getElementById('content') );
}
遍历、组合
add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
<a href="#" onClick="jq()">jQuery</a>
var f=$("p").add("span");
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
add(el) 在匹配对象的基础上在附加指定的dom元素。
$("p").add(document.getElementById("a"));
add(els) 在匹配对象的基础上在附加指定的一组对象,els是一个数组。<p>Hello</p><p><span>Hello Again</span></p>
var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了)
<p>one</p>
<span>
<u>two</u>
</span>
</div>
var f= $("u").ancestors();
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
第一个对象是以<u>的父节点的父节点(div)的内容为对象,[<p>one</p><span><u>two</u></span> ]
一般一个文档还有<body>和<html>,依次类推下去。
ancestors (expr) 在ancestors()的基础上之取符合表达式的对象
如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象:
[ <p>one</p><span><u>two</u></span> ]
children() 返回匹配对象的子介点
<div id="ch">
<span>two</span>
</div>
alert($("#ch").children().html());
}
children(expr) 返回匹配对象的子介点中符合表达式的节点
<span>two</span>
<span id="sp"<span style
发表评论
-
更换博客地址告示
2012-12-03 18:56 2607更换博客地址告示 ... -
收款主页设计
2012-11-17 11:01 0文档信息 版权声明:自由转载-非商用-非衍生- ... -
10个精选国外免费空间
2012-11-12 16:06 6344最近想申请一个免费空间,发现国内基本没有。。。。唉。 ... -
长光所考博信息
2012-09-24 14:25 2716总结一下,以后有个奔头。。搞科研的收入太微薄了。唉。。。 ... -
The file contains a character that cannot be represented in the current code pag
2012-08-17 10:17 6341vs2008 打开网上下载的Qt项目,结果编译时无法通过,出 ... -
64位操作系统,编译程序出现X86和X64的冲突
2012-08-16 20:10 0问题1:1>QtGuid4.lib(QtGuid4.d ... -
通用日志系统开发【转】
2012-08-06 15:20 42511.前言 中大型软件项 ... -
U盘制作WinPE系统【转】
2012-07-27 11:36 2534不带光驱的笔记本的网友和没有光驱的台式机的网友如何安 ... -
博客文章标题横线框
2012-06-28 11:47 0分析 ... -
触摸屏介绍
2012-05-30 16:03 1992有一个项目,需要购买一台触摸屏设备。 了解一下触摸屏的基础知 ... -
有谁知道高速大数据量无线传输技术
2012-05-28 11:53 2537有谁知道高速大数据量无线传输技术? 想了解一下无线传输 ... -
自由在博客里插入广告,有钱你不赚吗???
2012-05-25 18:37 01、一直在ITeye里写技 ... -
自由在博客里插入广告,有钱你不赚吗???
2012-05-25 15:22 6645其实这些广告也没啥意 ... -
支持javascript的博客汇总
2012-05-25 09:27 2501写这篇文章的目的主要是为想在公共博客上布置广告的朋友提供一些参 ... -
支持js代码的博客有哪些?
2012-05-25 09:20 33151、支持js代码的博客谷歌博客, 雅虎奇摩,博客大巴,jimd ... -
VS2008无法下断点调试的原因
2012-05-02 11:18 19336VS2008单步调试时出错,原来的断点处显示一个空心圆加 ... -
VS2008无法下断点调试的若干解决办法
2012-05-02 09:19 4048我使用了第一种方法,暂时恢复了断点调试。 调试程 ... -
【转】串口通讯—通信协议
2012-02-29 00:11 2653转:http://cs.nju.edu.cn/y ... -
Ankhsvn 改名出错
2012-02-16 18:32 3182总结只改变文件名字大小写的最终解决方法。 这种只需要改 ... -
C++接口实现总结
2012-02-04 14:51 32950网上的例子,稍微有点错误。我给更改一下,附件上有源码!如有错误 ...
相关推荐
jQuery 文档XML文件内英文及代码部分版权归原官方wiki所有,中文部分分属为之漫笔, Shawphy and ...关键字:jQuery, jQuery中文手册, jQuery手册, jQuery 1.4, jQuery API, jQuery 1.4.1 速查表, jQuery中文文档。
jQueryDocXML2CHM手册jQuery 文档XML文件内英文及代码部分版权归原官方wiki所有,中文部分分属为之漫笔, Shawphy and Cloudream所有。欢迎转载、替换其他XSL样式或其他形式的转载,但必须保证XML文件原样转载,保留...
JQAPI1.6_air 是jquery1.6版本,需要安装AdobeAIRInstaller.exe才可以运行。 jQueryAPI-1.41.chm 转载至 http://www.jb51.net/jiaoben/11583.html 转载的就不收分了
### DWZ富客户端框架使用手册知识点详解 #### 概述 DWZ富客户端框架是一款专为中国开发者设计的、基于jQuery的Ajax RIA(Rich Internet Applications)开源框架。其核心设计理念在于提供一种简单实用且易于扩展的...
deepseek最新资讯、配置方法、使用技巧,持续更新中
Heric拓扑并网离网仿真模型:PR单环控制,SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析:PR单环控制与Sogipll锁相环的共模电流抑制效能,#Heric拓扑并离网仿真模型(plecs) 逆变器拓扑为:heric拓扑。 仿真说明: 1.离网时支持非单位功率因数负载。 2.并网时支持功率因数调节。 3.具有共模电流抑制能力(共模电压稳定在Udc 2)。 此外,采用PR单环控制,具有sogipll锁相环,lcl滤波器。 注:(V0004) Plecs版本4.7.3及以上 ,Heric拓扑; 离网仿真; 并网仿真; 非单位功率因数负载; 功率因数调节; 共模电流抑制; 共模电压稳定; PR单环控制; sogipll锁相环; lcl滤波器; Plecs版本4.7.3及以上,Heric拓扑:离网并网仿真模型,支持非单位功率因数与共模电流抑制
2024免费微信小程序毕业设计成品,包括源码+数据库+往届论文资料,附带启动教程和安装包。 启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频:https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈:Uniapp+Vue.js+SpringBoot+MySQL。 开发工具:Idea+VSCode+微信开发者工具。
基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘:引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm工艺库:领先技术驱动的集成电路设计基础
2013年上半年软件设计师上午题-真题及答案解析
shp格式,可直接导入arcgis使用
ROS下的移动机器人路径规划算法:基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究:应用DQN、DDPG、SAC及TD3算法,ROS下的移动机器人路径规划算法,使用的是 强化学习算法 DQN DDPG SAC TD3等 ,ROS; 移动机器人; 路径规划算法; DQN; DDPG; SAC; TD3,ROS强化学习移动机器人路径规划算法研究
粒子群优化算法精准辨识锂电池二阶RC模型参数:高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数:仿真验证与SOC估计铺垫,使用粒子群优化算法(PSO)辨识锂电池二阶RC模型参数(附MATLAB代码) 使用粒子群优化算法来辨识锂离子电池二阶RC模型的参数。 将粒子群优化算法寻找到的最优参数代入二阶RC模型进行仿真,经过验证,端电压的估计误差小于0.1%,说明粒子群优化算法辨识得到的参数具有较高的精度,为锂离子电池SOC的估计做铺垫。 ,关键词:粒子群优化算法(PSO); 锂电池二阶RC模型参数辨识; MATLAB代码; 端电压估计误差; 锂离子电池SOC估计。,PSO算法优化锂电池二阶RC模型参数:高精度仿真与MATLAB代码实现
selenium环境搭建-谷歌浏览器驱动
在当今科技日新月异的时代,智慧社区的概念正悄然改变着我们的生活方式。它不仅仅是一个居住的空间,更是一个集成了先进科技、便捷服务与人文关怀的综合性生态系统。以下是对智慧社区整体解决方案的精炼融合,旨在展现其知识性、趣味性与吸引力。 一、智慧社区的科技魅力 智慧社区以智能化设备为核心,通过综合运用物联网、大数据、云计算等技术,实现了社区管理的智能化与高效化。门禁系统采用面部识别技术,让居民无需手动操作即可轻松进出;停车管理智能化,不仅提高了停车效率,还大大减少了找车位的烦恼。同时,安防报警系统能够实时监测家中安全状况,一旦有异常情况,立即联动物业进行处理。此外,智能家居系统更是将便捷性发挥到了极致,通过手机APP即可远程控制家中的灯光、窗帘、空调等设备,让居民随时随地享受舒适生活。 视频监控与可视对讲系统的结合,不仅提升了社区的安全系数,还让居民能够实时查看家中情况,与访客进行视频通话,大大增强了居住的安心感。而电子巡更、公共广播等系统的运用,则进一步保障了社区的治安稳定与信息传递的及时性。这些智能化设备的集成运用,不仅提高了社区的管理效率,更让居民感受到了科技带来的便捷与舒适。 二、智慧社区的增值服务与人文关怀 智慧社区不仅仅关注科技的运用,更注重为居民提供多元化的增值服务与人文关怀。社区内设有互动LED像素灯、顶层花园控制喷泉等创意设施,不仅美化了社区环境,还增强了居民的归属感与幸福感。同时,社区还提供了智能家居的可选追加项,如空气净化器、远程监控摄像机等,让居民能够根据自己的需求进行个性化选择。 智慧社区还充分利用大数据技术,对居民的行为数据进行收集与分析,为居民提供精准化的营销服务。无论是周边的商业信息推送,还是个性化的生活建议,都能让居民感受到社区的智慧与贴心。此外,社区还注重培养居民的环保意识与节能意识,通过智能照明、智能温控等系统的运用,鼓励居民节约资源、保护环境。 三、智慧社区的未来发展与无限可能 智慧社区的未来发展充满了无限可能。随着技术的不断进步与创新,智慧社区将朝着更加智能化、融合化的方向发展。比如,利用人工智能技术进行社区管理与服务,将能够进一步提升社区的智能化水平;而5G、物联网等新技术的运用,则将让智慧社区的连接更加紧密、服务更加高效。 同时,智慧社区还将更加注重居民的体验与需求,通过不断优化智能化设备的功能与服务,让居民享受到更加便捷、舒适的生活。未来,智慧社区将成为人们追求高品质生活的重要选择之一,它不仅是一个居住的空间,更是一个融合了科技、服务、人文关怀的综合性生态系统,让人们的生活更加美好、更加精彩。 综上所述,智慧社区整体解决方案以其科技魅力、增值服务与人文关怀以及未来发展潜力,正吸引着越来越多的关注与认可。它不仅能够提升社区的管理效率与居民的生活品质,更能够为社区的可持续发展注入新的活力与动力。
PowerSettingsExplorer.rar 电脑的电源管理软件,明白的不多说。自己搜索即可知道。
deepseek最新资讯,配置方法,使用技巧,持续更新中
deepseek最新资讯、配置方法、使用技巧,持续更新中
RabbitMQ 是一个开源的消息代理(Message Broker),实现了 AMQP(Advanced Message Queuing Protocol) 协议,用于在分布式系统中实现高效、可靠的消息传递。
西门子S7-1200与汇川PLC新通信选择:Ethernet IP通信的突破与优势,功能安全及精准同步的创新实践。,西门子S7-1200与汇川PLC通信新选择:Ethernet IP通信方案亮相,替代Modbus TCP实现更高级功能与安全控制。,西门子PLC和汇川PLC新通信选择-西门子S7-1200 1500系列PLC也开始支持Ethernet IP通信了。 这为西门子系列的PLC和包括汇川AM400 600等Codesys系PLC的通信提供了新的解决方案。 当前两者之间的通信大多采用ModBus TCP通信。 Modbus TCP和EtherNet IP的区别主要是应用层不相同,ModbusTCP的应用层采用Modbus协议,而EtherNetIP采用CIP协议,这两种工业以太网的数据链路层采用的是CSMACCD,因此是标准的以太网,另外,这两种工业以太网的网络层和传输层采用TCPIP协议族。 还有一个区别是,Modbus协议中迄今没有协议来完成功能安全、高精度同步和运功控制等,而EtherNet IP有CIPSatety、ClIP Sync和ClPMotion来
自适应无迹卡尔曼滤波AUKF算法:系统估计效果展示与特性分析(含MATLAB代码与Excel数据),自适应无迹卡尔曼滤波AUKF算法:系统估计效果展示与特性分析(含MATLAB代码与Excel数据),自适应无迹卡尔曼滤波AUKF算法 配套文件包含MATLAB代码+excel数据+学习资料 估计效果与系统特性有关,图片展示为一复杂系统估计效果 ,AUKF算法; MATLAB代码; excel数据; 学习资料; 估计效果; 系统特性。,自适应无迹卡尔曼滤波AUKF算法:MATLAB代码与学习资料