jQuery入门和DOM对象

1.开发准备

1. 下载的版本:

jquery-3.3.1.min.js :压缩版,发布版84.8KB

jquery-3.3.1.js :常规版,开发版265KB

2. 开发工具:

​ hbuilder webstrom(推荐) dreamweaver idea

​ notepad++

3. 使用:

​ 引入jQuery

html中 如果出错,不提示!

如果调试工具(F12)没有错误提示,但显示效果不一致,考虑html错误

常见错误:

引入js库时

必须是

<script type="text/javascript src="...">
</script>

不能

<script type="text/javascript src="..."/>

2.初始化函数

1.jQuery

$等效于jQuery
--- jQuery初始化函数 ---
$(document).ready(function(){ });//初始化函数,当网页中的dom元素(不包含图片、视频、资源)全部加载完毕后 立刻执行
--- jQuery初始化函数简化版 ---
$(function(){ });

2.javascript

onload:

javascript,初始化函数,当网页中的dom元素(关联图片、视频、资源)全部加载完毕后 立刻执行.

3.示例

		<script type="html/javascript" src="jquery-3.4.1.js">
</script> <script type="text/javascript"> $(function(){ //jQuery初始化函数
var $title = $("#myTitle");
alert($title.html()+"jquery");
}); function init(){ //javascript初始化函数
var title = document.getElementById("myTitle");
alert(title.innerHTML);
}
</script>
</head>
<body onload="init()">
<p id="myTitle">你喜欢什么颜色?</p>
</body>

3.对象

1.dom模型:

​ 将html xml等文档结构的标签语言看成dom模型

2.dom节点三种类型:

  1. 元素节点 :
      ...
    • 属性节点 :title src alt
    • 文本节点:文本节点

3.Dom对象:

以上三种节点类型的具体对象就是Dom对象。

使用层面:凡是Javascript能够直接操作的对象,就是Dom对象。

例如

var title = document.getElementById("myTitle");//通过js获取到的title对象 就是一个dom对象(就是<p>对象)   myTitle是属性id值

4.jQuery对象

使用层面:凡是jQuery能够直接操作的对象,就是jQuery对象。

例如:

var $title = $("#myTitile") ; //通过jquery获取到的 $title 就是一个jquery对象。	myTitle是属性id值

--同样一个元素,即可以成为一个dom对象(javascript对象),也可以成为一个jquery对象--

注意:dom对象 只适用于js的各种语法(函数、属性),jquery对象只用于jquery的各种语法(函数、属性)。

dom对象和jquery对象的各自独立。

例如

  1. title 是dom对象,因此可以使用js属性或方法 title.innerHTML

  2. $title 是jquery对象,因此可以使用jquery属性或方法 $title.html()

建议:

js对象 直接写title

jquery 加上$,例如$title

5.dom对象和jquery对象的转换:

title.innerHTML;

tile ->$title

dom对象->jquery对象 : jquery工厂, $(dom对象)

			 	var title = document.getElementById("myTitle");
alert($(title).innerHTML);

$title.html();

$title->title

jquery对象 ->dom对象:

基础:jquery对象默认是一个数组 或集合 ;dom对象默认是一个单独的对象

​ 数组:jquery对象[0]

​ 集合:jquery对象.get(0)

				var $title = $("#myTitle");
alert($title[0].html()+"jquery");
alert($title[0].innerHTML+"javascript");
alert($title.get(0).innerHTML+"javascript");

jQuery入门和DOM对象的更多相关文章

  1. jquery 字符串转dom对象及对该对象使用选择器查询

    <script> $(document).ready(function () { var htmlStr = '<div id="outerDiv">< ...

  2. jQuery获取的dom对象和原生的dom对象有何区别

    js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合,所以说他们两者是不同的对象类型不等价 原生DOM对象转jQuery对象 var box = docu ...

  3. jquery对象和dom对象的相互转换

    更好的学习jquery,要区分好jquery对象和dom对象的区别. 先具体说说dom.举个例子 <html> <head></head> <body> ...

  4. DOM对象与JQUERY对象的相互转化

    普通处理,通过标准JavaScript处理: 1 var p = document.getElementById('imooc') 2 p.innerHTML = '您好!学习jQuery才是最佳的途 ...

  5. jQuery对象与DOM对象

    jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...

  6. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  7. jQuery对象和dom对象的辨析和相互转化

    jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...

  8. 关于jQuery对象与DOM对象

    今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...

  9. Dom对象和jQuery包装集

    Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...

随机推荐

  1. C++ 并发编程指南(收藏笔记)

    git地址: https://github.com/forhappy/Cplusplus-Concurrency-In-Practice https://github.com/forhappy/Cpl ...

  2. asp.net core 配置微信返回信息接口

    这玩意弄了两天 微信的API需要升级了 只有一份PHP的DEMO 还有个坑 返回值一定要是 微信传入的echostr 否则 出现配置失败,这个问题耗了我俩小时 最后还是在论坛看到的解决方案. 项目必须 ...

  3. Everspin非易失性MRAM切换技术

    切换MRAM技术 切换MRAM使用1个晶体管,1个MTJ单元来提供简单的高密度存储器.Everspin使用获得专利的Toggle电池设计,可提供高可靠性.数据在温度下20年始终是非易失性的. 在读取期 ...

  4. Day 04 作业

    目录 作业 简述Python的五大数据类型的作用.定义方式.使用方法: 数字类型 字符串类型 列表 字典 布尔型 一行代码实现下述代码实现的功能: 写出两种交换x.y值的方式: 一行代码取出nick的 ...

  5. 【搞定Jvm面试】 JVM 垃圾回收揭秘附常见面试题解析

    JVM 垃圾回收 写在前面 本节常见面试题 问题答案在文中都有提到 如何判断对象是否死亡(两种方法). 简单的介绍一下强引用.软引用.弱引用.虚引用(虚引用与软引用和弱引用的区别.使用软引用能带来的好 ...

  6. 【设计模式】代理模式-Proxy

    转载:https://www.cnblogs.com/yangchongxing/p/7654725.html 代理模式定义如下: Provide a surrogate or placeholder ...

  7. 从零开始—Socket系统调用和多态封装

    1 重新搭建实验环境 前面都是用实验楼环境做的实验,偷的懒总是要还的,这一次重装环境前后花了十几个小时,踩了无数的坑. 1.1 Ubuntu和LINUX内核的区别 Ubuntu是基于LINUX内核编写 ...

  8. Spring Cloud进阶之路 | 二:服务提供者(discovery)

    1 创建父项目 以前文所述,以spring boot 2.1.7.RELEASE为基,spring cloud版本为Greenwich.SR2,spring cloud alibaba版本为2.1.0 ...

  9. reselect是怎样提升react组件渲染性能的?

    reselect是什么? reselect是配合redux使用的一款轻量型的状态选择库,目的在于当store中的state重新改变之后,使得局部未改变的状态不会因为整体的state变化而全部重新渲染, ...

  10. Cesium专栏-terrain地形、3dtiles模型、gltf模型 高度采样

    在Cesium中,对于terrain地形.3dtiles模型.gltf模型的高度采样是一个很基本的功能,基于此,可以做一些深度应用,而Cesium已经帮我们提供了相应的API,在这里,我帮大家总结一下 ...