jQuery教程04-jQuery_this选择器

jQuery选择器之特殊选择器this

相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?

1、JS中的this

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

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

var data = {name:"老虎",getName:function(){//this,就是数据对象return this.name;}
}
data.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对象

2、jQuery中的this

换成jQuery的做法:

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

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

3、整体代码实现

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-type" content="text/html"; charset="utf-8" /><title>jQuery_this选择器</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569966.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络操作系统 第七章 管理TCP/IP网络

习题 1.简述TCP /IP 通信协议的四层结构的内容及应用。 应用层&#xff1a;应用程序间沟通的层&#xff0c;如简单电子邮件传输协议(SMTP)、文件传输协议(FTP)、网络远程访问协议(Telnet)等。 传输层&#xff1a;在此层中&#xff0c;它提供了节点间的数据传送服务&#xff0c;…

windows+PHP+shell_exec()无法执行的原因

今天使用shell_exec()命令执行wkhtmltopdf.exe 生成pdf文件时&#xff0c;总是无法生成PDF文件&#xff0c;使用var_dump()打印返回值&#xff0c;结果是null。可是检查代码并没有什么问题啊&#xff1f;执行程序的目录是 D:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe …

通过wkhtmltopdf导出支持CSS样式的pdf文件

在公司项目中发现有下载pdf文件的功能&#xff0c;但是不能识别CSS样式&#xff0c;导致下载的pdf文件格式显得很别扭&#xff0c;虽然能看但是难看。然后就是百度啊&#xff0c;google啊&#xff0c;最后找到一款能够识别CSS样式的软件—wkhtmltopdf。wkhtmltopdf可以直接把任…

【算法基础笔记】常用的排序算法的时间、空间复杂度,部分排序算法原理

冒泡排序 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换他们两个。对每一对相邻元素做同样的工作&#xff0c;从开始第一对到结尾的最后一对。在这一点&#xff0c;最后的元素应该会是最大的数。针对所有的元素重复以上的步骤&#xff0c;除了最后一个。持续每次对越…

windows定时任务

在windows系统中创建定时任务&#xff0c;与在linux中创建定时任务是不同的。因为平时会用到windows的定时任务&#xff0c;所以在这里做个记录&#xff0c;同事给小伙伴们一个参考。 一、windows定时任务的工作流程 1、首先创建一个批处理脚本&#xff0c;就是扩展名为bat的…

jQuery实现checkbox的全选反选方法

checkbox的全选、取消全选、选中所有奇数、选中所有偶数等方法的实现代码如下&#xff1a; 注意jQuery的版本&#xff1a;jQuery1.6增加了prop&#xff0c;1.6之前的还是使用attr()和removeAttr() <!DOCTYPE html> <html lang"en"> <head> <ti…

爬虫前期知识的储备(二)

通用爬虫与聚焦爬虫&#xff1a; 通用爬虫&#xff1a;搜索引擎用的爬虫系统1&#xff09;目标&#xff1a;把互联网的网页下载下来&#xff0c;放到本地服务器形成备份&#xff0c;再对这些网页做相关处理&#xff08;提取关键字&#xff0c;去掉广告&#xff09;&#xff0c;…

jQuery教程05-层级选择器

jQuery选择器之层级选择器 文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述&#xff0c;可以把文档树当作一个家谱&#xff0c;那么节点与节点直接就会存在父子&#xff0c;兄弟&#xff0c;祖孙的关系了。 选择器中的…

WebSocket使用中Stomp Client连接报ERROR CODE 200的解决办法

最近在做一个WebSocket项目&#xff0c;后台使用了Stomp协议的WebSocketConfigurer&#xff0c;但是前端在测试的时候&#xff0c;发现一个很奇怪的问题&#xff1a; 本地的测试代码&#xff0c;最初我使用了JavaSockJS实现&#xff1a; Configuration EnableWebSocketMessageB…

jQuery教程06-基本筛选选择器

jQuery选择器之基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素&#xff0c;为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范&#xff0c;而是jQuery自己为了开发者的便利延展出来的选择…

jQuery教程07-内容筛选选择器

jQuery选择器之内容筛选选择器 基本筛选选择器针对的都是元素DOM节点&#xff0c;如果我们要通过内容来过滤&#xff0c;jQuery也提供了一组内容筛选选择器&#xff0c;当然其规则也会体现在它所包含的子元素或者文本内容上 内容过滤器描述如下表&#xff1a; 注意事项&…

[bzoj3489]A simple rmq problem_KD-Tree

A simple rmq problem 题目大意&#xff1a;给定一个长度为$n$的序列&#xff0c;给出$m$个询问&#xff1a;在$[l,r]$之间找到一个在这个区间里只出现过一次的最大的数。 注释&#xff1a;$1\le n\le 10^5$&#xff0c;$1\le mle 2\cdot 10^5$。 想法&#xff1a; 我的第一想法…

JSON入门

JSON简介 JSON ( JavaScript Object Notation, JS 对象标记 ) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅…

字符流

字符输入流Reader import java.io.FileReader; import java.io.FileWriter; import java.io.IOException;public class Demo04 {public static void main(String[] args) throws IOException {method1();method2();method3();copy();} FileReader类 //文本文件建议用字符流读取…

Apache服务器下载、安装、启动、关闭及卸载(win版)

今天讲一下64位win7环境下apache服务器的下载、安装及配置的过程。 1、Apache的下载 百度搜索apache&#xff0c;然后单击选择的下载网站&#xff1a; 我选择的是第一个网站&#xff0c;第二个也可以。 进入之后&#xff0c;确定下载的apache版本&#xff0c;这里选择2.4…

定义一个类:实现功能可以返回随机的10个数字,随机的10个字母, 随机的10个字母和数字的组合;字母和数字的范围可以指定,类似(1~100)(A~z)...

#习题2&#xff1a;定义一个类&#xff1a;实现功能可以返回随机的10个数字&#xff0c;随机的10个字母&#xff0c; #随机的10个字母和数字的组合&#xff1b;字母和数字的范围可以指定class RandomString():#随机数选择的范围作为参数&#xff0c;如&#xff08;1~100&#x…

Navicat导入Excel表格数据

现在使用图像化工具来管理数据库是越来越方便了&#xff0c;PhpMyAdmin和Navicat都是管理数据库的好工具&#xff0c;这里我记录一下使用Navicat导入xls表格数据的方法。大家可以作为参考。 1、查看一下导入的表格&#xff0c;注意第一行是字段名&#xff08;也可以不要第一行…

creator2.0.2 native游戏截屏微信分享

cocos creator 2.0.2后 游戏内截屏&#xff0c;native微信SDK分享代码&#xff1a;public static wxShareScreenShot(sType: number) {let node new cc.Node();node.parent cc.director.getScene();node.width cc.view.getVisibleSize().width;node.x cc.view.getVisibleSi…

配置apache支持PHP(win7)

wamp和lamp是PHP工程师经常使用的环境&#xff0c;我们今天来配置apache&#xff0c;让它能够和php协同工作。 1、进入apache的conf目录&#xff0c;打开apache的配置文件httpd.conf。&#xff08;修改前建议先备份&#xff09; 修改apache软件所在目录&#xff1a; ServerRoo…

PHP5.6的安装与配置(win7)

1、PHP的安装 1&#xff09;、环境安装目录&#xff1a; D:/wamp/|——php|——php-5.6.22-Win32-VC11-x86|——Apache24|——mysql|——www2&#xff09;、下载 linux专用&#xff1a;http://www.php.net/downloads.php windows专用&#xff1a;http://windows.php.net/dow…