jQuery入门和DOM对象
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节点三种类型:
- 元素节点 :
- ...
- 属性节点 :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对象的各自独立。
例如:
title 是dom对象,因此可以使用js属性或方法 title.innerHTML
$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对象的更多相关文章
- jquery 字符串转dom对象及对该对象使用选择器查询
<script> $(document).ready(function () { var htmlStr = '<div id="outerDiv">< ...
- jQuery获取的dom对象和原生的dom对象有何区别
js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合,所以说他们两者是不同的对象类型不等价 原生DOM对象转jQuery对象 var box = docu ...
- jquery对象和dom对象的相互转换
更好的学习jquery,要区分好jquery对象和dom对象的区别. 先具体说说dom.举个例子 <html> <head></head> <body> ...
- DOM对象与JQUERY对象的相互转化
普通处理,通过标准JavaScript处理: 1 var p = document.getElementById('imooc') 2 p.innerHTML = '您好!学习jQuery才是最佳的途 ...
- jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery对象和dom对象的辨析和相互转化
jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...
- 关于jQuery对象与DOM对象
今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...
- Dom对象和jQuery包装集
Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...
随机推荐
- 基于icamera usb2.0的视频采集系统之mt9m001c12stc测评
基于usb2.0的视频采集系统之mt9m001c12stc测评 因为该sensor不带isp,所以不支持白平衡,默认图像彩色颜色会和实际偏离,演示如下 颜色偏绿,所以降低该通道的增益,或者提供其他通道 ...
- font-family与font-face的区别
font-family:指定字体 设置后,电脑上无该字体时,观看网页不能显示该字体效果, 针对中文版操作系统,为保证网页效果,通常只指定:宋体.黑体.微软雅黑等系统上默认自带的字体. font-fac ...
- 2019年Spring Boot面试都问了什么?快看看这22道面试题!
Spring Boot 面试题 1.什么是 Spring Boot? 2.Spring Boot 有哪些优点? 3.什么是 JavaConfig? 4.如何重新加载 Spring Boot 上的更改, ...
- 想要金九银十面试通关,不懂 Java多线程肯定是不行的!
作者 | 纳达丶无忌 如果对什么是线程.什么是进程仍存有疑惑,请先 Google 之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用 CPU 的资源,因为所有的多线程代码都 ...
- 真伪随机数 ——Random和SecureRandom
Random Random用来创建伪随机数.所谓伪随机数,是指只要给定一个初始的种子,产生的随机数序列是完全一样的. 要生成一个随机数,可以使用nextInt().nextLong().nextFlo ...
- AQS系列(五)- CountDownLatch的使用及原理
前言 前面四节学完了AQS最难的两种重入锁应用,下面两节进入实战学习,看看JUC包中其他的工具类是如何运用AQS实现特定功能的.今天一起看一下CountDownLatch. CountDownLatc ...
- Maven pom.xml 全配置(一)常用配置
Maven pom.xml 全配置(一)常用配置 这里贴出一个Maven中出现频率较高的配置参数注释,方便理解项目中Maven的配置具体的作用.如果在此博文中没有找到你想看到的参数,可以移步Maven ...
- JS---案例:简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
- JQuery 表单textarea控制字数
/** *textarea 字数限制 *obj textarea * maxlength 限制的最大字数 */ function textarealength(obj,maxlength){ var ...
- 如何从Mac删除恶意广告软件,摆脱那些通过弹出广告或工具栏入侵Mac的恶意软件
厌倦了那些利用弹出式广告和工具栏之类入侵Mac的恶意软件?该如何摆脱Mac上的恶意软件呢?今天小编为大家带来两种方法从Mac 删除广告软件,甚至阻止它到达您的Mac,感兴趣的朋友一起来看看吧! 方法一 ...