- 浏览: 5173255 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
水淼火 写道你好,我使用以后,图标不显示,应该怎么引用呢,谢谢 ...
前端框架iviewui使用示例之菜单+多Tab页布局
转自:http://blog.csdn.net/ahopedog/article/details/6272553
jQuery最简单的功能是在document中用标签名或标签ID查询dom元素,这也是许多人经常用到的方法。document就是当前页面的文档对象,document作为全局命名空间window的一个属性存在,通过window.document可以得到它的引用。默认情况下jQuery的查询是在当前文档内进行的。
而jQuery的查询功能还允许指定在其他的不同位置或范围进行查询。这是通过$()函数的第二个参数,即context指定的。
上面是jQuery查询器函数的语法。context是可选参数。
jQuery的查询范围大致分为4种(context的取值类型),分别是当前文档(document)、一个或一些dom元素、iframe或frame内嵌的文档、从一个ajax请求返回的xml文档。
下面下文使用到的2个HTML示例文件(为了代码简短,去掉了head等标签)
一、在当前文档中查询
输出:
(1) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
(2) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
(3) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
本文开始已经提过这种查询方式,上面3个查询的输出完全是一样的。
(1) context被省略时,在当前页面的文档中查询。
(2) 明确指定document,可能有些多余。
(3) window.document是引用document的另外一种方式,因为document是window的一个属性。
二、在一个或一些dom元素的子节点中查询
2.1 context是一个dom元素
输出:[div.inner, div.inner]
context指定成一个dom元素(即id=outer1的div元素),jQuery在这个dom元素的子节点中进行查找,查询结果不包括上下文dom元素
2.2 context是多个dom元素时,在每个dom元素的子节点中查询
输出:[div.inner, div.inner, div.inner]
outer是2个外层DIV的name,document.getElementsByName()返回2个外层DIV的集合,context被指定成这个值,将在2个外层div里面进行查询,然后再将查询到的dom元素组合在一起,顺序与元素在html文档中出现的顺序相同
2.3 context是包装了dom元素的jQeury对象
输出:[div.inner, div.inner]
context是jQuery对象,能实现2.1和2.2的功能。jQuery与dom节点具有等效的作用。
三、在iframe/frame内的document上查询
//此处的作用于上面的相同
var domFrame1 = document.getElementById('frame1');
var div2 = domFrame1.contentWindow.document.getElementById('content-outer');
console.log(div2);
查询iframe中加载的网页时,context需要指定成iframe.contentWindow.document
contentWindow是iframe或frame所加载的页面的window对象,而contentWindow.document则是它的文档
如果context设置了无效的对象,会自动忽略context,然后在当前文档中继续查询
四、在ajax返回的xml文档中查询
用$.ajax()向远程服务器发起对xml文件的请求,应注意dataType被指定成了xml类型,这样返回的结果才是一个 xml文档。之后的查询操作与在本地文档中的查询完全一样了。
jQuery最简单的功能是在document中用标签名或标签ID查询dom元素,这也是许多人经常用到的方法。document就是当前页面的文档对象,document作为全局命名空间window的一个属性存在,通过window.document可以得到它的引用。默认情况下jQuery的查询是在当前文档内进行的。
而jQuery的查询功能还允许指定在其他的不同位置或范围进行查询。这是通过$()函数的第二个参数,即context指定的。
jQuery(selector, [context]) $(selector, [context])
上面是jQuery查询器函数的语法。context是可选参数。
jQuery的查询范围大致分为4种(context的取值类型),分别是当前文档(document)、一个或一些dom元素、iframe或frame内嵌的文档、从一个ajax请求返回的xml文档。
下面下文使用到的2个HTML示例文件(为了代码简短,去掉了head等标签)
basic.html <body> <div id="outer1" name="outer" class="outer"> <div class="inner">a</div> <div class="inner">b</div> </div> <div id="outer2" name="outer" class="outer"> <div class="inner">c</div> </div> <iframe id="frame1" src="basic-content.html" mce_src="basic-content.html"></iframe> </body>
basic-content.html <body> <div id="content-outer" class="content-outer"> <div class="content-inner">a</div> </div> </body>
一、在当前文档中查询
var jqDiv = $('div'); console.log(jqDiv); (1) jqDiv = $('div', document); console.log(jqDiv);(2) jqDiv = $('div', window.document); console.log(jqDiv); (3)
输出:
(1) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
(2) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
(3) [div#outer1.outer,div.inner,div.inner,div#outer2.outer, div.inner]
本文开始已经提过这种查询方式,上面3个查询的输出完全是一样的。
(1) context被省略时,在当前页面的文档中查询。
(2) 明确指定document,可能有些多余。
(3) window.document是引用document的另外一种方式,因为document是window的一个属性。
二、在一个或一些dom元素的子节点中查询
2.1 context是一个dom元素
var domOuter = document.getElementById('outer1'); var jqDiv2 = $('div', domOuter); console.log(jqDiv2);
输出:[div.inner, div.inner]
context指定成一个dom元素(即id=outer1的div元素),jQuery在这个dom元素的子节点中进行查找,查询结果不包括上下文dom元素
2.2 context是多个dom元素时,在每个dom元素的子节点中查询
var domOuters = document.getElementsByName('outer'); var jqDiv3 = $('div', domOuters); console.log(jqDiv3);
输出:[div.inner, div.inner, div.inner]
outer是2个外层DIV的name,document.getElementsByName()返回2个外层DIV的集合,context被指定成这个值,将在2个外层div里面进行查询,然后再将查询到的dom元素组合在一起,顺序与元素在html文档中出现的顺序相同
2.3 context是包装了dom元素的jQeury对象
var jqOuter = $('#outer1'); var jqDiv4 = $('div', jqOuter); console.log(jqDiv4);
输出:[div.inner, div.inner]
context是jQuery对象,能实现2.1和2.2的功能。jQuery与dom节点具有等效的作用。
三、在iframe/frame内的document上查询
var jqFrame = $('iframe'); var jqDiv1 = $('div', jqFrame[0].contentWindow.document); console.log(jqDiv1);
//此处的作用于上面的相同
var domFrame1 = document.getElementById('frame1');
var div2 = domFrame1.contentWindow.document.getElementById('content-outer');
console.log(div2);
查询iframe中加载的网页时,context需要指定成iframe.contentWindow.document
contentWindow是iframe或frame所加载的页面的window对象,而contentWindow.document则是它的文档
如果context设置了无效的对象,会自动忽略context,然后在当前文档中继续查询
四、在ajax返回的xml文档中查询
$.ajax({ url:'/jsx/testcase/jquery/basic_data.xml', dataType: 'xml', success: function(ret){ var jq = $('book', ret); console.log(jq) } });
用$.ajax()向远程服务器发起对xml文件的请求,应注意dataType被指定成了xml类型,这样返回的结果才是一个 xml文档。之后的查询操作与在本地文档中的查询完全一样了。
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18621编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2456部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3446两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 18121.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7677一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1273我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3267做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1174写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3991大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2376一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7524我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2757@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2087转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3084用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1768element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9798示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6632申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5328最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5295springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10416微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
为了在用户指定的范围内生成整数,我们可以对这个浮点数进行适当的乘法和取整操作。 4. **动画效果**:jQuery提供了丰富的动画效果,例如淡入淡出、滑动等。在抽奖过程中,可能会使用这些动画效果来增强用户体验,...
在这个“jQuery在设定范围随机抽取数字”的主题中,我们将深入探讨如何利用jQuery来生成指定范围内的随机数。 首先,我们需要明白的是,尽管jQuery库本身并不直接提供生成随机数的功能,但我们可以通过JavaScript的...
在这个特定的场景中,"jQuery在设定范围随机抽取数字代码"指的是利用jQuery来实现一个功能,即在用户指定的范围内生成随机数字,并在网页上展示这一效果。这个功能常见于抽奖系统或随机选号应用中,用户可以设置一个...
这个"动态查询城市jquery"项目显然利用jQuery实现了这一功能,让用户能够方便地搜索和选择全国范围内的城市。 首先,我们要理解jQuery是如何实现动态查询的。jQuery提供了一种简单的方式来处理DOM(文档对象模型)...
JSTL中的EL(Expression Language)表达式语言提供了一种简洁的方式来访问和操作页面作用域、请求作用域等范围内的数据。EL表达式通常用于替换JSP脚本片段,提高代码的可读性和可维护性。例如,`${user.name}" />` ...
在给定的标题“jQuery设置数字范围随机取号代码”中,我们关注的是如何使用jQuery来生成指定范围内随机的数字。 在JavaScript中,生成随机数的基本方法是使用`Math.random()`函数,它返回一个0(包含)到1(不包含...
- **日期范围**:在日历应用中,用户可以选择一个日期范围来查看特定时间段内的事件。 - **星期范围**:在计划任务管理器中,用户可以设定每周的工作日或休息日。 - **月份范围**:在销售报告中,可以选择某一段时间...
在这个"jQuery在设定范围随机抽取数字代码.zip"压缩包中,我们很显然关注的是一个使用jQuery实现的功能,即在指定范围内生成随机数。这个功能可能对于抽奖系统、模拟随机行为或者任何需要随机数据的场景都十分有用。...
在SharePoint环境中添加jQuery...在实际应用中,你可能还需要根据具体需求调整Feature的Scope,确保jQuery库在正确范围内的页面生效。同时,记得在生产环境中进行测试,确保jQuery与SharePoint的其他组件和功能兼容。
JavaScript提供了`Math.random()`函数,返回0到1之间的随机数,通过适当的转换,可以生成指定范围内的随机整数。 5. **自定义函数与插件扩展**:`pjs_01.js`中的代码可能包含了自定义的函数,用于封装抽奖的整个...
jQuery 1.10.2在性能上做了诸多优化,如使用Sizzle选择器引擎提高选择器速度,以及通过缓存DOM查询结果来减少不必要的DOM遍历。 10. **版本迭代** 虽然jQuery现在已经发展到更高的版本,但1.10.2依旧是一个稳定且...
该插件支持多种图表类型,如线性图(Line Chart)用于显示趋势变化,区域图(Area Chart)可突出显示一段时间内的数据范围,饼图(Pie Chart)则适合展示各部分占比,而柱状图(Bar Chart)则可以直观地比较不同类别...
2. **限制拖动范围**:通过设置边界,限制元素只能在特定区域内拖动。 3. **与其他插件结合**:如与`jquery.event.drop`配合,实现拖放目标检测和交换功能。 总的来说,`jquery.event.drag`插件以其简洁、高效的...
6. **日历**:jQuery有多种日历插件可供选择,如`jQuery UI Datepicker`,它可以轻松地添加日期选择功能,支持自定义格式、日期范围限制等。 7. **天气预报**:要实现天气预报,通常需要从天气API获取数据,然后...
2. **DOM操作**:jQuery封装了一系列方法来操作DOM,如`append()`、`prepend()`用于在元素内部添加内容,`remove()`用于移除元素,`clone()`用于复制元素,以及`attr()`和`prop()`用于获取或设置元素属性。...
这个版本修复了若干已知问题,确保在不同浏览器环境下都能保持一致的行为,同时保持对旧版浏览器的良好支持。对于那些仍依赖于早期jQuery版本的项目,1.12.4是一个理想的选择,因为它平衡了新功能和兼容性。 在压缩...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
同时,jQuery将其自身和$符号绑定到window对象,使得用户可以在全局范围内直接调用jQuery和$。 jQuery的核心对象是jQuery和$,它们实际上是同一个对象。在源码中,可以看到这样的定义: ```javascript var jQuery =...
**jQuery DOM操作详解** 在JavaScript中,DOM(Document Object Model)是HTML和XML文档的结构化表示,jQuery库提供了一套简洁高效的API来操作DOM。本文将深入探讨jQuery中的常见DOM操作面试题,帮助理解其核心概念...
AngularJS和jQuery是JavaScript开发中的两个重要工具,它们在不同场景下发挥着各自的优点。理解并熟练掌握这两种库,对于提升前端开发效率和构建高质量Web应用至关重要。在实际项目中,开发者可能会根据需求结合使用...