JQuery中的特殊选择器--this

原创 2016年05月30日 21:16:52
相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?下面我们一起来看一下!

this是JavaScript中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者

下面例子中,imooc是一个对象,拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var ch = {
    name:"中国",
    getName:function(){
        //this,就是ch对象
        return this.name;
    }
}
ch.getName();//中国

当然在JavaScript中this是动态的,也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法),具体的大家可以查阅相关资料

同样的在DOM中this就是指向了这个html元素对象,因为this就是DOM元素本身的一个引用

假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

通过addEventListener绑定的事件回调中,this指向的是当前的dom对象,所以再次修改这样对象的样式,只需要通过this获取到引用即可。

this.style.color = "red"

但是这样的操作其实还是很不方便的,这里面就要涉及一大堆的样式兼容,如果通过jQuery处理就会简单多了,我们只需要把this加工成jQuery对象

换成jQuery的做法:

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

通过把$()方法传入当前的元素对象的引用this,把这个this加工成jQuery对象,我们就可以用jQuery提供的快捷方法直接处理样式了

总体来说:
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。

接下来好好理解一下下面代码:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>特殊选择器this</h2>

    <p id="test1">点击测试:通过原生DOM处理</p>

    <p id="test2">点击测试:通过原生jQuery处理</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接通过dom的方法改变颜色
            this.style.color = "red"; 
        },false);
    </script>

    <script type="text/javascript">
        $('#test2').click(function(){
            //通过包装成jQuery对象改变颜色
            $(this).css('color','blue');
        })
    </script>

</body>

</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery: 在this的环境中使用选择器

jQuery: 在this的环境中使用选择器   $(XXX,this) $(XXX,this) 第一个参数是查询字符串或dom元素 第二个参数是查询的上下文 等价于...

jQuery选择器this的问题

(1)html方法属性中调用使用thishtml代码: aaa bbb ccc ddd js代码:...
  • jjzjjz1
  • jjzjjz1
  • 2011年04月14日 20:51
  • 2917

弹框中动态加载下拉框,下拉框的定位问题

1、在项目中遇到页面出现有滚动条的弹框,弹框中有下拉框,下拉框的内容太多,需要对下拉框长度限制,于是就变成了有滚动条的弹框中出现了有滚动条的下拉框,但是即使对下拉框添加了滚动条,处于最下面的下拉框还是...

高斯列主元消元法mpi实现

列主元法mpi实现 列主元消元法在求解线性方程组时很好的解决了因为计算机本身字长的限制而产生的问题。本文中使用mpi将矩阵分行处理,并将通信量最小化。这是课程作业,学弟学妹们参考参考就好 直接放代...

jQuery选择器中的特殊符号和关键字

一般情况下,在jQuery选择器中,我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符,因为根据W3C规定,HTML文档中属性的值是不能包含有这些个特殊字符的,但是在实际应用中,偶尔也会遇到表...

JQuery ID选择器中的不能包含特殊字符(=,@ etc.)

本文来自编程入门网:http://www.bianceng.cn/webkf/jquery/201101/23736.htm 最近在开发一个界面时发现了某些特殊情况下ID选择器就会出现无...

jQuery选择器中含有空格和特殊符号的注意事项

一、选择器中含有特殊符号的注意事项 1.选择器中含有“.”、“#”、“(”或“]”等特殊字符 根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“...

Jquery选择器特殊用法

这个标题似乎有些奇怪,但这些都是合法有效的jquery选择器。在这里将他们逻列一起,是因为他们比较容易引起混淆。下面就通过例子来说明他们之间的不同之处。 $("parent > child") ...

CSS选择器修改样式,及单独修改样式this.style.

css选择器:修改样式 实现开关灯效果       开关灯效果    body  {      background: #FFF;  } .day {     backg...

css2的几种特殊选择器

以下均支持IE6以上版本的浏览器1、属性选择器 为带有 title 属性的所有元素设置样式: [title]{color:red;} 为 title=”qjyue77” 的所有元素设置样式: [tit...
  • qjyue77
  • qjyue77
  • 2016年06月01日 21:00
  • 185
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中的特殊选择器--this
举报原因:
原因补充:

(最多只允许输入30个字)