jQuery选择器this通过onclick传入方法以及Jquery中的this与$(this)初探，this传处变量等
2013-10-08 13:51
771 查看
起初以为this和$(this)就是一模子刻出来。但是我在阅读时，和coding时发现,总不是一回事。
view plainprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
</script>
<script type="text/javascript">
$(document).ready(function(){
$("span").click(function(){
alert($(this).html()); //把DOM的this对象包装成jq对象
});
});
</script>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
<span>ddd</span>
<select name="btn" id="btn" >
<option value="1">日志标题</option>
<option value="2">日志全文</option>
<option value="3">评论引用</option>
<option value="4">所有留言</option>
<option value="5">页面搜索</option>
</select>
<script type="text/javascript">
$("#btn").bind("click",function(){
alert($(this).val());
})
$("#btn").click(function(){
alert($(this).html()); //把DOM的this对象包装成jq对象
});
</script>
</body>
http://neatstudio.com/show-833-1.shtml
javascript中onclick(this) 中的this指当前什么东西？
this就是当前标签本身
onclick=xxx(this)表示一个单击事件，来进行调用xxx(this)这个JavaScript函数。而xxx(this)函数中的this表示你要进行单击对象的本身。
把this当做参数传到函数中去,实践Ok:
view plainprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
</script>
<button id="12" onclick="test(this)" name="button">ccc</button>
<script type="text/javascript">
function test(which){
//which这个参数不要写成this
alert($(which).attr("id"));
}
</script>
</body>
于是最上面那个可以用onclick事件来传入到函数中，并用juqury来进行操作，如下实践Ok：
view plainprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
</script>
</head>
<body>
<select name="btn" id="btn" onclick=thisTestJquery(this)>
<option value="1">日志标题</option>
<option value="2">日志全文</option>
<option value="3">评论引用</option>
<option value="4">所有留言</option>
<option value="5">页面搜索</option>
</select>
<script type="text/javascript">
function thisTestJquery(th) {
//th 这个参数不要写成this
alert($(th).html());
alert($(th).val());
//两种获取ID的方法
console.log(th.id);
console.log($(th).attr("id"));
}
</script>
</body>
点击后，结果如下：
alert($(th).html());
结果：
<option value="1">日志标题</option>
<option value="2">日志全文</option>
<option value="3">评论引用</option>
<option value="4">所有留言</option>
<option value="5">页面搜索</option>
alert($(th).val());
结果：1
而两种this获取Id值是这样的，实践也OK，如下：
view plainprint?
console.log(th.id);
console.log($(th).attr("id"));
对于多个id的按钮下进行click时，查找是哪个id值被点了，如下，但是有发ajax后，就不能在ajax里去写this了，那就是ajax那个this了，只能传入，如下所示：
view plainprint?
$("#exeall,#exe32,#exe64").click(function(){
para.type = this.id.substr(3);//这样取是Ok的：this.id
console.log($(this).id);//不能取到想要的Id
console.log(this.id);//日志打印出来Ok
var selfObj = this;//这样做才能传入到get里去。
$.get("/php/cgi/execGray.php",para,function(data){
self.done = false;
var obj = eval('('+data+')');
if(obj.code == -2)
{
console.log(selfObj.id);
}
}
})
通过this传入变量：
在<a 中实现Js函数的this调用：
view plainprint?
<a href="javascript:void(0);" onclick="modifyRequest(this)" data=\''+JSON.encode(requestObj)+'\'>' + requestObj.f_RequestCode + '</a>
函数原型：
function modifyRequest(obj){
var requestData = eval('('+$(obj).attr('data')+')');
......
}
view plainprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
</script>
<script type="text/javascript">
$(document).ready(function(){
$("span").click(function(){
alert($(this).html()); //把DOM的this对象包装成jq对象
});
});
</script>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
<span>ddd</span>
<select name="btn" id="btn" >
<option value="1">日志标题</option>
<option value="2">日志全文</option>
<option value="3">评论引用</option>
<option value="4">所有留言</option>
<option value="5">页面搜索</option>
</select>
<script type="text/javascript">
$("#btn").bind("click",function(){
alert($(this).val());
})
$("#btn").click(function(){
alert($(this).html()); //把DOM的this对象包装成jq对象
});
</script>
</body>
http://neatstudio.com/show-833-1.shtml
javascript中onclick(this) 中的this指当前什么东西？
this就是当前标签本身
onclick=xxx(this)表示一个单击事件，来进行调用xxx(this)这个JavaScript函数。而xxx(this)函数中的this表示你要进行单击对象的本身。
把this当做参数传到函数中去,实践Ok:
view plainprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
</script>
<button id="12" onclick="test(this)" name="button">ccc</button>
<script type="text/javascript">
function test(which){
//which这个参数不要写成this
alert($(which).attr("id"));
}
</script>
</body>
于是最上面那个可以用onclick事件来传入到函数中，并用juqury来进行操作，如下实践Ok：
view plainprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
</script>
</head>
<body>
<select name="btn" id="btn" onclick=thisTestJquery(this)>
<option value="1">日志标题</option>
<option value="2">日志全文</option>
<option value="3">评论引用</option>
<option value="4">所有留言</option>
<option value="5">页面搜索</option>
</select>
<script type="text/javascript">
function thisTestJquery(th) {
//th 这个参数不要写成this
alert($(th).html());
alert($(th).val());
//两种获取ID的方法
console.log(th.id);
console.log($(th).attr("id"));
}
</script>
</body>
点击后，结果如下：
alert($(th).html());
结果：
<option value="1">日志标题</option>
<option value="2">日志全文</option>
<option value="3">评论引用</option>
<option value="4">所有留言</option>
<option value="5">页面搜索</option>
alert($(th).val());
结果：1
而两种this获取Id值是这样的，实践也OK，如下：
view plainprint?
console.log(th.id);
console.log($(th).attr("id"));
对于多个id的按钮下进行click时，查找是哪个id值被点了，如下，但是有发ajax后，就不能在ajax里去写this了，那就是ajax那个this了，只能传入，如下所示：
view plainprint?
$("#exeall,#exe32,#exe64").click(function(){
para.type = this.id.substr(3);//这样取是Ok的：this.id
console.log($(this).id);//不能取到想要的Id
console.log(this.id);//日志打印出来Ok
var selfObj = this;//这样做才能传入到get里去。
$.get("/php/cgi/execGray.php",para,function(data){
self.done = false;
var obj = eval('('+data+')');
if(obj.code == -2)
{
console.log(selfObj.id);
}
}
})
通过this传入变量：
在<a 中实现Js函数的this调用：
view plainprint?
<a href="javascript:void(0);" onclick="modifyRequest(this)" data=\''+JSON.encode(requestObj)+'\'>' + requestObj.f_RequestCode + '</a>
函数原型：
function modifyRequest(obj){
var requestData = eval('('+$(obj).attr('data')+')');
......
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript通过this变量快速找出用户选中radio按钮的方法
- jquery选择器实现传入变量
- 通过jQuery的attr修改onclick值的的解决方法
- CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别
- jquery的onclick(this)方法
- java通过反射获取调用变量以及方法
- java反射机制 以及通过反射获得类的变量字段，方法，构造函数
- 通过标准的Runtime API（C函数）打印UIKit中UIView的所有变量、属性以及方法
- 通过$(this)使用jQuery包装后的方法或属性
- jquery通过closest选择器修改上级元素的方法
- 通过$(this)使用jQuery包装后的方法或属性
- 简谈jQuery选择器的第二个参数Context对象以及jQuery对象转换成DOM对象的方法
- jquery 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
- 关于js中的onclick事件和JQuery中的click方法以及on方法事件的详解以及区别
- java反射机制 以及通过反射获得类的变量字段，方法，构造函数
- java中的反射机制，以及如何通过反射获取一个类的构造方法 ，成员变量，方法，详细。。
- Jquery 页面初始化常用的三种方法以及Jquery 发送ajax 请求
- JQuery一些常用选择器的属性和方法
- 关于存储过程事务，返回值，变量声明以及执行方法
- js原生态函数中使用jQuery中的 $(this)无效的解决方法