01_初识jquery

最新推荐文章于 2022-04-18 20:46:45 发布

自然醒^

最新推荐文章于 2022-04-18 20:46:45 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/Lime_00/article/details/106883144

版权

jQuery是什么？

jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）.
在jQuery官方Logo下方还有一个副标题（write less, do more）, 体现了jQuery除了查询以外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单

体验jQuery
- 原生JS设置背景

<script>
// 查询
    var div = document.getElementsByTagName("div");
    var one = document.getElementsByClassName("one");
    var two = document.getElementById("two");
// 操作css
    div[0].style.backgroundColor = "red";
    one[0].style.backgroundColor = "yellow";
    two.style.backgroundColor = "blue";
</script>

使用jQuery设置背景

<script>
  $(document).ready(function () {
// 查询，操作CSS一步到位
      $("div").eq(0).css('background', 'red');
      $(".one").eq(0).css('background', 'yellow');
      $("#two").css('background', 'blue');
  });
</script>

为什么要使用jQuery？

强大选择器: 方便快速查找DOM元素
- 如上面实例所展示一样，通过jQuery查找DOM元素要比原生js快捷很多
- jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器
链式调用: 可以通过.不断调用jQuery对象的方法
- 如上面实例所展示一样，jQuery可以通过.（点）.不断调用jQuery对象的方法，而原生JavaScript则不一定

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // 报错,必须分开写
    div[0].style.backgroundColor = "red".width = 200+"px";
//    div[0].style.width = 200+"px";
    
    // 2.jQuery
    $(document).ready(function () {
    // 不报错,后面还可以接着继续写
        $("div").eq(1).css('background', 'yellow').css('width', '200px');
    }); 
</script>

*隐式遍历(迭代): 一次操作多个元素*

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
//    div.style.backgroundColor = "red";// 无效
    for(var i = 0; i<div.length; i++){
        div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
        // 隐式遍历(迭代)找到的所有div
        $("div").css('background', 'yellow');
    });
</script>

*读写合一: 读数据/写数据使用是一个函数*

<script>
    $(document).ready(function () {
        // 读取数据
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 写入数据
        $("div").eq(0).text("新的数据");
    });
</script>

*事件处理*
*DOM操作(C增U改D删)*
*样式操作*
*动画*
*丰富的插件支持*
浏览器兼容(前端开发者痛点)
- 1：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4 (2016年5月20日).
- 2：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4 (2016年5月20日)
- 3：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本。
- 应该选择几点几版本jQuery?
  - 查看百度网页源码使用1.x
  - 查看腾讯网页源码使用1.x
  - 查看京东网页源码使用1.x
  - 综上所述学习1.x,选择1.x
- 应该使用开发板还是生产版?
  - 开发板: 所有代码没有经过压缩,体积更大(200-300KB)
  - 生产版:所有代码经过压缩,提及更小(30-40KB)
  - 初学者为了更好的理解jQuery编码时使用开发板,项目上线时为了提升访问速度使用生产版

如何使用jQuery？

下载jQuery库
- 下载地址: http://code.jquery.com/
引入下载的jQuery库

<head>
    <meta charset="UTF-8">
    <title>01-初识jQuery</title>
    <script src="code/js/jquery-1.12.4.js"></script>
</head>

编写jQuery代码

<script>
    $(document).ready(function () {
      // 所有jQuery代码写在这里面
         alert("hello LNJ");
    });
</script>

jQuery 和 JS 的加载模式

通过原生 JS 和 jQuery 都可以拿到 DOM 元素，及图片的宽高

window.onload = function () {
    // 1. 通过原生的js入口函数可以拿到DOM元素
    var img = document.getElementsByTagName('img')[0]
    console.log(img)
    // 2. 通过原生的JS入口函数可以拿到DOM元素的宽高
    var width = window.getComputedStyle(img).width
    console.log('onload: ', width)
}
$(document).ready(function () {
    // 1. 通过JQuery入口函数可以拿到DOM元素
    var $img = $('img')
    console.log($img)
    // 2. 通过JQuery入口函数可以拿到DOM元素的宽高
    var $width = $img.width()
    console.log('ready: ', $width)
})

原生的 JS 如果编写了多个入口函数，后面编写的会覆盖原来的。而 jQuery 不会覆盖

window.onload = function () {
    alert('hello tzk1')
}
window.onload = function () {
    alert('hello tzk2')
}

只会弹出 hello tzk2

$(document).ready(function () {
    alert('hello tzk1')
});
$(document).ready(function () {
    alert('hello tzk2')
});

hello tzk1 与 hello tzk2 都会弹出。

jQuery 入口函数的其他写法

// 1. 第一种写法
$(document).ready(function () {
    alert('hello tzk')
});
// 第二种写法
jQuery(document).ready(function () {
    alert('hello tzk')
});
// 第三种写法(推荐)
$(function () {
    alert('hello tzk')
})
// 第四种写法
jQuery(function () {
    alert('hello tzk')
})

jQuery 的四种写法中，推荐使用第三种写法。

jQuery 的冲突问题

释放 $ 符号
```
jQuery.noConflict()
jQuery(function () {
    alert('hello tzk')
})
```
- 释放操作必须在编写其他 JQuery 代码之前编写
- 释放之后就不能在使用 $, 改为使用 jQuery

自定义访问符号

var nj = jQuery.noConflict()nj(function () {    alert('hello tzk')})

ry(function () {
alert(‘hello tzk’)
})




- 释放操作必须在编写其他 `JQuery` 代码之前编写
- 释放之后就不能在使用 `$`, 改为使用 `jQuery`

2. 自定义访问符号



```Javascript
var nj = jQuery.noConflict()nj(function () {    alert('hello tzk')})

自然醒^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01_初识jquery

jQuery是什么？jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）.在jQuery官方Logo下方还有一个副标题（write less, do more）, 体现了jQuery除了查询以外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单体验jQuery原生JS设置背景<script>// 查询 var div = document.getElem
复制链接

扫一扫