jQuery 入门&选择器

简介: jQuery 入门&选择器

一、jQuery基本介绍

jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

1.1 JavaScript 库

JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。

常见的JavaScript 库  

  • Prototype:是最早成型的JS库之一,对于JS的内置对象做了大量的扩展。
  • Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API,生成图标的组件等等。
  • YUI:是由Yahoo公司开发的一套完备的,扩展性良好的富交互网页程序工作集。
  • Ext JS:原本是对YUI的一个扩展,主要用于创建前端用户界面。
  • Moo Tools:是一套轻量、简洁、模拟化和面向对象的JS框架。
  • jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。
  • 移动端的zepto

这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。

What?

jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。

jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

学习jQuery本质: 就是学习调用这些函数(方法)。

jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

  • jQuery官网::jQuery
  • 一个优秀的 JS 函数库
  • 使用了jQuery的网站超过 90%
  • 中大型 WEB 项目开发首选
  • Write Less,Do More!!!

Why?

  • 轻量级。核心文件才几十kb,不会影响页面加载速度
  • 跨浏览器兼容。基本兼容了现在主流的浏览器
  • HTML 元素选取(选择器)
  • HTML 元素操作
  • CSS 操作
  • HTML 事件处理
  • JS 动画效果
  • 链式调用 a().b().c()...
  • 读写合一
  • 浏览器兼容
  • 易扩展插件
  • ajax 封装

Where?

  • 中大型网站开发
  • 是一些前端框架的基础,比如EasyUI,Bootstrap

How?

1. 引入jQuery

2. 使用jQuery

二、jQuery基本使用

1. jQuery版本

  • 1.x 版本:能够兼容 IE6, 7, 8 浏览器(不再更新版本)
  • 2.x 版本:不兼容 IE6, 7, 8 浏览器(不再更新版本)
  • 3.x版本:不兼容 IE6, 7, 8,更加的精简(在国内不流行,因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8)

2.jQuery下载

官网:jQuery

  • production (压缩过的版本,体积小,上线用)——生产版(压缩版)
  • develepment(未压缩版本,开发时使用,适合查找)——开发版(测试版)

3.使用 jQuery

  • 在页面中引入 jQuery 库

<script src="js/jquery-3.6.0.js"></script>

(项目上线时,一般使用比较靠谱的CDN资源库,减轻服务器负担)

  • 在 script 标签中使用 jquery 语法即可,如:

<div id="odiv">Content</div>

<script src="js/jquery-3.6.0.js"></script>

<script>

   $('#odiv').hide();

</script>

4. jQuery 闭包结构

//  jQuery加载函数

( function( global, factory ) {

   

} )();

  • 用一个函数域包起来,就是所谓的沙箱
  • 在这里边 var 定义的变量,属于这个函数域内的局部变量,避免污染全局
  • 把当前沙箱需要的外部变量通过函数参数引入进来
  • 只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数。

5.jQuery 的 2 把利器

// jQuery核心代码
(function(window){
    var jQuery = function(){
        return new jQuery.fn.init();
    }
    window.$ = window.jQuery = jQuery
})(window)

jQuery 核心函数

简称:jQuery函数($/jQuery),jQuery库向外直接暴露的就是$/jQuery

引入jQuery库后,直接使用即可

  • 当函数用:$(xxx)
  • 当对象用:$.xxx()

jQuery 核心对象

简称:jQuery对象

得到jQuery对象:执行jQuery函数返回的就是jQuery对象

使用jQuery对象:$obj.xxx()

// jQuery对象:执行jQuery函数得到它

console.log($(), typeof $(), $() instanceof Object);

// jQuery.fn.init {} "object" true

5.1 jQuery 函数的使用

作为一般函数调用:$(param)

  1. 参数为函数:当 DOM 加载完成后,执行此回调函数
  2. 参数为选择器字符:查找所有匹配的标签并将它们封装成jQuery对象
  3. 参数为 DOM 对象:将 dom 对象封装成jQuery对象
  4. 参数为 html 标签字符串(用得少):创建标签对象并封装成jQuery对象

作为对象使用:$.xxx()

  • $.each():隐式遍历数组
  • $.trim():去除两端的空格

三、选择器

jQuery 选择器是 jQuery 为我们提供的一组方法,让我们更加方便的获取到页面中的元素

