一：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库文件的运行原理：

<script type="text/javascript">

//Dog类

function Dog(){

    }

    //给Dog类添加一些属性和方法

    Dog.prototype={

        hello:function(){    //hello方法

            window.alert('ok');

        },

        "test":"1.2.1"    //属性

    }

    var dog=new Dog();

    dog.hello();    //调用hello方法

    window.alert(dog.test);    //打印test属性的值

</script>

jquery（ready方法）源码：

使用jquery对象操作的例子：

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

    <script type="text/javascript">

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

    // 2.jquery对象调用ready方法

    // 3.ready方法中包含的是一个function函数

        $(document).ready(function(){

            window.alert('hello');

        }

        );

    </script>

 注意：

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

    <script type="text/javascript">

    function testing(){

    //----------dom对象----------

    var obj1=document.getElementById('test');

    alert(obj1.value);

    //----------jquery对象----------

    var $obj2=$('#test');

    alert("obj2="+$obj2.val());

    //----------dom->jquery----------

    var $obj3=$(obj1);

    alert("obj3="+$obj3.val());

    // ----------jquery->dom----------

    // 方式一

    var obj4=$obj2.get(0);

    alert("obj4="+obj4.value);

    // 方式二

    var obj5=$obj2[0];

    alert("obj5="+obj5.value);

}

    </script>

</head>

<body>

<input type="text" value="text" id="test"/>

<input type="submit" value="提交" onclick="testing()">

</body>

</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. 在CentOS 6.X中安装中文字体

    1.从Windows中 拷贝或者网络上下载你想要安装的字体文件(*.ttf文件) 2.新建字体目录 #mkdir /usr/share/fonts/ 3.修改字体文件的权限,使root用户以外的用户也 ...

  2. Java 高级开发必修知识---内部类

    摘自:http://www.cnblogs.com/lsy131479/p/8798912.html Java 内部类分为: 1)成员内部类 2)静态嵌套类 3)方法内部类 4)匿名内部类 内部类的共 ...

  3. @Configuration与@Bean作用

    Spring的Java配置方式是通过@Configuration和@Bean这两个注解来实现 @Configuration可以作用在任意类上,表示该类是一个配置类,其实就相当于一个xml配置文件. @ ...

  4. django中表单处理

    在web端与后端交互时,我们除了使用html原生的form标签,还可以使用django自带的表单. Django 提供广泛的工具和库来帮助你构建表单来接收网站访问者的输入,然后处理以及响应输入. HT ...

  5. JVM结构及堆的划分

    一.JVM结构 1.类加载子系统与方法区 类加载子系统负责从文件系统或者网络中加载Class信息,加载的类信息存放于一块称为方法区的内存空间.除了类的信息外,方法区中可能还会存放运行时常量池信息,包括 ...

  6. mysql 8.0 Druid连接时调用getServerCharset报空指针异常解决方法

    类似错误信息如下: 16:52:01.163 [Druid-ConnectionPool-Create-1641320886] ERROR com.alibaba.druid.pool.DruidDa ...

  7. linux 文件同步

    ref: https://www.cnblogs.com/MacoLee/p/5633650.html https://wenda.so.com/q/1505308236213470 http://b ...

  8. 最菜的小鸟（mkdir -pv）

    命令 mkdir -pv /usr/local/modules/{openjdk,nginx,tomcat,mariadb}/{manifests,files,templates,lib,tests, ...

  9. 《linux内核设计分析》 第一周作业

    linux 基础入门 课程总结 一.linux系统简介 linux操作系统 整个计算机可以分为 硬件 内核 系统调用 应用程序 操作系统就属于内核和系统调用这两部分 操作系统历史发展 批处理操作系统 ...

  10. 20145208 蔡野 《网络对抗》Exp5 MSF基础应用

    20145208 蔡野 <网络对抗>Exp5 MSF基础应用 链接地址 主动攻击:利用ms08_067_netapi进行攻击 对浏览器攻击:MS10-002 对客户端攻击:adobe_to ...