jQuery 引入

最新推荐文章于 2024-02-27 12:00:00 发布

菜鸟学习中心

最新推荐文章于 2024-02-27 12:00:00 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_23107065/article/details/104168726

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

菜鸟学习中心

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 引入

DOM（Document Object Model）：文档对象模型– 浏览器提供的操作HTML文档内容的应用程序接口– 用于对文档(HTML、CSS元素)进行动态操作，如增加文档内容、删除文档内容、修改文档内容等等DOM的核心就是对DOM树的操作，即增加、删除、修改DOM树中的内容DOM节点是一个对象（属性和方法）访问DOM节点面向对象中用原生的JavaScript 也能操作DOM...
复制链接

扫一扫

专栏目录