jQuery的context属性用法实例


Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery的context属性用法。分享给大家供大家参考。具体分析如下:

此属性可以返回传给jQuery()的原始DOM节点内容,即jQuery()方法的第二个参数值。
如果jQuery()方法没有指定此参数,那么context指向当前文档(document)。
语法结构:

$("selector").context

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<style type="text/css"> 

div 

{ 

  width:150px; 

  height:150px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript">  

$(document).ready(function(){ 

  $("button").click(function(){ 

    alert($("li").context); 

  })

})

</script>  

</head> 

<body> 

<div> 

  <ul> 

    <li>测试脚本</li> 

  </ul> 

</div> 

<button>点击测试</button> 

</body> 

</html>

默认状态下,传给jQuery()的原始DOM节点是Document,在IE浏览器下会返回[object],其他浏览器返回[object HTMLDocument]。
实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  width:150px;

  height:150px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">  

$(document).ready(function(){ 

  $("button").click(function(){ 

    alert($("li",document.getElementById("myid")).context); 

  })

})

</script>

</head>

<body>

<div>

  <ul id="myid">

    <li>测试脚本</li>

  </ul>

</div>

<button>点击测试</button>

</body>

</html>

上述代码返回值是[object HTMLUListElement],但是在IE浏览器是[object]

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
jquery插件格式实例分析
Jun 16 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
jQuery中size()方法用法实例
Dec 27 #Javascript
jQuery中each()方法用法实例
Dec 27 #Javascript
jQuery.holdReady()方法用法实例
Dec 27 #Javascript
jQuery中的jQuery()方法用法分析
Dec 27 #Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 #Javascript
You might like
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
python中文编码问题小结
2014/09/28 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python连接数据库的方法
2017/10/19 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
在pycharm中实现删除bookmark
2020/02/14 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
最新教师自我评价分享
2013/11/12 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
超市总经理岗位职责
2014/02/02 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
品牌推广策划方案
2014/05/28 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
java多态注意项小结
2021/10/16 Java/Android