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");