React中jquery引用的实现方法


Posted in jQuery onSeptember 12, 2017

在React中引用Jquery比较好玩,获取元素的数据更多

1.引入方法举例:

import $ from 'jquery';

import { Button } from 'antd';

class testJquery extends React.Component {

constructor(props) {


super(props);



this.selectElement = this.selectElement.bind(this);


}


render() {



return(




<div>





<Button onClick={this.selectElement}>点击一下</Button>





<h4 className="text">这是:12</h4>




</div>



);


}


selectElement() {



console.log('text对象:',$('.text'));



console.log('text中的值:',$('.text')[0].textContent);


}

}

export default testJquery;

2.界面样式

React中jquery引用的实现方法

3. 控制台打印结果

React中jquery引用的实现方法

 4.text对象部分属性

React中jquery引用的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
Jquery性能优化详解
2014/05/15 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python判断元素是否存在的实例方法
2020/09/24 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
逃课打麻将检讨书
2014/10/05 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL