我们开始进入jquery的学习了，jquery的学习就不那么中规中矩了，我们来看一个和javascript有所区别的地方。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   window.onload = function()

   {

	   alert("niujiabin");

    }

	window.onload = function()

	{

		alert("bcd");

		}

</script>

</head>

<body>

</body>

</html>

结果是：

弹出niujiabinbin的提示框，但是我们改写成jquery：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

	   alert("abc");

	   });

	$(function(){

		alert("bcd");

		});

</script>

</head>

<body>

</body>

</html>

结果却是两个都输出了，我们可以看出，jquery的加载方式进行了变化，那么这样的好处是什么呢？

如果引用两个js文件的function，那么会产生覆盖问题，jquery使用闭包解决了此问题。

下面我们看一看js对象和jquery对象：

下面的代码能找出错误么？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

     var hello = document.getElementById("hello");

	 hello.css("color","red");

	});

</script>

</head>

<body>

<div id="hello">

  <ul>

    <li>niujiabin</li>

	<li class="abc">maybe</li>

	<li>gossipgo</li>

  </ul>

</div>

</body>

</html>

运行会出现错误：

也就是说我们的js对象并不能调用jquery的方法，那么怎么把js对象转换成jquery对象呢，很简单，加入$() 就可以了：

$(hello).css("color","red");

运行结果：

那么jquery对象怎么转换成js对象呢，我们可以把jquery对象想成一个数组，请看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

	 ($("li.abc")[0]).innerHTML = "niujiabinaaaa";

	});

</script>

</head>

<body>

<div id="hello">

  <ul>

    <li>niujiabin</li>

	<li class="abc">maybe</li>

	<li>gossipgo</li>

  </ul>

</div>

</body>

</html>
($("li.abc")[0]).innerHTML = "niujiabinaaaa";

//li.abc取出一个jquery对象，因为他就有一个元素我们得到第一个，在后面加一个[0],就变成了js对象，

//最后调用js的innerHTML方法。

运行结果：

jquery第三期：js与jquery对象转换的更多相关文章

  1. 在js中将map对象转换成json 和 js对cookie的操作

    在js中将map对象转换成json //msp转objectlet obj= Object.create(null); for (let[k,v] of map) { obj[k] = v; }//o ...

  2. 2.js将Date对象转换成“2018-05-10”字符串格式化的时间

    //拼接0 $cms.joint0 = function(val) { if (val < 10) return "0"+val; return val; } //时间格式化 ...

  3. 详解JS与Jquery获得的对象的区别与联系

    世上无难事只怕有心人,敲代码也一样只要你用心去搞懂一件事,即使一个小小的用法对你以后也会有很大的作用: 项目虽然赶得紧但是有些问题百度找完答案解决之后,也要自己梳理一遍做到心领神会!!!今天就直接来上 ...

  4. jQuery生成二维码 jquery.qrcode.js

    https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...

  5. jquery.qrcode.min.js生成二维码

    jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <scr ...

  6. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  7. json 字符串转换成对象,对象转换成json字符串

    json   字符串转换成对象,对象转换成json字符串 前端: 方法一: parseJSON方法:   [注意jquery版本问题] var str = '{"name":&qu ...

  8. jQuery笔记: 基本概念与jQuery核心

    目录 初识jQuery 为什么要使用jQuery? 如何使用jQuery? jQuery与js加载模式不同 jQuery入口函数的四种写法 jQuery的访问符冲突问题 jQuery核心函数和jQue ...

  9. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

随机推荐

  1. python刷取CSDN博文访问量之二

    python刷取CSDN博文访问量之二 作者:vpoet 注:这个系列我只贴代码,代码不注释.有兴趣的自己读读就懂了,纯属娱乐,望管理员抬手      若有转载一定不要注明来源 #coding=utf ...

  2. postgresql基本语句

    preface,熟悉pgsql sql Language article disorder; 1,pgsql数据库控制台Cli(command line interface) help mannual ...

  3. java提高篇（二二）-----LinkedList

    摘自http://blog.csdn.net/chenssy/article/details/18099417  java提高篇(二二)-----LinkedList 一.概述 LinkedList与 ...

  4. linux 有名管道（FIFO）

    http://blog.csdn.net/firefoxbug/article/details/8137762 linux 有名管道(FIFO) 管道的缓冲区是有限的(管道制存在于内存中,在管道创建时 ...

  5. Comet学习资料

    什么是Comet: http://baike.baidu.com/view/577938.htm?fr=ala0_1 Comet介绍: http://www.ibm.com/developerwork ...

  6. Winpcap网络编程九之Winpcap实战,ARP协议获得MAC表及主机通信

    大家好,本次我们须要完毕的任务是: 完毕两台主机之间的数据通信(数据链路层) 仿真ARP协议获得网段内主机的MAC表 使用帧完毕两台主机的通信(Hello! I'm -) 声明:本文章的目的是为大家的 ...

  7. 【进制问题】【HDU2056】A + B Again

    A + B Again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. 虚拟化之KVM的安装续篇

    介于上篇文章用的网络的方式安装系统并且磁盘文件格式为raw,不支持快照,所以再写下这篇文章,方便后续查看. 目的:通过nfs安装系统,磁盘文件格式为qcow2(支持快照). 如下操作和上篇文章只有部分 ...

  9. JDBC插入百万数据，不到5秒！

    java自带的批量操作,就可以很好的支持大量数据的处理.相比c#,简单很多.c#要使用oracle提供的ODP.NET,效率才很高,但是代码却很复杂.总之,在这方面,c#没得比.当然,这里的表是没加索 ...

  10. 使用bootstrap时遇到的问题及解决办法

    1.用到 Glyphicons图标组件时,要注意文件的存放位置,最好在站点下将下好的bootstrap文件夹复制过来,里面的fonts文件夹不要动,使用的时候直接引用bootstrap.css和boo ...