jquery使用原生js方法 js/jQuery对象互转

javascript原生有许多方法,jquery自己也有一套封装好的方法,jquery自己的选择器非常方便,但有时候我们需要 使用原生的一些方法,如果我们使用jquery选择元素,直接调用原生javascript的方法就会出现错误。例如我们要输出一张图片的宽度:

原生js:

javascript: 
    var dom1 = document.getElementById("pic").width;
    alert(dom1)

jquery:

var dom2 = $("#pic").width();
        alert(dom5)

html:

<img src="12.jpg" id="pic" >


种方法都可以输出图片的宽度,但是当我们想使用jquery的选择器$("#pic"),并且使用原生width方法该怎么办呢?如果直
接$("#pic").width是会出错的。原因是$("#pic")得到的是jquery对象,而原生width方法是DOM的属性,所以需要转化一
下:

$("#pic")[0].width   或   $("#pic").get[0].width

// jquery对象转js对象 
$(‘#id‘)[0]
// js对象转jquery对象 
var obj = document.getElementById(‘id‘); 
$(obj)

时间: 2024-07-31 14:33:12

jquery使用原生js方法 js/jQuery对象互转的相关文章

常用的兼容IE和火狐FF等浏览器的js方法(js中ie和火狐的一些差别)

介绍了网页上常用的IE/火狐兼容性该页的做法,并给出了代码,相当实用了.为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox .以下进入正题: //window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMove(event) 解决方法:var event = event || window.

MVC注册验证:js方法(jQuery)

控制器端代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication5注册验证.Models { public class ZhuceBF { private mydboDataContext _Context = new mydboDataContext(); public List<zhuce> Select() { retu

[ jquery 选择器 :last ] 此方法选取jquery对象中的最后一个对象

此方法选取jquery对象中的最后一个对象,与:first相对 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,k

jquery使用自带方法实现json对象合并的例子

1.使用jquery自带的方法 $.extend( true, object1, object2 ); 原文地址:https://www.cnblogs.com/dth08011122/p/9270969.html

JQuery:通过noConflict()方法同时使用jQuery 和其他框架

jQuery - noConflict()方法 一.如何在页面上同时使用 jQuery 和其他框架?jQuery 和其他 JavaScript 框架正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写.如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?其他一些 JavaScript 框架包括:MooTools.Backbone.Sammy.Cappuccino.Knockout.JavaScript MVC.Google Web Toolkit.Googl

jQuery源码06-jQuery = function(){};给JQ对象,添加一些方法和属性,extend : JQ的继承方法,jQuery.extend()

/*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //"use strict"; var // rootjQuery = jQuery(document) = $();压缩有用 rootjQuery, // dom是否加载完 readyList, // core_strundefined == 'undefined' core_strundefined

原生JS取代一些JQuery方法的简单实现

原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySelect

js原生方式实现jquery中的append()方法

一.在使用jquery时, append() 方法在被选元素的结尾(仍然在内部)插入指定内容 使用方法:$(selector).append(content),content为必需的.规定要插入的内容(可包含 HTML 标签) 二.在使用原生js时,使用appendChild() 方法可向节点的子节点列表的末尾添加新的子节点, 用法:parent.appendChild(child); child没有引号包住,child参数,是node类型.给一个空文档里面动态创建元素,要使用document.

原生JS取代一些JQuery方法

1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySelectorAll(el); } querySelectorAll方法返回的是NodeList对象,需要转换为数组. myList = Array.prototype.slice.call(myNo