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 文档碎片
Jul 13 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 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
phpmyadmin操作流程
2006/10/09 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
Smarty模板快速入门
2007/01/04 PHP
php array_flip() 删除数组重复元素
2009/01/14 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
一个PHP的String类代码
2010/04/20 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
详细分析python3的reduce函数
2017/12/05 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python程序如何进行保存
2020/07/03 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
个人授权委托书格式
2014/08/30 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2016年公司新年寄语
2015/08/17 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python