这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用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. apache cxf笔记之Spring客户端访问和调用webservice服务

    继续上次的spring服务的问题,这边介绍一种spring配置客户端的方法. 1.src目录下新建client-beans.xml文件 <?xml version="1.0" ...

  2. 用android代码显示图片的一部分源码

    ShowPoritionPictureActivity代码: [java] <span style="font-size:16px;"> package com.iwi ...

  3. 使用docker搭建kafka环境

    Requirements 最近学习了下kafka,为方便搭建环境,使用docker进行部署. 需要首先安装docker的环境.要求操作系统是linux的64位系统. docker的安装(适于rpm/d ...

  4. JavaScript利用闭包实现模块化

    利用闭包的强大威力,但从表面上看,它们似乎与回调无关.下面一起来研究其中最强大的一个:模块. function foo() { var something = "cool"; va ...

  5. C语言之while和do-while

    一 while和do-while的简介 1). while语句 语法: while(表达式){ 循环体; } 循环过程: 1.先判断表达式,是否为真,如果为真跳转到2,否则跳转到3 2.执行循环体,执 ...

  6. Linux环境搭建Hadoop伪分布模式

    Hadoop有三种分布模式:单机模式.伪分布.全分布模式,相比于其他两种,伪分布是最适合初学者开发学习使用的,可以了解Hadoop的运行原理,是最好的选择.接下来,就开始部署环境. 首先要安装好Lin ...

  7. OpenGL的状态机理解

    OpenGL是一种状态机模式,比如你用glEnable打开一个状态,在以后的绘图中将一直保留并应用这个状态,除非你调用glDisable及同类函数来改变该状态或程序退出.例如当前颜色是一个状态变量,可 ...

  8. 巧用weui.gallery(),点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  9. IOS GCD使用实例大全

    GCD是大家在IOS开发过程中经常使用的一种多线程管理机制.原理这里就不多说了,大家关心的大部分都是它的使用,下面主要介绍GCD的主要方法及其实例. 1.认识主队列,感受串行队列的运行,运行结果打印的 ...

  10. js 数值格式化函数

    function ForDight(Dight,How){ ,How))/Math.pow(,How); return Dight; } //ForDight(Dight,How):数值格式化函数; ...