jQuery 引入

DOM(Document Object Model):文档对象模型

– 浏览器提供的操作HTML文档内容的应用程序接口

– 用于对文档(HTML、CSS元素)进行动态操作,如增加文档内容、删除文档内容、修改文档内容等等

DOM的核心就是对DOM树的操作,即增加、删除、修改DOM树中的内容

  1. DOM节点是一个对象(属性和方法)
  2. 访问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语法

基本功能

  1. 快速、精确地选择某一个(某一组)元素
  2. 返回该元素(组)的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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值