一：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. 前端框架VUE----对象的单体模式

    对象的单体模式 为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式 1 var person = { 2 name:'小马哥', 3 age:12, 4 fav(){ 5 consol ...

  2. The Little Prince-summary

    The Little Prince-summary 这些年 ”寂寞”这个词使用频率越来越高 这些年 不管有钱没钱 有对象没对象的人 入夜时分总是心里空空 不知生活的意义是什么 我们不喜欢一座城市 对一 ...

  3. Prometheus监控学习笔记之解读prometheus监控kubernetes的配置文件

    0x00 概述 Prometheus 是一个开源和社区驱动的监控&报警&时序数据库的项目.来源于谷歌BorgMon项目.现在最常见的Kubernetes容器管理系统中,通常会搭配Pro ...

  4. Docker学习笔记之Docker应用于服务化开发

    0x00 概述 上一节里我们谈到了小型的独立项目如何使用 Docker Compose 来搭建程序的运行环境,对于由多人或多部门参与的中大型服务化架构的项目,仅由一个 Docker Compose 项 ...

  5. Spring Boot(九)：定时任务

    Spring Boot(九):定时任务 一.pom包配置 pom包里面只需要引入springboot starter包即可 <dependencies> <dependency> ...

  6. netstat -ano输出中的ESTABLISHED off

    今天,我们性能测试的环境出现个奇怪现象,通过oci direct load回库的进程似乎僵死了,应用端cpu 200%(两个线程在跑,一个是一直在ocidirectload没反应,另外一个是正在sem ...

  7. 02: djangorestframework使用

    1.1 djangorestframework登录.认证和权限 1.认证与权限相关模块 # -*- coding: utf-8 -*- from django.utils import six fro ...

  8. body-parser 用法

    1.下载 body-parser 模块  :   npm install body-parser 2.require body-parser 模块(引入),并用一个变量接收(此处栗子变量为 bodyp ...

  9. ODAC（V9.5.15) 学习笔记（六）TOraSQL、TOraTable和TOraStoredProc

    TOraSQL是一个SQL语句执行控件,包括PL/SQL块等,不返回数据集结果. 名称 类型 说明 ChangeCursor Boolean 在非阻塞模式下是否允许改变屏幕的光标 WaitExecut ...

  10. ODAC（V9.5.15) 学习笔记（一）总论

    一直在使用ODAC做开发,没时间仔细研究一下,目前采用的是3层结构,ODAC+TDataSetProvider+TClientDataSet做数据处理,也没有多大问题.下一步要开发B/S的程序了,打算 ...