这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用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对象转换的问题的更多相关文章

  1. JS——行内式注册事件

    html中行内调用function的时候,是通过window调用的function,所以打印this等于打印window,所以在使用行内注册事件时务必传入参数this <!DOCTYPE htm ...

  2. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. Angular 行内式依赖注入

    var app = angular.module('myApp', ['ng']); //创建一个自定义服务app.factory('$Debug', function () { return { d ...

  4. 0008 CSS初识(行内式、内部样式表、外部样式表)

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

  5. 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  6. 移动端使用rem.js,解决rem.js 行内元素占位问题

    父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vert ...

  7. Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

    什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...

  8. js对象和jq对象互相转换

    1.DOM 对象转成 jQuery 对象 var v = document.getElementById("v"); //DOM对象 var $v = $(v); //jQuery ...

  9. Js(DOM) 和Jq 对象的相互转换

    JQuery 对象不能使用DOM对象中的方法,同样,Dom对象 不能使用JQuery 中的方法,但有时候 ,我们不得不使用JQuery的方法或者 Dom对象的方法,该怎么办呢? 下面介绍一下 jq对象 ...

随机推荐

  1. [Angular Directive] Implement Structural Directive Data Binding with Context in Angular

    Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...

  2. 巧用ajax请求服务器加载数据列表时提示loading

    我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: < ...

  3. 干货云集 WOT 2017全球架构与运维技术峰会揭密技术难点

    WOT,World Of Tech专注互联网IT技术领域,是一场不容错过的技术盛会!WOT 2017全球架构与运维技术峰会三大章节,15大技术专场,60+国内外一线互联网精英大咖站台,打造兼顾技术视野 ...

  4. [转载]We Recommend a Singular Value Decomposition

    原文:http://www.ams.org/samplings/feature-column/fcarc-svd Introduction The topic of this article, the ...

  5. ECMAScript6之Array类型的扩展

    数组的扩展 Array.of() 将一组值转换成数组 Array.of(1,2,3,4,5); //[1,2,3,4,5] Array.from() 可将类似数组的对象或者可便利的对象转换成数组,比如 ...

  6. 初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助

    初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...

  7. sql时间转换函数--备忘

    总是忘记 一.语法: CAST (expression AS data_type) 参数说明: expression:任何有效的SQServer表达式. AS:用于分隔两个参数,在AS之前的是要处理的 ...

  8. Tiny6410之MMU开启

    存储管理单元存储管理单元MMU概述 在ARM系统中,存储管理单元MMU主要完成以下工作:1.虚拟存储空间到物理存储空间的映射.在ARM中采用页式虚拟存储管理.他把虚拟地址空间分成一个个固定大小的块,每 ...

  9. Centos 7 系统安装完毕修改网卡名为eth0

    从CentOS/RHEL7起,可预见的命名规则变成了默认.这一规则,接口名称被自动基于固件,拓扑结构和位置信息来确定.现在,即使添加或移除网络设备,接口名称仍然保持固定,而无需重新枚举,和坏掉的硬件可 ...

  10. 多表查询 INNER JOIN ON WHERE

    SELECT *FROM STUDENT_INFO siINNER JOIN CLASS_INFO ci on si.CLASS_INFO_ID = ci.ID INNER JOIN TEACHER_ ...