专栏首页eadelajQuery基础--基本概念

jQuery基础--基本概念

为什么要学习jQuery?

【01-让div显示与设置内容.html】

使用javascript开发过程中,有许多的缺点:

1. 查找元素的方法太少,麻烦。
2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果,也很麻烦
5. 代码冗余。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 200px;
      margin-bottom: 10px;
      background-color: #a43035;
      display: none;
    }
  </style>
  <script>
    
    //等待页面加载完成后才会执行。
    window.onload = function () {
      //不爽的地方:
      //1. 代码比较麻烦,需要遍历,可能还需要嵌套。
      //2. 找对象麻烦,方法少,还长
      //3. 会有兼容性问题。
      //4. 如果想要实现简单的动画效果 animate
      //5. js注册事件,会被覆盖,addEventListener
  
      var btn1 = document.getElementById("btn1");
      var btn2 = document.getElementById("btn2");
      var divs = document.getElementsByTagName("div");
  
      btn1.onclick = function () {
        for (var i = 0; i < divs.length; i++) {
          divs[i].style.display = "block";
        }
      };
  
      btn2.onclick = function () {
        for (var i = 0; i < divs.length; i++) {
          //低版本火狐浏览器不支持innerText,支持textContent
          divs[i].innerText = "我是内容";
        }
      };
    };
  </script>
</head>
<body>
<input type="button" value="展示" id="btn1">
<input type="button" value="设置内容" id="btn2">

<div></div>
<div></div>
<div></div>


</body>
</html>
//不爽的地方:
      //1. 代码比较麻烦,需要遍历,可能还需要嵌套。
      //2. 找对象麻烦,方法少,还长
      //3. 会有兼容性问题。
      //4. 如果想要实现简单的动画效果 animate
      //5. js注册事件,会被覆盖,addEventListener

1.2. jQuery初体验

<!--1. 需要引入jQuery文件-->
  <script src="jquery-1.12.4.js"></script>
  <script>
    
    //2. 入口函数的标准
    $(document).ready(function(){
      //注册事件,把on去掉,是一个方法
      $("#btn1").click(function () {
        //隐式迭代:偷偷的遍历,jQuery会自动的遍历,不需要我们遍历。
        $("div").show(1000);
      });
      
      $("#btn2").click(function () {
        $("div").text("我是内容");
      });
    });
  </script>

  优点总结:

1. 查找元素的方法多种多样,非常灵活
2. 拥有隐式迭代特性,因此不再需要手写for循环了。
3. 完全没有兼容性问题。
4. 实现动画非常简单,而且功能更加的强大。
5. 代码简单、粗暴。

什么是jQuery?

jQuery的官网 http://jquery.com/ jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。

js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)

我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。

jQuery的版本

官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x

大版本分类:

1.x版本:能够兼容IE678浏览器
2.x版本:不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。

3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)

  关于压缩版和未压缩版

jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。

jQuery的入口函数

使用jQuery的三个步骤:

1. 引入jQuery文件
2. 入口函数
3. 功能实现

  关于jQuery的入口函数:

//第一种写法
$(document).ready(function() {

});
//第二种写法
$(function() {

});

  jQuery入口函数与js入口函数的对比

1.    JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
2.    jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
<script>
  
  //js的入口函数执行要比jQuery的入口函数执行得晚一些。
  //jq的入口函数会等待页面的加载完成才执行,但是不会等待图片的加载。
  //js的入口函数会等待页面加载完成,并且等待图片加载完成才开始执行。
  
  window.onload = function () {
    console.log("我是js的入口函数");
  };
  
  //认识
  $(document).ready(function () {
    console.log("这是jQuery入口函数的第一种写法");
  });
  
  
  $(function () {
    console.log("这是jQuery入口函数的第二种写法");
  });
</script>

1.6. jQuery对象与DOM对象的区别(重点)

1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
4. DOM对象与jQuery对象的方法不能混用。

  DOM对象转换成jQuery对象:【联想记忆:花钱】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

  jQuery对象转换成DOM对象:

