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 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
javascript复制对象使用说明
Jun 28 Javascript
javascript实现密码强度显示
Mar 18 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
vue中rem的配置的方法示例
Aug 30 Javascript
原生js实现3D轮播图
Mar 21 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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的urlencode()URL编码函数浅析
2011/08/09 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python获取任意xml节点值的方法
2015/05/05 Python
python绘图方法实例入门
2015/05/19 Python
详解python进行mp3格式判断
2016/12/23 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
wxPython实现分隔窗口
2019/11/19 Python
python numpy 反转 reverse示例
2019/12/04 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
最新的咖啡店创业计划书
2013/12/30 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
大专生自荐书范文
2014/06/22 职场文书
政风行风评议整改方案
2014/09/15 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android