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 ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
js获取和设置属性的方法
Feb 20 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php代码书写习惯优化小结
2013/06/20 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
决策树的python实现方法
2014/11/18 Python
Python生成随机密码的方法
2017/06/16 Python
python机器学习之贝叶斯分类
2018/03/26 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
大门门卫岗位职责
2013/11/30 职场文书
女大学生个人求职信
2013/12/09 职场文书
大学生实习证明范本
2014/01/15 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
三年级科学教学反思
2014/01/29 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
经营场所使用证明
2015/06/19 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书