一：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. 相关Linux命令

    #若服务不小心开启但是想关闭时,可以使用这个 命令:adstrtal.sh apps/apps(脚本  数据库用户名/密码) 若想启动命令:adstrtal.sh apps/apps ———————— ...

  2. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  3. Builgen 插件——IntelliJ IDEA和Eclipse Java Bean Builder模式代码生成器-比lombok更符合需求

    builder模式在越来越多的项目中使用,类似于alibaba fastjson JSONObject.fluentPut(),调用一个方法后返回这个对象本身,特别适合构建一些参数超级多的对象,代码优 ...

  4. j2ee分布式缓存同步实现方案dlcache

    现成的分布式K/V缓存已经有很多的实现,最主要的比如redis,memcached,couchbase.那为什么我们还要自己去实现呢,在我们解决了分布式系统下大量rpc调用导致的高延时后,我们发现很多 ...

  5. 【ASP.Net MVC3 】使用Unity 实现依赖注入

    转载于:http://www.cnblogs.com/techborther/archive/2012/01/06/2313498.html 家人身体不太好,好几天没在园子里发帖了. 新项目还是要用M ...

  6. DevExpress GridControl使用方法总结2

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...

  7. 2018-2019-1 20189206 《Linux内核原理与分析》第六周作业

    linux内核分析学习笔记 --第五章 系统调用的三层机制 学习重点--深入理解系统调用的过程 给MenuOS添加命令 添加命令的方式较为简单,在LinuxKernel/menu/test.c目录下, ...

  8. UML建模类图【2】--☆☆

    虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: 上面是UML的语法. 在画类图的时候,理清类和类之 ...

  9. linux tmux 工具使用 tmux.conf 文件

    set -g prefix ^a unbind ^b bind a send-prefix unbind '"' bind - splitw -v unbind % bind \ split ...

  10. 转载:索引与分片 plus

    [Python笔记]序列(一)索引.分片   Python包含6种内建序列:列表.元组.字符串.Unicode字符串.buffer对象.xrange对象.这些序列支持通用的操作: 索引 索引是从0开始 ...