JQuery(入门~选择器)

一、JQuery 介绍

JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。

1、JavaScript 库

JavaScript 库:是一个封装好的集合(方法和函数)。里面都是写好的函数。

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

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

这些基本的我们跳过进入正题

二、jQuery基本使用

1、jQuery版本

jQuery版本有很多,有1.0~3.0以上等版本

  • 1.0的版本能兼容IE6、7、8浏览器
  • 2.0的版不兼容IE6、7、8浏览器
  • 3.0的版不兼容IE6、7、8,更加精简的

2、jQuery下载

官网:https://jquery.com/

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

3、使用jQuery

  • 如果是使用软件的,把js文件c到js包里,再使用script标签中scr属性导入就行。

4、Jquery 闭包结构

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

jQuery 具体的实现,都被包含在了一个立即执行函数构造的闭包里面,为了不污染全局作用域,只在后面暴露 $ 和 jQuery 这 2 个变量给外界。

5、jQuery的两种用法

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

jQuery引用库后:可以直接使用

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

1)jQuery 函数的使用

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

  1. 参数为函数:当 DOM 加载完成后,执行此回调函数
  2. 参数为选择器字符:查找所有匹配的标签并将它们封装成jQuery对象
  3. 参数为 DOM 对象:将 dom 对象封装成jQuery对象
  4. 参数为 html 标签字符串(用得少):创建标签对象并封装成jQuery对象
  • $.each():隐式遍历数组
  • $.trim():去除两端的空格

2) jQuery 对象的使用

执行jQuery核心函数返回的对象

jQuery对象内部包含的是 dom 元素对象的伪数组(可能只有一个元素)

jQuery对象拥有很多有用的属性和方法,让程序员能方便的操作 dom

属性和方法

  • 基本行为:操作标签的基本方法

  • 属性:操作内部标签的属性或值

  • CSS:操作标签的样式

  • 文档:对标签进行增删改操作

  • 筛选:根据指定的规则过滤内部的标签

  • 事件:处理事件监听相关

  • 效果:实现一些动画效果

6、入口函数

一般代码写在页面底部,等元素加载完,才能执行 jQuery 代码,或者可以使用下方入口函数解决

<script src="./jquery-3.6.0.js"></script>
<script>
    $(function(){
        //
    })
</script><script>
    $().ready(function() {
		
    });
</script>

一、选择器

1、基本选择器

ID选择器 :$('#id'); 获取指定ID的元素
类选择器 :$('.class');获取同一类class的元素
标签选择器 :$('div'); 获取同一类标签的所有元素
并集选择器 :$('div,p,li'); 使用逗号分隔,只要符合条件之一就可。
交集选择器 :$('div.redClass'); 获取class为dClass的div元素
属性选择器 : $('input[name=username]')获取 input 标签中 name 属性为 username 的元素

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) : ( ′ u l ′ ) . c h i l d r e n ( ′ l i ′ ) : 相当于 ('ul').children('li') : 相当于 (ul).children(li):相当于(‘ul>li’),子类选择器
find(selector) ( ′ u l ′ ) . f i n d ( ′ l i ′ ) ; : 相当于 ('ul').find('li');: 相当于 (ul).find(li);:相当于(‘ul li’),后代选择器
siblings(selector) $(‘#first’).siblings(‘li’); : 查找兄弟节点,不包括自己本身
parent() $(‘#first’).parent(); 查找父亲
parents() $(‘li’).parents(); 查找祖先元素
eq(index) ( ′ l i ′ ) . e q ( 2 ) ; 相当于 ('li').eq(2); 相当于 (li).eq(2);相当于(‘li:eq(2)’),index从0开始
next()$(‘li’).next():找下一个兄弟
prev() $(‘li’).prev(): 找上一次兄弟
closest $(‘li’).closest(‘ul’): 找最近一个祖先元素

5、this 和 当前 索引

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

[注意]:支持链式编程
下一章:JQuery怎么用?(工具方法、CSS属性及方法、筛选、文档处理、事件、动画)后续

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无法自律的人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值