DOM(Document Object Model):文档对象模型
– 浏览器提供的操作HTML文档内容的应用程序接口
– 用于对文档(HTML、CSS元素)进行动态操作,如增加文档内容、删除文档内容、修改文档内容等等
DOM的核心就是对DOM树的操作,即增加、删除、修改DOM树中的内容
- DOM节点是一个对象(属性和方法)
- 访问DOM节点
面向对象中用原生的JavaScript 也能操作DOM(理解成页面中的一个个元素,比div、p)
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<!-- <link rel="stylesheet" type="text/javascript" herf="jquery-3.4.1.min.js"> 错误的引入方式-->
</head>
<body>
<div class="className" style="background:red;width:100%;height:50px;"></div>
<!-- <div id="idName" style="background:red;width:100%;height:50px;"></div> -->
</body>
</html>
<script type="text/javascript">
// 原生JavaScript操作DOM树(理解成一个个元素),结果是DOM对象
// var res = document.getElementById('id');
var res = document.getElementsByClassName('class');
// jquery 获取DOM树,结果是一个jQuery对象
// 通过ID获取结点
// res = $('id');
// 通过class获取结点
// res=$('.class')
console.log(res);
<script>
jQuery选择器(只是一个JS类库,但用的人较多;可以自己写库)
jQuery本质上是对JS的类(功能)的封装,有些功能用JavaScript实现起来非常复杂。
比如说求和函数,JavaScript是没有预定义的求和函数的,而如果自己写的话非常麻烦,需要对传值判断、类型转换等操作,而如果用jQuery就可以直接调用,不用自己写。
jQuery的引入可以用script标签中的src引入,也可以用link标签的herf标签引用,但前者解析为一个js程序交给js执行引擎去运行;后者解析为一个文本交给渲染引擎,js执行引擎不知道有这个东西,所以不能解析jQuery语法
基本功能
- 快速、精确地选择某一个(某一组)元素
- 返回该元素(组)的jQuery包装集
优势
- 简洁
- 强大
选择器类别划分
标签选择器: var div = $(‘div’);
类选择器: var toHidden = $(‘.toHidden’);
ID选择器: var toExten = $(‘#toExten’);
群选择器: var nodes = $(‘div, p, ul, ol’);
通用选择器:var anyNodes = $(‘*’);
用JS自定义函数模拟jQuery操作
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="className" style="background:red;width:100%;height:50px;"></div>
<!-- <div id="idName" style="background:red;width:100%;height:50px;"></div> -->
</body>
</html>
<script type="text/javascript">
function $(selector) {
var _selector = selector.substr(0, 1);
if (_selector == '.') {
return document.getElementsByClassName(
selector.substr(1, selector.length - 1));
}
if (_selector == '#') {
return document.getElementById(selector.substr(1, selector.length - 1));
}
}
res = $('.className');
//res =$('#idName');
console.log(res);
<script>
jQuery中循环数组:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<!-- <link rel="stylesheet" type="text/javascript" herf="jquery-3.4.1.min.js"> 可以引入jQuery,但解析不了 -->
</head>
<body>
</body>
</html>
<script type="text/javascript">
var arr = ['1', '2', '3', '4', '5'];
$.each(arr, function(i, v) { // 参数1:遍历的数组,参数2:遍历规则(函数),由each调用
if (v == 3) {
return true; // return false 相当于break;
// return false;//eturn ture 相当于continue
}
console.log('索引是:' + i + ',值是:' + v);
})
// jQuery内部运行原理,callback自己定义,但由each调用
$ = {
each: function(arr, callback) {
callback(); // callback 是自定义函数
}
}
</script>