// jQuery-->JavaScript 两种方法:
    $(selector).get(index) ;
    $(selector)[index];  

//  JavaScript-->jQuery 只需要将获取的JavaScript对象用$包装即可
     var obj = document.links;
     $(obj).css("color","red");    

注意点:当jQuery转js对象时, $(selector).get(index) 返回的是单个dom对象,你可以继续用原生js的写法去操作。var obj = $(selector).get(index) ;

obj.style.color = "#f00";

但是,如果忽略index不写,将返回一个dom集合,这时如果进行一些类型上面的操作可能会报错。当然,你还可以借助for循环去对每个元素执行这类操作。

另外,jQuery与原生方法不能混用,比如:$(selector).innerHTML会报错,但是可以出现下面的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>this is div</div>
    <p>this is p</p>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
    $("div").on("click",function(){
        $(this).html(document.getElementsByTagName("p")[0].innerHTML);
    })
</script>
</html>

还有一个this的区分,$(this)指向当前触发事件的jQuery元素,可调用jQuery方法;

this指向当前触发事件的dom元素,可调用原生方法。

js与jQuery对象相互转换的更多相关文章

  1. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. js对象和jQuery对象相互转换

    (1)什么是js对象及代码规则 就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象 js代码规则----divElement var divElement = do ...

  3. js和 jquery对象

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’ ...

  4. jquery第三期:js与jquery对象转换

    我们开始进入jquery的学习了,jquery的学习就不那么中规中矩了,我们来看一个和javascript有所区别的地方. <!DOCTYPE html PUBLIC "-//W3C/ ...

  5. js和jquery对象的相互转换

    在使用jquery的过程中发现很多需要将jquery对象转成js对象的例子. Query 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 ...

  6. jquery中 dom对象与jQuery对象相互转换

    var jq = $(dom对象);//额 再补充点吧好记. $是jquery的别名.这一句等价于 var jq = jQuery(dom对象); 反之. dom对象 = jq[0]; //不写那么长 ...

  7. js与jquery对象的互转

    //dom对象 var odiv = document.getElementById('box'); //dom对象转化成JQ对象, 在通过原生的方法获取到元素后,给它加上$() //$(odiv). ...

  8. DOM对象与jquery对象相互转换

  9. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

随机推荐

  1. Notepad++ 7.3.2 Download 64-bit x64 / 32-bit x86

    Notepad++ 7.3.2 Download 32-bit x86 Notepad++ Installer 32-bit x86: Take this one if you have no ide ...

  2. sql中如何分割字符串

    使用方式: SELECT AllItem AS BldGUID  FROM dbo.fn_split('01.02.03','.') 函数:   GO )) )) --实现split功能 的函数 as ...

  3. DOM0 DOM2 DOM3

    DOM0  DOM2  DOM3 DOM是什么 W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. DOM 定义了访问 HTML 和 ...

  4. css系列:input的placeholder在safari下设置行高失效

    在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI ...

  5. Java数据结构和算法

    首先,本人自学java,但是只学习了java的基础知识,所以想接下来学习一下数据结构和算法,但是找了很多教材,大部分写的好的都是用c语言实现的,虽然知道数据结构和算法,跟什么语言实现的没有关系,但是我 ...

  6. java8 Lambda表达式的新手上车指南(1)

    背景 java9的一再推迟发布,似乎让我们恍然想起离发布java8已经过去了三年之久,java8应该算的上java语言在历代版本中变化最大的一个版本了,最大的新特性应该算得上是增加了lambda表达式 ...

  7. 解析http协议的url

    package util; import java.io.BufferedReader;import java.io.InputStream;import java.io.InputStreamRea ...

  8. 转 JSON与XML转换

    这两天处理模块的联调工作,在json与XML转换中出现了一些奇怪的问题,仔细究来,实为对org.json.*包知之太少.晚上baidu.google一下,找出了问题出现的原因.在模块中,使用了两个方法 ...

  9. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

  10. 产品经理学Python:参数传递方式

    这是关于Python的第5篇文章,主要介绍下参数传递方式和如何设计自己的函数. (一) 本篇主要介绍2种参数传递方式. 位置参数 调用函数时,根据函数定义的参数位置来传递参数. def right_t ...