1. 基本选择器

名称 用法 描述
ID选择器 $('#id'); 获取指定ID的元素
类选择器 $('.class'); 获取同一类class的元素
标签选择器 $('div'); 获取同一类标签的所有元素
并集选择器 $('div,p,li'); 使用逗号分隔,只要符合条件之一就可。
交集选择器 $('div.redClass'); 获取class为redClass的div元素
属性选择器 $('input[name=username]') 获取 input 标签中 name 属性为 username 的元素
<script type="text/javascript">
  //常用选择器
  //根据id获取元素 获取到的结果:类数组对象
  console.log( $('#div0') );
  console.log( $('#div0')[0] );
  //根据class获取元素
  console.log( $('.div_1') );
  //根据标签名称来获取元素
  console.log( $('div') );
  //根据属性获取元素
  console.log( $('input[name=username]') );
  //根据表单元素属性获取元素
  console.log( $(':checked') );
</script>

2. 层级选择器

名称 用法 描述
子代选择器 $('ul > li'); 使用 > 号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $('ul li'); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

3. 过滤选择器

这类选择器都带冒号:

名称 用法 描述
:eq(index) $('li:eq(2)').css('color', 'red'); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd $('li:odd').css('color', 'red'); 获取到的li元素中,选择索引号为奇数的元素
:even $('li:even').css('color', 'red'); 获取到的li元素中,选择索引号为偶数的元素

4. jQuery 筛选方法

  • 筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
名称 用法 描述
children(selector) $('ul').children('li') 相当于$('ul>li'),子类选择器
find(selector) $('ul').find('li'); 相当于$('ul li'),后代选择器
siblings(selector) $('#first').siblings('li'); 查找兄弟节点,不包括自己本身。
parent() $('#first').parent(); 查找父亲
parents() $('li').parents(); 查找祖先元素
eq(index) $('li').eq(2); 相当于$('li:eq(2)'),index从0开始
next() $('li').next() 找下一个兄弟
prev() $('li').prev() 找上一次兄弟
closest $('li').closest('ul') 找最近一个祖先元素

5. this 和 当前索引

在对象的事件中,$(this) 表示当前操作的 jQuery 对象,$(this).index() 表示当前元素的索引号

$("li").click(function () {
  console.log($(this).index());
}

6. 案例

案例:点击按钮获取输入框中的值(JS对比jQuery)

案例:分别使用基本选择器,改变元素的背景颜色和字体颜色(div、p、span)

案例:使用层次选择器,选择某个元素下面的所有元素和子元素

案例:使用过滤选择器,选择li中的元素

案例:表格隔行换色

案例:获取表单中的单选、多选、下拉值

案例:下拉菜单

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style-type: none;
      }
      a {
        text-decoration: none;
        font-size: 14px;
      }
      .nav {
        margin: 100px;
      }
      .nav > li {
        position: relative;
        float: left;
        width: 80px;
        height: 41px;
        text-align: center;
      }
      .nav li a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 41px;
        color: #333;
      }
      .nav > li > a:hover {
        background-color: #eee;
      }
      .nav ul {
        display: none;
        position: absolute;
        top: 41px;
        left: 0;
        width: 100%;
        border-left: 1px solid #fecc5b;
        border-right: 1px solid #fecc5b;
      }
      .nav ul li {
        border-bottom: 1px solid #fecc5b;
      }
      .nav ul li a:hover {
        background-color: #fff5da;
      }
    </style>
  </head>
  <body>
    <ul class="nav">
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
    </ul>
    <script src="./jquery-3.6.0.js"></script>
    <script>
      $(function () {
        // 鼠标经过
        $(".nav>li").mouseover(function () {
          // 显示元素(this 表示当前元素)
          $(this).children("ul").show();
        });
        // 鼠标离开
        $(".nav>li").mouseout(function () {
          $(this).children("ul").hide();
        });
      });
    </script>
  </body>
</html>

案例:排他思想

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

链式编程

$(this).css("color", "red").siblings().css("color", "");

目录
相关文章
|
26天前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
28 2
|
2月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
39 5
|
13天前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
5月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
33 0
|
5月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
jQuery 选择器
jQuery 选择器
23 3
|
1月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
2月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
27 1
|
3月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
34 1