jQuery 基础

最新推荐文章于 2023-10-19 18:39:50 发布

痴心的萝卜

最新推荐文章于 2023-10-19 18:39:50 发布

阅读量223

点赞数

分类专栏： DOM和jQuery

本文链接：https://blog.csdn.net/qq_36826618/article/details/103944903

版权

DOM和jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 获取jQuery

官网下载
npm 下载
npm install jquery
CDN方式
推荐国内的CDN
https://www.bootcdn.cn/jquery/

2. jQuery版本介绍

jquery2.0以上的版本是不兼容IE8及以下浏览器的

后缀为.js和.min.js有什么区别？
.js是未压缩的开发版本，通常用来学习参考用的，可以研究jQuery的设计模式、思想等。
而.min.js是压缩过的生产版本，通常用于写正式的一个页面，因为这个更小，可以让页面加载更快，也节省流量。

3. jQuery的兼容性引入方式

条件注释

  <!--chrome firefox Safari opera IE9+ -->
  <!--[if gt IE 8]> -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <!--<![endif]-->

  <!--IE8以及以下-->
  <!--[if lte IE 8]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <![endif]-->

因为条件注释只有IE识别，而且高版本的IE，比如IE 11也不识别条件注释
我们分析以下上面两段条件注释

首先这种格式的注释由于其他浏览器或者高版本的IE不会识别，而且只会这两行被注释，中间的代码照样执行，所以会直接加载3.4.1版的jQuery，而下面这种格式的注释，其他浏览器或者高版本IE都会把它当做一个注释，也就是说，中间的任何代码全部当做注释无视掉，而恰好低版本的IE不会当注释来看，根据if gt IE 8和if lte IE 8 来判断版本是否小于8，选取中间的代码段来执行。
效果图：
可以看见谷歌上面低版本的被注释掉了
在这里插入图片描述
仿真IE 7

只有1.12.4版本了

4. jQuery的使用

  <!--加载 jQuery-->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    // jQuery 入口
    $(document).ready(function () {
      // 自己的代码
    })

    // jQuery 入口的简写
    $(function(){

    })
  </script>

ready和onload事件的区别

ready 表示页面中DOM加载完毕后触发
load事件页面中所有的一切加载完毕后触发

  <h1>ready和onload事件的区别</h1>
  <hr>
  <img src="http://www.google.com/1.jpg" alt="">
  <!--加载 jQuery-->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      console.log("ready OK");
    });

    window.onload = function () {
      console.log("onload OK");
    }
  </script>

可以看出，onload等到img标签返回超时后才会执行
在这里插入图片描述

5. jQuery的特点

轻量、开源、免费、易于学习
兼容性处理
强大的选择器
链式操作
便捷的DOM操作
可靠的事件机制
封装了简单易用的Ajax操作
丰富的插件

6. jQuery dom对象

使用jQuery选择器获取的对象，不是原生的DOM对象，称之为jQuery对象
jQuery dom 对象本质上是由原生 dom 对象组成的集合
原生dom转为jQuery dom $(原生dom对象
jquery dom 转为原生 dom 使用[]指定下标

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM</title>
  <style>
    #box{
      width:400px;
      height:300px;
      padding: 20px;
      border:1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>jQuery DOM</h1>
  <hr>
  <div id="box">
    xxx
  </div>
  <!--加载 jQuery-->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // 原生js 的方式
      var box = document.querySelector("#box");
      box.style.backgroundColor = "#ccc";

      // jquery 选择器
      var $box = $("#box");
      $box.css("background-color", "green");

      // 原生的 dom 转为 jQuery dom
      $(box).css("border","2px solid red");

      // jQuery dom 转为 原生 dom
      $box[0].style.backgroundColor = "yellow";
    });
  </script>
</body>
</html>

7. 全局对象

全局对象jQuery别名是 $
$ 的参数如果是dom对象，把该对象转为 jquery dom
$ 的参数如果是字符串，作为jQuery的选择器
$ 的参数如果是字符串，并以<开头，创建一个新的元素

痴心的萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 基础

获取jQuery官网下载npm 下载npm install jqueryCDN方式推荐国内的CDNhttps://www.bootcdn.cn/jquery/jQuery版本介绍jquery2.0以上的版本是不兼容IE8及以下浏览器的后缀为.js和.min.js有什么区别？.js是未压缩的开发版本，通常用来学习参考用的，可以研究jQuery的设计模式、思想等。而.min....
复制链接

扫一扫