JQuery（入门~选择器）

无法自律的人

已于 2023-04-12 11:00:26 修改

阅读量790

点赞数 1

文章标签： jquery javascript 前端

于 2023-03-29 18:52:35 首次发布

本文链接：https://blog.csdn.net/weixin_74383330/article/details/129747244

版权

一、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)

参数为函数：当 DOM 加载完成后，执行此回调函数
参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象
参数为 DOM 对象：将 dom 对象封装成jQuery对象
参数为 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 hi l d re n (^{'} l i^{'}) : 相当于$ (‘ul>li’)，子类选择器
find(selector) $(^{'} u l^{'}) . f in d (^{'} l i^{'}); : 相当于$ (‘ul li’),后代选择器
siblings(selector) $(‘#first’).siblings(‘li’); : 查找兄弟节点，不包括自己本身
parent() $(‘#first’).parent(); 查找父亲
parents() $(‘li’).parents(); 查找祖先元素
eq(index) $(^{'} l i^{'}) . e q (2); 相当于$ (‘li:eq(2)’),index从0开始
next()$(‘li’).next():找下一个兄弟
prev() $(‘li’).prev(): 找上一次兄弟
closest $(‘li’).closest(‘ul’): 找最近一个祖先元素