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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
Prototype Number对象 学习
Jul 19 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
Javascript Object.extend
May 18 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
js 调用百度分享功能
Feb 27 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python中的itertools的使用详解
2020/01/13 Python
Python如何读写二进制数组数据
2020/08/01 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
物流仓储计划书
2014/01/10 职场文书
女方回门宴答谢词
2014/01/14 职场文书
后勤主管岗位职责
2014/03/01 职场文书
市场营销计划书
2015/01/17 职场文书
南京导游词
2015/02/03 职场文书
北京英语导游词
2015/02/12 职场文书
商务英语求职信范文
2015/03/19 职场文书
2015小学师德工作总结
2015/07/21 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL