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对象 ...
随机推荐
- Js 使用new关键字调用函数和直接调用函数的区别
最近开始学习js,在看到书上的一个例子时,引发了我的一系列思考: 书上例子: function Person(name,age,job){ var o =new Object(); o.name=na ...
- 用Vue中遇到的问题和处理方法(一)
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- 配置supervisor 让laraver的队列实现守护进程
1,安装: #brew install supervisor 默认会安装在/usr/local/Cellar/supervisor目录 2,在etc下面新建supervisor.conf 文件,复制下 ...
- 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- 浅谈CSS3 box-reflect 属性
今天说一下 CSS3的box-reflect属性,也就是倒影特效. 语法: box-reflect:包括3个值. 1. direction 定义方向,取值包括 above . below . left ...
- Andy的生活
Andy是一个善良的男孩,希望优雅地生活. 现实是残酷的. 现实是,Andy像狗一样活着. Andy犯的错是,错误地认为狗一样的生活将在高考结束的那一刻结束. 大学四年时间根本没有静下心来学习,却在生 ...
- Linux环境快速搭建RocketMQ双Master模式
RocketMQ的集群部署方式有多种,其中包括单个Master.多个Master.多Master多Slave模式(异步复制)以及多Master多Slave模式(同步双写).本次以多Master集群模式 ...
- 【转】Hive执行计划
执行语句 hive> explain select s.id, s.name from student s left outer join student_tmp st on s.name = ...
- .Net异步函数存在的限制
本文摘录自CLR Via C# 第四版. 异步函数存在以下限制: 1.不能讲应用程序的Main方法转变成异步函数.另外,构造器.属性访问器方法和时间访问器方法不能转变成异步函数. 2.异步函数不能使用 ...
- chap1 C++泛型技术基础--模板 #STL
0 缘起 有一点编程经验和积累,想系统的学习下STL,以前都是随意做的笔记,现在想着成主题的输出一下. 书的原型是ISBN:9787302421757 <C++泛型STL原理和应用>,是从 ...