var $li = $(“li”);
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
</head>
<body>
<ul>
  <li id="cloth">衣服</li>
  <li>裤子</li>
  <li>裤衩子</li>
  <li>袜子</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
  
  $(function () {
    
    //1. 什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)
    //var cloth = document.getElementById("cloth");
    //cloth.style.backgroundColor = "pink";
    
    //2. 什么是jq对象:使用jq的方式获取到的元素就是jq对象
    //var $li = $("li");
    //console.log($li);
    //$li.text("我改了内容");
    
    
    //3. jq对象与js对象的区别
    //js对象对象不能调用jq对象的方法
    //var cloth = document.getElementById("cloth");
    //cloth.text("呵呵");
    
    //4. jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)
    
    
    
    //jquery对象能不能调用DOM对象的方法
    //var $li = $("li");
    //$li[0].setAttribute("name","hehe");
    
    //DOM无法调用jQuery对象的方法:为什么:因为是两个不同对象
    //DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。
    var cloth = document.getElementById("cloth");
    
    //DOM对象就变成jQuery对象
    //$(cloth).text("呵呵");
    
    //jQuery对象怎么转换成DOM对象(取出来)
    var $li = $("li");
    $li[1].style.backgroundColor = "red";
    $li.get(2).style.backgroundColor = "yellow";
    
    
    
    
    
    //1. 什么是DOM对象:用js的方式获取到的对象时DOM对象
    //2. jQuery对象:用jq的方式获取到的对象时jq对象
    //3. 区别与联系
    //4. 区别:js对象与jq对象的方法不能混着用
    //5. 联系:
      // DOM--> jQuery  $()
      // jQuery--》 DOM  $li[0]  $li.get(0)
  });
 
  
</script>

</body>
</html>

  【练习:隔行变色案例.html】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<ul>
  <li>我是第1个li</li>
  <li>我是第2个li</li>
  <li>我是第3个li</li>
  <li>我是第4个li</li>
  <li>我是第5个li</li>
  <li>我是第6个li</li>
  <li>我是第7个li</li>
  <li>我是第8个li</li>
  <li>我是第9个li</li>
  <li>我是第10个li</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    //就这么写,会不会报错,会不会有效果
    var lis = $("li");
    for (var i = 0; i < lis.length; i++) {
      if (i % 2 == 0) {
        
        // lis:jq对象
        // lis[i]:DOM对象,通过下标取出来了
        lis[i].style.backgroundColor = "pink";
      } else {
        lis[i].style.backgroundColor = "hotpink";
      }
    }
    
  });
</script>
</body>
</html>

  $符号的实质

//$其实就是一个函数,以后用$的时候,记得跟小括号 $();
  //参数不同,功能就不同
  //3种用法
  //1. 参数是一个function, 入口函数
  $(function () {
    
  });
  console.log(typeof $);
  
  //2. $(domobj)  把dom对象转换成jquery对象
//  $(document).ready(function () {
//
//  });
  
  //3. 参数是一个字符串,用来找对象
  //$("div") $("div ul")   $(".current")

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery基础--选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    eadela
  • CSS基础--属性选择器、伪类选择器

    eadela
  • jQuery基础--音乐视频操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title...

    eadela
  • JQuery第一节

    jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。

    用户3461357
  • 互联网的十大酷刑,你中招了吗?

    十大酷刑,是中国古代的残酷刑法的主要表现,是那个时代用法律作为震慑手段维护统治的原则指导下产生的产物,主要内容有剥皮,腰斩,车裂,俱五刑,凌迟,缢首,烹煮等。其...

    民工哥
  • 怎样使用GitHub Pages搭建个人博客

    创建一个名为 USERNAME.github.io 的仓库,其中 USERNAME 为你的 GitHub 用户名。

    DevOps持续交付
  • 学界 | 优于MobileNet、YOLOv2:移动设备上的实时目标检测系统Pelee

    机器之心
  • 学界 | 优于MobileNet、YOLOv2:移动设备上的实时目标检测系统Pelee

    朱晓霞
  • 前端成神之路-vue前端项目01

    客户使用的业务服务:PC端,小程序,移动web,移动app 管理员使用的业务服务:PC后台管理端。 PC后台管理端的功能:管理用户账号(登录,退出,用户管理...

    海仔
  • 整理C/C++的可变参数

    c语言中使用可变参数最熟悉应该就是printf, 其是通过...来从代码语句中表示可变化的参数表。

    Rock_Lee

扫码关注云+社区

领取腾讯云代金券