一：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. 记账本微信小程序开发三

    一.制作登陆界面: 更改全局配置,改颜色,名称: 界面 格式 登录界面 二.页面的跳转 按钮的设置 注册事件 结果

  2. bind的封装

    1.bind.call.apply三者的区别: 1)bind的返回值是一个函数体,不会被立即调用 2)call.apply会立即调用,第一个参数都是用来改变this的指向,两者的区别是前者传递参数的时 ...

  3. 怎样从外网访问内网WampServer？

    本地安装了一个WampServer,只能在局域网内访问,怎样从外网也能访问到本地的WampServer呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WampServer 默认安装的WampSer ...

  4. hiho一下 第144周

    题目1 : 机会渺茫 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在追求一名学数学的女生小Z.小Z其实是想拒绝他的,但是找不到好的说辞,于是提出了这样的要求: ...

  5. django后台管理－ModelAdmin对象

    Django最强大的部分之一是自动生成的管理后台界面. 它从你的模型中读取元数据,以提供一个快速的.以模型为中心的界面,信任的用户可以在这里管理你网站上的内容. 建议管理后台仅作为组织的一个内部管理工 ...

  6. 10大H5前端框架 ......>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这 ...

  7. Django基础(10): URL重定向的HttpResponseDirect, redirect和reverse的用法详解

    利用django开发web应用, 我们经常需要进行URL重定向,有时候还需要给URL传递额外的参数.比如用户添加文章完成后需要转到文章列表或某篇文章详情.因此熟练掌握HttpResponseDirec ...

  8. Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作

    Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常ID ...

  9. 关于__declspec(dllexport)

    windows下dll动态库函数的导入与导出. __declspec Microsoft Specific __declspec ( extended-attribute ) declarator l ...

  10. 第一章-硬件组成及linux发展历史(1)

    一.服务器与计算机的组成? 计算机组成主要有:CPU.硬盘.内存.电源.显示器.鼠标.键盘 服务器组成主要有:CPU.硬盘.内存.电源.RAID卡.远程控制卡 CPU: 即:中央处理器,是一块超大规模 ...