jQuery 特殊选择器this
特殊选择器this
相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?
this是JavaScript中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者
下面例子中,imooc是一个对象,拥有name属性与getName方法,在getName中this指向了所属的对象MKing
var MKing = {name:"sMKing",getName:function(){//this,就是MKing对象return this.name;} } imooc.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的方法和属性值。$this只是个自定义的变量,$(this)是将当前DOM对象转换成jquery对象 addEventListener一共有三个参数(event, function, useCapture),最后一个参数默认是false,表示事件句柄在冒泡阶段执行,true表示在捕获阶段执行。
转载于:https://www.cnblogs.com/sMKing/p/5807493.html
jQuery 特殊选择器this相关推荐
- jQuery的选择器(一)
2019独角兽企业重金招聘Python工程师标准>>> jQuery选择器完全继承CSS风格,jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery的选择器包 ...
- jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
- jQuery 基础选择器/层级选择器/隐式迭代
jQuery 选择器 jQuery 层级选择器 隐式迭代(重要) <!DOCTYPE html> <html lang="en"><head>& ...
- java与jquery的选择器区别_JQuery选择器
原标题:JQuery选择器 声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. JQuery 介绍: 用于搜索H ...
- JQuery简介选择器
JQuery简介&选择器 文章目录 JQuery简介&选择器 一.jquery介绍 二.jquery加载 三.jquery选择器 1.id选择器 2.类选择器 3.元素选择器 4.全选 ...
- 第70天:jQuery基本选择器(一)
一.jQuery基本选择器 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascri ...
- jquery下 选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
- [jQuery] 说说看jQuery的选择器有哪些?
[jQuery] 说说看jQuery的选择器有哪些? 1.基本选择器: #id .element ..class .* .selector1... 2.层次选择器: ancestor descenda ...
- jQuery学习--选择器的使用
jQuery基本选择器 1. jQuery的ready事件 -> js的onload 2. 选择器的使用 1. jQuery的ready事件 -> js的onload 大多是第一种,匿名函 ...
- 浅谈jQuery的选择器
jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("A B") 查找A元素下面的所有子节点,包括非直接子节点 $("A>B") ...
最新文章
- [PKUSC2018]真实排名——线段树+组合数
- 【Python】Pycharm
- Day 30: Play Framework —— Java开发者的梦想框架
- Anaconda:包安装以XGBoost为例
- 视觉SLAM回环检测、词袋模型和视觉位置识别--论文记录和实验简析
- 这是哪里来的小妖精!!!
- 安卓TableLayout表格布局
- PyQt5笔记(03) -- 消息框
- android中tools的含义及用法
- wordpress 手动更新方法记录
- 阿里云云中沙箱自助实验-从Gitlab数据库被删看数据备份的重要性!
- 自动化部署之git merge和git rebase的区别
- 新书上市|这套北大数学系青睐的数学科普书,又添新成员
- 使用动态时间规整来同步时间序列数据
- 经典论文-SqueezeNet论文及实践
- 第九届蓝桥杯(国赛)——阅兵方阵
- 面试官:说说如何打破或违反双亲委派!
- C语言中的语法错误和语义错误
- weex中UISegmentControl实现及遇到的问题
- python删除文本末尾所有空行