一：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. Codeforce 287A - IQ Test （模拟）

    In the city of Ultima Thule job applicants are often offered an IQ test. The test is as follows: the ...

  2. 第一节 JavaScript概述

    第一节 JavaScript概述 JavaScript:其实就是对HTML+CSS静态页面进行样式修改,使其实现各种动态效果. 编写JS脚本基本步骤: 1. HTML+CSS静态布局: 2. 确定要修 ...

  3. 关于innodb_flush_log_at_trx_commit、innodb_flush_method、innodb_log_block_size和fsync()、O_DIRECT、iops、云盘的关系与总结

    想着整理关于innodb_flush_log_at_trx_commit.innodb_flush_method.innodb_log_block_size和fsync().O_DIRECT.iops ...

  4. 20145325张梓靖 《网络对抗技术》 Web基础

    20145325张梓靖 <网络对抗技术> Web基础 实验内容 开启apahce,设计web前端HTML 设计web前端javascipt 设计web后端mysql 设计web后端php ...

  5. 学习Struts2的个人疑惑及问题解决

    刚开始学习SSH框架中Struts2时,个人疑惑以及一些问题总结一下. 1.package节点namespace属性值决定访问路径问题       namespace不写或写namespace=&qu ...

  6. topcoder srm 704 div1

    1.对于一棵树上的一个节点$u$,定义$f(u)$表示树上距离$u$最远的节点到$u$的距离.给出每个节点的$f$值,构造出这棵树. 思路:找到树的主干,然后不在主干上的节点一定可以连接到主干的某个节 ...

  7. topcoder srm 707 div1

    1 构造一个棋盘,长宽n,m不超过50,每个格子为障碍或者非障碍两种,使得从(0,0)到(n-1,m-1)的最短路为给定的值k. 思路:如果k小于等于98,那么一定存在没有障碍的棋盘满足要求.否则,最 ...

  8. SSM集成activiti6.0错误集锦（一）

    项目环境 Maven构建 数据库:Orcle12c 服务器:Tomcat9 <java.version>1.8</java.version> <activiti.vers ...

  9. Docker 入门指南——资源工具篇

    好工具 dive wagoodman/dive A tool for exploring each layer in a docker image 参考 用 Dive 看 Docker Image 裡 ...

  10. Win10子系统Ubuntu安装llvm+clang

    https://apt.llvm.org/ 首先 然后 再然后修改/etc/apt/sources.list,添加下面的东西 然后 参考: https://blog.kowalczyk.info/ar ...