js行内式遇到的一些问题 DOM对象和jq对象转换的问题
这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个对象。简单还原代码如下
<button id='btn' onclick='check()' name='abc' value='123'>类别</button>
<script>
function check() {
console.log($(this).name);
}
</script>
遇到的问题就是,一直取不到这个button对象,打印$(this)得到的结果是【window】,后来发现,要解决要注意3个地方:
1,、函数里要穿参即function check(obj),注意这里的形参不能写this,其他的都可以。
2、在html调用的标签里调用方法时,要穿实参,即 <button onclick='check(this)' name='abc'>类别</button>。
3、如果用jq的$方法,写法要注意,如果想用$()这样的jq对象调用js的value方法,必须在后面加个get(0),即
$('#btn').get(0).value //123;
$("#btn")得到的是jquery封装的对象,里面提供了jquery的一些方法,并不是html原生对象,通过get(0)才能取到jquery对象里面关联的html对象,从而操作html对象的属性和方法。
这里涉及到DOM对象和jq对象的转换问题
jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
<button id='btn' onclick='check(this)' name='abc' value='123'>类别</button>
function check(a) {
console.log($(a).val());
console.log(a.value);
}
可能表述的并不完全准确,如果有错欢迎指正,因为现在写代码很少用行内式,所以这个问题还是蛮有趣的,这里指提供解决方法,原理有待我进一步学习,哪些能做形参哪些能做实参,还需要深入了解。
js行内式遇到的一些问题 DOM对象和jq对象转换的问题的更多相关文章
- JS——行内式注册事件
html中行内调用function的时候,是通过window调用的function,所以打印this等于打印window,所以在使用行内注册事件时务必传入参数this <!DOCTYPE htm ...
- JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...
- Angular 行内式依赖注入
var app = angular.module('myApp', ['ng']); //创建一个自定义服务app.factory('$Debug', function () { return { d ...
- 0008 CSS初识(行内式、内部样式表、外部样式表)
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...
- 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图
jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...
- 移动端使用rem.js,解决rem.js 行内元素占位问题
父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vert ...
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- js对象和jq对象互相转换
1.DOM 对象转成 jQuery 对象 var v = document.getElementById("v"); //DOM对象 var $v = $(v); //jQuery ...
- Js(DOM) 和Jq 对象的相互转换
JQuery 对象不能使用DOM对象中的方法,同样,Dom对象 不能使用JQuery 中的方法,但有时候 ,我们不得不使用JQuery的方法或者 Dom对象的方法,该怎么办呢? 下面介绍一下 jq对象 ...
随机推荐
- jvm工具
jvm工具 知识,经验是基础,数据是依据,工具是运营知识处理数据的手段 数据:运行日志.异常堆栈.GC日志.线程快照.堆转存储快照 JPS:虚拟机进程状况工具 jvm process status t ...
- Js-Html 前端系列--页面撑开头尾
今天学习过程中,发现一个超实用的方法,就是当页面有尾部,但是内容又不多的情况下,让中间的内容把尾部撑到底部. <script type="text/javascript"&g ...
- FineReport中以jws方式调用WebService数据源方案
在使用WebService作为项目的数据源时,希望报表中也是直接调用这个WebService数据源,而不是定义数据连接调用对应的数据库表,这样要怎么实现呢? 在程序中访问WebService应用服务, ...
- elasticsearch基本概念
NRT(近实时搜索) Elasticsearch是一个NRT平台.这意味着当你索引一个文件时,在细微的延迟(通常1s)之后,该文件才能被搜索到. Cluster(集群) cluster是在所有节点中保 ...
- JavaScript的this详解
1.全局作用域下的this: 2.一般函数与严格模式下的函数的this: 3.当函数的this作为对象的方法的情况下: 4.对象原型链上的this: 对象P的原型指向o, p.a与p.a创建对象p的属 ...
- jQuery.cssHooks
概述 直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性. $.cssHooks 对象提供了一种通过定义函数来获取或设置特 ...
- C# 修改iframe url
一.修改本级的iframe url 首先在js中编写函数: <script type="text/javascript"> function reloadfrm2() ...
- CentOS7 离线安装gcc/pcre-devel/openssl-devel/zlib-devel
1. 解压CentOS7操作系统安装镜像,进入到CentOS-7.0-1406-x86_64-DVD\Packages目录,这下面存储了很多rpm包. 2. 找到下面列出的rpm包,上传到CentOS ...
- Ubuntu中Qt新建窗体提示lGL错误
提示错误: cannot find -lGL collect2:error:ld returned 1 exit status 这是因为系统缺少链接库,终端输入: sudo apt-get insta ...
- python2 基础
标识符 标识符是由字母,下划线和字母组成的字符序列标识符必须以字母,下划线开头,不能以数字开头标识符不能是关键字标识符可以为任意长度 算术运算符+-*///**% 科学记数法 aEb 或者aE+b例: ...