一：jquery基本概念

1.jquery是一个javascript框架，它是一个轻量级的js库

2.当下流行的js库有：

  • jquery
  • MooTools
  • Prototype

3.$(ducoment) 表示一个jquery对象

4.引入jquery库：

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

5.jquery对象是对dom对象的一系列包装

6.jquery库文件的运行原理：

  1. <script type="text/javascript">
  2. //Dog类
  3. function Dog(){
  4.     }
  5.     //给Dog类添加一些属性和方法
  6.     Dog.prototype={
  7.         hello:function(){    //hello方法
  8.             window.alert('ok');
  9.         },
  10.         "test":"1.2.1"    //属性
  11.     }
  12.     var dog=new Dog();
  13.     dog.hello();    //调用hello方法
  14.     window.alert(dog.test);    //打印test属性的值
  15. </script>

jquery（ready方法）源码：

使用jquery对象操作的例子：

  1.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  2.     <script type="text/javascript">
  3.     // 1.$(ducoment) 表示一个jquery对象
  4.     // 2.jquery对象调用ready方法
  5.     // 3.ready方法中包含的是一个function函数
  6.         $(document).ready(function(){
  7.             window.alert('hello');
  8.         }
  9.         );
  10.     </script>

 注意：

　　在使用jquery开发中，有2中对象。1是jquery对象。2是dom对象。

　　如果是jquery对象只能使用jquery库提供的方法。

　　如果是dom对象，则只能使用js本身提供的方法

二：jquery对象与dom对象的区别及混合使用

由此可以看出，dom对象和jquery对象可以互相转换

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  6.     <script type="text/javascript">
  7.     function testing(){
  8.     //----------dom对象----------
  9.     var obj1=document.getElementById('test');
  10.     alert(obj1.value);
  11.     //----------jquery对象----------
  12.     var $obj2=$('#test');
  13.     alert("obj2="+$obj2.val());
  14.     //----------dom->jquery----------
  15.     var $obj3=$(obj1);
  16.     alert("obj3="+$obj3.val());
  17.     // ----------jquery->dom----------
  18.     // 方式一
  19.     var obj4=$obj2.get(0);
  20.     alert("obj4="+obj4.value);
  21.     // 方式二
  22.     var obj5=$obj2[0];
  23.     alert("obj5="+obj5.value);
  24. }
  25.     </script>
  26. </head>
  27. <body>
  28. <input type="text" value="text" id="test"/>
  29. <input type="submit" value="提交" onclick="testing()">
  30. </body>
  31. </html>

【二】jquery之基础概念与jquery对象与dom对象的区别及混合使用的更多相关文章

  1. jQuery学习-----（二）JQuery对象与DOM对象的区别与转换

    1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...

  2. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  3. 2、jQuery的基本概念-必看-版本-入口函数- jq对象和dom对象区别

    1.4. jQuery的版本 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 大版本分类: 1.x版本:能够兼容IE678浏览 ...

  4. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  5. jQuery对象与DOM对象

    jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...

  6. jQuery对象和dom对象的辨析和相互转化

    jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...

  7. JQuery对象与DOM对象分析

    一.定义: DOM对象(文档对象模型):暂时这么理解:通过JavaScript获取的HTML元素,称为DOM对象.如:var domID=document.getElementById("i ...

  8. 区别jquery对象和dom对象及转换方法

    一.jquery对象 由$() 获取,例如 var div = $("#id"); 这个div是jquery对象,它里面没有dom对象自带的方法.常见的dom对象自带的方法, 例如 ...

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

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

随机推荐

  1. linux 环境RPM 安装MYSQL5.6

    linux 环境RPM 安装MYSQL5.6 系统环境 CentOS7.2 1.关闭selinux 服务[SELinux是一种基于域-类型 模型(domain-type)的强制访问控制(MAC)安全系 ...

  2. Python+OpenCV图像处理（十二）—— 图像梯度

    简介:图像梯度可以把图像看成二维离散函数,图像梯度其实就是这个二维离散函数的求导. Sobel算子是普通一阶差分,是基于寻找梯度强度.拉普拉斯算子(二阶差分)是基于过零点检测.通过计算梯度,设置阀值, ...

  3. windows与linux ping 显示的ip不一样

    DNS修改了一下域名对应的IP后,域名不能访问了,我在windows下ping一下域名,IP没有变过来,还是老的IP.我在linux下又ping了一下域名,是换过了的.这个问题是由windows下的本 ...

  4. hibernate自动创建表报表不存在

    在hibernate.cfg.xml配置了<property name="hibernate.hbm2ddl.auto">update</property> ...

  5. UVA - 748 Exponentiation

    Problems involving the computation of exact values of very large magnitude and precision are common. ...

  6. mvc 前端校验

    首先解决 Ajax.BeginFor异步提交表单,给表单添加样式的问题.不能直接用class属性,网上找了很多都是用ClassName,经过测试不管用,看源代码发现生成的是ClassName而非cla ...

  7. Fiddler抓取手机端(ios+android)APP接口数据(http+https)

    (1)android 环境要求: PC机和手机连接在同一网络下 工具下载地址: Fiddler网上可以下载,自行下载.注意:需要安装fiddlercertmaker(网上自行下载)进行认证 配置步骤: ...

  8. Magnum Kubernetes源码分析(一)

    Magnum版本说明 本文以magnum的mitaka版本代码为基础进行分析. Magnum Kubernetes Magnum主要支持的概念有bay,baymodel,node,pod,rc,ser ...

  9. TensorFlow 生成 .ckpt 和 .pb

    原文:https://www.cnblogs.com/nowornever-L/p/6991295.html 1. TensorFlow  生成的  .ckpt 和  .pb 都有什么用? The . ...

  10. 自动化测试系列：Selenium UI自动化解决iframe定位问题

      更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6735116.html 一个阴雨霏霏 ...