Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > 关于jQuery对象的两个属性selector和context的测试
隐藏/显示侧边栏

关于jQuery对象的两个属性selector和context的测试

2014-06-08 23:12    来源:网络    责任编辑:网络    字号【
这里是第一个FORM id为“form1” name为“form1”
用户名:  <input type="text" name="username" value="我是一个form中的用户名" />
邮箱:  <input type="text" name="email" value="sky64566@gmail.com"/>

这里是第二个FORM id为“form2” name为“form2”
用户名:  <input type="text" name="username" value="我是二个form中的用户名" />
邮箱:  <input type="text" name="email" value="sky64566@gmail.com"/>

点击我获取第一个form中的用户名的值
//jQuery代码
$("#get_first_form_username").click(function(){
alert($("[name=username]",$("#form1")[0]).val());//这里的$("#form1")[0]是将jQuery对象转换成了DOM对象了
});
 
点击我获取第二个form中的用户名的值
//jQuery代码
$("#get_second_form_username").click(function(){
alert($("[name=username]",$("#form2")[0]).val());//这里的$("#form2")[0]是将jQuery对象转换成了DOM对象了
});
 
上面两个例子,告诉我们$(expression, [context])中context的作用是限定了选择器的查找范围
接下来我们来测试一下jQuery对象的selector属性和context属性

点击我获取$("[name=username]",$("#form1")[0])的selector值
//jQuery代码
$("#test1").click(function(){
alert($("[name=username]",$("#form1")[0]).selector);
});
 
点击我获取$("[name=username]",$("#form1")[0])的context值
//jQuery代码
//在关于jQuery对象的两个属性selector和context文中我们已经告诉大家了,这个context属性是个DOM对象
//所以为了让大家更加明白context到底是啥,我们也将DOM对象的nodeName属性打印出来(也就是HTML文档中的标签名)
$("#test2").click(function(){
alert($("[name=username]",$("#form1")[0]).context);//Form object
alert($("[name=username]",$("#form1")[0]).context.nodeName);//FORM
});
 
点击我获取$("[name=username]",$("#form1"))的context值
//jQuery代码
//注意了:$("[name=username]",$("#form1"))里面的context参数已经换成了jQuery对象了看看结果会有什么不同
$("#test3").click(function(){
alert($("[name=username]",$("#form1")).context);//document
alert($("[name=username]",$("#form1")).context.nodeName);//#document
});
//为什么会这样呢?怎么context对象变成了document了呢?接着往下看
 
点击我获取$("[name=username]")的context值
//jQuery代码
//注意了:$("[name=username]")里面的context参数已经没有了看看结果会有什么不同
$("#test4").click(function(){
alert($("[name=username]").context);//document
alert($("[name=username]").context.nodeName);//#document
});
//原来,如果$(expression, [context])中的[context]参数不是DOM对象的时候,jQuery的context属性就是document对象了
 
点击我获取$("[name=username]").length值
//jQuery代码
$("#test5").click(function(){
alert($("[name=username]").length);//2
alert($("[name=username]",$("#form1")).length);//1
});
//这说明了$(expression, [context])中的[context]参数是jQuery对象的时候,这个参数同样能起到限定查找范围的作用
 
通过上面的测试,让我明白了,Context参数需要是一个正常工作的节点对象(DOM对象,而不jQuery对象)。 虽然传递jQuery对象也可以起到限定查找范围的作用,但是这样的话,那么jQuery对象的context属性就会变成整个Document对象。


更多
Tags 标签:
责任编辑:网络
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |