jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

最新推荐文章于 2021-09-18 09:26:17 发布

z06969

最新推荐文章于 2021-09-18 09:26:17 发布

阅读量210

点赞数

分类专栏：前端文章标签： js jquery jq 关系

本文链接：https://blog.csdn.net/weixin_43863327/article/details/89454648

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基础知识，包括它作为一个JavaScript库的角色，学习jQuery的重点在于使用其提供的方法。学习过程中会涉及引入jQuery库、入口函数的两种书写方式以及jQuery的版本管理。$符号是jQuery的核心，既是函数也是选择器。文章还详细阐述了jQuery对象与DOM对象的区别，并探讨了各种选择器的用法，如基本选择器、层级选择器和过滤筛选器。

摘要由CSDN通过智能技术生成

什么是jQuery以及学习的意义等

jQuery是一个js库

JS库是什么？

把常用的方法，进行封装，封装到一个单独的js文件当中，要用的时候直接调用。

学习jQuery主要学什么？

学习jQuery提供给我们的方法

2.jQuery的使用步骤

1）引入jQuery包

2）写进入口函数

入口函数的两种书写方式：

方式一：

$(document).ready(function(){

 

});

方式二：

   $(function(){

 

});

3)写入需要实现的功能

例：

<script src="jquery-1.12.4.js"></script>//引入jQuary包

<script>
$(document).ready(function(){ //入口函数
   $("#btn1").click(function(){//需要执行的功能
      $("div").show(400,500);
   });
    $("#btn2").click(function(){
        $("div").text("我是文字内容");
    })
});
</script>

jQuery的版本

大版本：

1.x  (1.1-1.12)  ie 6/7/8 支持的



2.x  (2.1-2.12)  不支持ie 678



3.x              不支持ie 678

小版本：

每个大版本又分两个小版本：

compressed(压缩版):   将变量名尽可能的变为单个字母，把注释和换行空格全部去掉用以减小体积

uncompressed(未压缩版):  注释全部保留，变量名尽可能的语义化



根据小版本体积大小不同，使用环境不同

项目上线，使用压缩版

开发过程当中使用未压缩版

扩展：

3.x之后的版本，出现一个 slim 版 削减版

移除了 effects ajax 模块

入口函数的注意事项

//1. 在使用jQuery之前未引包  $ is not defined

//2. 引包的顺序一定要注意，在使用之前引包 $ is not defined

//3. 引包的路径一定要写对！

$符号是什么

//$本质就是一个函数,根据所给的参数不同功能不同

    //第一种用法：

    //传入字符串css选择器

    //功能：获取页面上的元素

    //栗子：$("#id")

    //语法：$(selector)



    //第二种用法：

    //传入DOM对象

    //功能：把DOM对象转成jQuery对象

    //栗子：$(document)

    //语法：$(DOMObj)



    //第三种用法：

    //传入一个fucntion

    //功能：入口函数

    //$(function)

JQuery对象和DOM对象

  <script>
    $(document).ready(function(){
//        dom对象通过js方法获取到的元素 就是DOM对象
       var  son1=document.getElementById("son1");
          son1.style.backgroundColor="pink";
//        son1.css("backgroundColor","green");//错误  dom也不能调用jauary方法
     //jquary对象通过jQuery方法获取到的元素 就是jQuery对象
        var $lis=$("li");
        $lis.css("backgroundColor","green");
//        $lis.style.backgroundColor="pink";//错误  jquary不能调用dom方法
    });
</script>

jQuery和JavaScript

        //jQuery对象其实就是DOM对象的包装集。

        //dom对象以伪数组的形式存放在jQuery对象中

基本选择器（id选择器、类选择器、标签选择器、交集/并集选择器）

 //基础选择器
//id选择器  $("#id")
//类选择器   $(".className")
//标签选择器  $("TagName")
//交集选择器  $(selector1selector2)
//并集选择器  $(selector1,selector2)

层级选择器（子代、后代）

//层级选择器
 //后代选择器 $(selector1 selector2)
//子代选择器  $(selector1>selector2)

案例：

<script src="jquery-1.12.4.js"></script>
<script>
    
    $(function(){
//        $(".hf,.wsy").css("backgroundColor","pink"); //并集选择器
//        $("li.nj").css("backgroundColor","grey");  //交集选择器

//        $("#dlt>li").css("backgroundColor","red");  //子代选择器
          $("#dlt li").css("backgroundColor","blue");  //后代选择器
    });

</script>
  <ul id="sl">
      <li>联合司令官</li>
  </ul>
   <ul id="dlt">
       <li class="tz">李云龙</li>
       <li>狙击手</li>
       <li>士兵</li>
       <ul class="fl">
           <li>俘虏1</li>
           <li>俘虏2</li>
           <li>俘虏3</li>
       </ul>
       <li>士兵</li>
       <li>士兵</li>
       <li class="hf">伙夫</li>
       <li class="wsy">卫生员</li>
   </ul>
  <ul id="tfe">
      <li class="tz">楚云飞</li>
      <li>狙击手</li>
      <li>士兵</li>
      <li class="nj">士兵</li>
      <li>士兵</li>
      <li class="hf">伙夫</li>
      <li class="wsy">卫生员</li>
  </ul>
    <ul id="bx">
        <li>百姓</li>
        <li>百姓</li>
    </ul>

过滤选择器（odd，even，eq）

<script>
    $(document).ready(function () {
        $("li:odd").css("backgroundColor","lightblue");//奇数过滤选择器
        $("li:even").css("backgroundColor","red");//偶数过滤选择器
        $("li:eq(5)").text("改变的文字");//序号过滤选择器
    });
</script>
<body>
<ul>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
</ul>

筛选选择器(children(selector)、find(selector)、next()、siblings(selector)、parent()、eq(index))

$(this).children(selector)获取当前元素的子代标签

$(this).find(selector) //在当前元素的后代元素中寻找和selector对应的元素

$(this).next() //获取当前元素的下一个元素

$(this).siblings(selector) //获取当前元素的兄弟元素

$(this).parent() //获取当前元素的父级元素

$(this).eq(index)) //获取当前元素的索引位置

z06969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

什么是jQuery以及学习的意义等jQuery是一个js库JS库是什么？把常用的方法，进行封装，封装到一个单独的js文件当中，要用的时候直接调用。学习jQuery主要学什么？学习jQuery提供给我们的方法2.jQuery的使用步骤1）引入jQuery包2）写进入口函数入口函数的两种书写方式：方式一：$(document).ready(function(){ })...
复制链接

扫一扫

专栏目录