这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用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. C语言之函数的声明

    函数的声明 1.函数只能定义在函数外,不能定义在函数内 2.函数不允许重名,C语言中函数没有重载 3.函数只要一经定义,就可以在任意函数中调用 注意:如果函数定义在它调用之后,那么必须在调用之前,先声 ...

  2. GridControl的单元格中以buttonEdit实现文字和图片按钮并存的效果

    话不多说,先上效果图 对于第一列的效果是如何实现的就不多说了,网上有很多例子 重点是第三列的效果实现方法,代码如下 private void GridSet() { DevExpress.XtraEd ...

  3. Virtualbox中的Linux:未能加载虚拟光驱 VBoxsGuestAdditions.iso到虚拟电脑

    安装增强功能 出现了 这个问题,需要弹出光盘,再次安装.

  4. tomcat部署war包时连接被重置(修改tomcat上传限制)

    相对目录:apache-tomcat-7.0.67/webapps/manager/WEB-INF/web.xml 500M的计算:500*1024*1024 <multipart-config ...

  5. Scheme-CPS

    给出斐波那契数列计算函数,普通版和CPS版 #lang SCHEME (define (fib n) (if (< n 2) n (+ (fib (- n 1)) (fib (- n 2)))) ...

  6. idea svn 更新覆盖了本地代码

    idea  更新svn代码,覆盖了本地代码,还不能ctr+z怎么办? 下图

  7. netty高级篇(3)-HTTP协议开发

    一.HTTP协议简介 应用层协议http,发展至今已经是http2.0了,拥有以下特点: (1) CS模式的协议 (2) 简单 - 只需要服务URL,携带必要的请求参数或者消息体 (3) 灵活 - 任 ...

  8. winServer2008下安装SqlServer2008数据库

    1 安装文件包 文件名 cn_sql_server_2008_r2_enterprise_x86_x64_ia64_dvd_522233.iso SHA1 0EEFF017B21635DF33F33C ...

  9. Bucket Sort - leetcode [桶排序]

    桶排序(Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶里.每个桶再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序).桶排序是鸽巢排序 ...

  10. BIEE基本函数

    一,TRIM ,去除空字符 TRIM(EXPR) SUBSTRING("UT TIME"."月份" FROM 6 FOR 2) 1.AGGREGATE AT 此 ...