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库时

必须是

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

不能

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

2.初始化函数

1.jQuery

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

2.javascript

onload:

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

3.示例

  1. <script type="html/javascript" src="jquery-3.4.1.js">
  2. </script>
  3. <script type="text/javascript">
  4. $(function(){ //jQuery初始化函数
  5. var $title = $("#myTitle");
  6. alert($title.html()+"jquery");
  7. });
  8. function init(){ //javascript初始化函数
  9. var title = document.getElementById("myTitle");
  10. alert(title.innerHTML);
  11. }
  12. </script>
  13. </head>
  14. <body onload="init()">
  15. <p id="myTitle">你喜欢什么颜色?</p>
  16. </body>

3.对象

1.dom模型:

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

2.dom节点三种类型:

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

3.Dom对象:

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

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

例如

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

4.jQuery对象

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

例如:

  1. 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对象)

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

$title.html();

$title->title

jquery对象 ->dom对象:

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

​ 数组:jquery对象[0]

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

  1. var $title = $("#myTitle");
  2. alert($title[0].html()+"jquery");
  3. alert($title[0].innerHTML+"javascript");
  4. 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. 基于icamera usb2.0的视频采集系统之mt9m001c12stc测评

    基于usb2.0的视频采集系统之mt9m001c12stc测评 因为该sensor不带isp,所以不支持白平衡,默认图像彩色颜色会和实际偏离,演示如下 颜色偏绿,所以降低该通道的增益,或者提供其他通道 ...

  2. font-family与font-face的区别

    font-family:指定字体 设置后,电脑上无该字体时,观看网页不能显示该字体效果, 针对中文版操作系统,为保证网页效果,通常只指定:宋体.黑体.微软雅黑等系统上默认自带的字体. font-fac ...

  3. 2019年Spring Boot面试都问了什么?快看看这22道面试题!

    Spring Boot 面试题 1.什么是 Spring Boot? 2.Spring Boot 有哪些优点? 3.什么是 JavaConfig? 4.如何重新加载 Spring Boot 上的更改, ...

  4. 想要金九银十面试通关,不懂 Java多线程肯定是不行的!

    作者 | 纳达丶无忌 如果对什么是线程.什么是进程仍存有疑惑,请先 Google 之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用 CPU 的资源,因为所有的多线程代码都 ...

  5. 真伪随机数 ——Random和SecureRandom

    Random Random用来创建伪随机数.所谓伪随机数,是指只要给定一个初始的种子,产生的随机数序列是完全一样的. 要生成一个随机数,可以使用nextInt().nextLong().nextFlo ...

  6. AQS系列(五)- CountDownLatch的使用及原理

    前言 前面四节学完了AQS最难的两种重入锁应用,下面两节进入实战学习,看看JUC包中其他的工具类是如何运用AQS实现特定功能的.今天一起看一下CountDownLatch. CountDownLatc ...

  7. Maven pom.xml 全配置(一)常用配置

    Maven pom.xml 全配置(一)常用配置 这里贴出一个Maven中出现频率较高的配置参数注释,方便理解项目中Maven的配置具体的作用.如果在此博文中没有找到你想看到的参数,可以移步Maven ...

  8. JS---案例:简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  9. JQuery 表单textarea控制字数

    /** *textarea 字数限制 *obj textarea * maxlength 限制的最大字数 */ function textarealength(obj,maxlength){ var ...

  10. 如何从Mac删除恶意广告软件,摆脱那些通过弹出广告或工具栏入侵Mac的恶意软件

    厌倦了那些利用弹出式广告和工具栏之类入侵Mac的恶意软件?该如何摆脱Mac上的恶意软件呢?今天小编为大家带来两种方法从Mac 删除广告软件,甚至阻止它到达您的Mac,感兴趣的朋友一起来看看吧! 方法一 ...