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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  8. <script type="text/javascript">
  9.    window.onload = function()
  10.    {
  11. 	   alert("niujiabin");
  12.     }
  13.  
  14. 	window.onload = function()
  15. 	{
  16. 		alert("bcd");
  17. 		}
  18.  
  19. </script>
  20. </head>
  21. <body>
  22. </body>
  23. </html>

结果是：

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  8. <script type="text/javascript">
  9.    $(function()
  10.    {
  11. 	   alert("abc");
  12.  
  13. 	   });
  14. 	$(function(){
  15.  
  16. 		alert("bcd");
  17. 		});
  18.  
  19. </script>
  20. </head>
  21. <body>
  22. </body>
  23. </html>

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

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

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  8. <script type="text/javascript">
  9.    $(function()
  10.    {
  11.      var hello = document.getElementById("hello");
  12. 	 hello.css("color","red");
  13. 	});
  14. </script>
  15. </head>
  16. <body>
  17. <div id="hello">
  18.   <ul>
  19.     <li>niujiabin</li>
  20. 	<li class="abc">maybe</li>
  21. 	<li>gossipgo</li>
  22.   </ul>
  23. </div>
  24.  
  25. </body>
  26. </html>

运行会出现错误：

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

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

运行结果：

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  8. <script type="text/javascript">
  9.    $(function()
  10.    {
  11. 	 ($("li.abc")[0]).innerHTML = "niujiabinaaaa";
  12. 	});
  13. </script>
  14. </head>
  15. <body>
  16. <div id="hello">
  17.   <ul>
  18.     <li>niujiabin</li>
  19. 	<li class="abc">maybe</li>
  20. 	<li>gossipgo</li>
  21.   </ul>
  22. </div>
  23.  
  24. </body>
  25. </html>
  1. ($("li.abc")[0]).innerHTML = "niujiabinaaaa";
  2. //li.abc取出一个jquery对象，因为他就有一个元素我们得到第一个，在后面加一个[0],就变成了js对象，
  3. //最后调用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. Java专项面试训练（一）

    1.在Java中,( )类提供定位本地文件系统,对文件或目录及其属性进行基本操作( D ) A.FileInputStream B.FileReader C.FileWriter D.File解析:F ...

  2. HTTP Digest authentication

    (Digest authentication)是一个简单的认证机制,最初是为HTTP协议开发的,因而也常叫做HTTP摘要,在RFC2671中描写叙述.其身份验证机制非常easy,它採用杂凑式(hash ...

  3. qt获取本机网络信息

    networkinformation.h #include<QtGui/QWidget> #include<QLabel> #include<QPushButton> ...

  4. ffmpeg常用参数一览

    基本选项: -formats 输出所有可用格式 -f fmt 指定格式(音频或视频格式) -i filename 指定输入文件名,在linux下当然也能指定:0.0(屏幕录制)或摄像头 -y 覆盖已有 ...

  5. Android混淆配置文件规范

    #打开project.properties文件中的proguard.config. -optimizationpasses 5 # 指定代码的压缩级别 -dontusemixedcaseclassna ...

  6. C# 静态类与非静态类、静态成员的区别分析

    静态类静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量.在声明一个类时使用static关键字,具有两个方面的意义:首先,它防止程序员写代码来实例化 ...

  7. 【数据处理】各门店POS销售导入

    --抓取西部POS数据DELETE FROM POSLSBF INSERT INTO POSLSBFselect * from [192.168.1.100].[SCMIS].DBO.possrlbf ...

  8. Uncaught TypeError: Object [object Object] has no method 'live'

    $( selector ).live( events, data, handler );                // jQuery 1.3+$( document ).delegate( se ...

  9. 关于微信小程序的一些思考

    ### 怎么样理解小程序? * 微信的重点产品* 一个事实OS,目前并不知道小程序的入口在哪里?* 小程序的入口可能在如下三个地方: 1. 发现入口 2. 扫码 3. 搜索框 * 小程序没有关注, 意 ...

  10. jquery判断客户端的类型

    针对不同客户端下载链接的页面响应样式不一样,更人性点而已 //匹配客户端类型 var isAndroid = navigator.userAgent.toLowerCase().match(/andr ...