jQury基本知识

已于 2023-03-20 19:02:25 修改
阅读量912 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： jQury 文章标签： javascript 前端 jquery
于 2023-03-17 11:30:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lxllxl211/article/details/129614539
本文介绍了jQuery的基本概念，如将JavaScript库理解为一个存放预定义函数的仓库，以及jQuery对象和DOM对象的转换方法。文章通过示例详细阐述了jQuery的入口函数、$作为jQuery的别称、选择器的使用，包括隐式迭代、筛选选择器、筛选方法（如parent(),find(),children(),siblings()等），以及如何修改样式和操作类。内容涵盖了jQuery的核心功能，旨在帮助初学者快速掌握jQuery的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

仓库: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

JavaScript库:即 library，是一个封装好的特定的集合(方法和函数)。

从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，
比如动画animate、hide、show，比如获取元素等
简单理解:就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。
这样我们可以快速高效的使用这些封装好的功能了。

1、jq代码写在哪里？jq入口函数

在这里插入图片描述

    <script src="js-min-jqury.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 写上边需要特殊操作 -->
    <script>
        // 1.等着页面DOM加载完毕，再去执行js代码
        // $(document).ready(function () {
        //     $('div').hide();
        // })
        // 2.等着页面DOM加载完毕，再去执行js代码
        // $(function () {
        //     $('div').hide();
        // })
    </script>
    <div></div>

    <script>
        // 脚本写在下面 是最好的
        // 功能：隐藏这个div
        $('div').hide();
    </script>
</body>

2、jq对象和dom对象的转换

在这里插入图片描述

<script src="js-min-jqury.js"></script>
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<div></div>
<div></div>
<script>
    // 获取dom对象
    const div = document.querySelector('div');
    console.log(div);
    // 获取jq对象 获取过来的jq对象，是一个伪数组
    console.log($('div'));
    // 需求：把第二个div的颜色改成黄色
    $('div')[1].style.backgroundColor = 'yellow'
    $('div').get(1).style.backgroundColor = 'red'
</script>

在这里插入图片描述

3、jQury顶级对象

1.是jQuery的别称，在代码中可以使用jQuery代替是jQuery的别称，在代码中可以使用jQuery代替是jQuery的别称，在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用$
2.是Query的顶级对象，相当于原生JavaScript中的window。把元素利用是Query的顶级对象，相当于原生JavaScript中的window。把元素利用是Query的顶级对象，相当于原生JavaScript中的window。把元素利用包装成jQuery对象，就可以调用
jQuery的方法。

// 1.$是jQuery的别称
$(function(){
    alert(11);
});

// 2.也可以直接用jqury
jQuery(function () {
    alert(21);
});

4、选择器与赋值

给多个元素赋值，也可以是一个
在这里插入图片描述
遍历内部DOM元素(伪数组形式储)的过程就叫做隐式选代
简单理解:给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。

<ul>
    <li>330</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<!-- jq入口函数 -->
<script>
    $(function(){           
        // 获取多个对象 隐士迭代
        $('ul li').css('color','pink');
        // 获取1个元素
        $('ul li')[1].style.color='green';
    })
</script>

在这里插入图片描述

4.1、筛选选择器

<ul>
    <li>很多的li</li>
    <li>很多的li</li>
    <li>很多的li</li>
    <li>很多的li</li>
</ul>
<ol>
    <li>ol里面的li</li>
    <li>ol里面的li</li>
    <li>ol里面的li</li>
    <li>ol里面的li</li>
</ol>
<script>
    $(function () {
        // 选择ul 里面的第一个li
        $('ul li:first').css('color','red');
        // 选择ul里的第三个li
        $('ul li:eq(2)').css('color','pink');
        // 选择ol里面的奇数li
        $('ol li:odd').css('color','blue');
        // 选择ol里面的偶数li
        $('ol li:even').css('color','skyblue');
    })
</script>

在这里插入图片描述

4.2、筛选方法–选出父子元素

在这里插入图片描述

<div class="yeye">
    我是爷爷
    <div class="father">
        我是爸爸
        <div class="son">儿子</div>
    </div>
</div>

<div class="nav">
    <p>我是屁</p>
    <div>
        <p>我是p</p>
    </div>
</div>
<script>
    $(function () {
        //1.父 parent()返回的是最近一级的父级元素 亲爸爸
        $('.son').parent().css('color', 'pink');
        //2.find() 类似后代选择器，会把所有后代都选了
        $('.nav').find('p').css('color', 'blue');
        //3.子 亲儿子 只选择了最近的p
        $('.nav').children('p').css('color','green');
    })
</script>

在这里插入图片描述

4.3、筛选方法–选出兄弟元素

<ol>
    <li>我是ol里面的li</li>
    <li>我是ol里面的li</li>
    <li class="item">我是ol里面的li</li>
    <li>我是ol里面的li</li>
    <li>我是ol里面的li</li>
    <div>fsdfzve </div>
</ol>

// 选择所有的兄弟，处了他自己
$('.item').siblings('li').css('color','red');
//siblings()括号中可以不写内容
$('.item').siblings().css('color', 'red');

在这里插入图片描述

// 选择我之前的所有兄弟
$('.item').prevAll().css('color', 'green');

在这里插入图片描述

// 选择我之后的所有兄弟
 $('.item').nextAll().css('color', 'green');

在这里插入图片描述
括号中间如果加标签或者其他，就按这个标签规定的内容选择

// 选择我之后的所有li兄弟
 $('.item').nextAll('li').css('color', 'green');

在这里插入图片描述
选择某个特定元素

<ul>
   <li>我是ul里面的li</li>
   <li>我是ul里面的li</li>
   <li>我是ul里面的li</li>
  <li>我是ul里面的li</li>
    <li>我是ul里面的li</li>
 </ul>

// 选择某一个元素
$('ul li:eq(2)').css('color', 'red');
$('ul  li').eq(3).css('color','yellow');

在这里插入图片描述

<div class="d1 current">我是有current的div</div>
<div class="d2">我只是一个普通的div</div>

4.3、筛选方法–判断是否有这个类

//判断他是否有类名 引号中的类，不加点
console.log($('.d1').hasClass('current'));//true

5、排他思想

<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
    $('button').click(function () {
        // 当前元素换成pink this无需‘’
        $(this).css('background', 'pink');
        // 其他元素取消颜色
        $(this).siblings('button').css('background', '');
    })
</script>

在这里插入图片描述
还可以采取链式编程来写，节约代码

$(this).siblings('button').css('background', '');

6、修改样式css方法

<script src="js-min-jqury.js"></script>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<div></div>

1.参数只有属性名，则是返回属性值

console.log($('div').css('background-color'));
console.log($('div').css('width'));

在这里插入图片描述
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$('div').css('width', 300);

在这里插入图片描述
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

 $('div').css({ "background-color": "yellow", height: 100, width: 100 });

在这里插入图片描述

7、修改样式操作类

<script src="js-min-jqury.js"></script>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all .5s;
    }
    .current {
        background-color: red;
        transform:rotate(360deg);
    }
</style>

<div ></div>

在这里插入图片描述

7.1、添加类 addClass(‘类名’)

$('div').click(function(){
      $(this).addClass('current');
})

在这里插入图片描述

7.2、删除类 removeClass(‘类名’)

$('div').click(function () {
      $(this).removeClass('current');
});

在这里插入图片描述

7.3、切换类

$('div').click(function () {
            $(this).toggleClass('current');
        });

在这里插入图片描述

jQuery
zhangxuelong461的博客
01-02 488
jQuery javascript query JQuery的介绍 jQuery是一个轻量级的JS库 是一个被封装好的JS文件，提供了更为简便的元素操作方式 核心理念：Write Less Do More jQuery版本： jQuery 2.x 不再兼容IE6.7.8 jQuery 1.x jQuery 1.11.x 使用jQuery 1.引入jQuery文件 < script s...
JQury中文API和JS代码库
05-05
jQuery 1.4.4 中文API参考手册，和jquery-1.7.2.js文件。
JQuery基础
gorgeoustudy的博客
08-28 230
概念：一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScrip...
前端_JQuery(零基础系统性入门)
最新发布
weixin_64977805的博客
05-06 456
前端_JQuery(零基础系统性入门)
JQuery
wx1762813417的博客
07-26 1199
JQury 入门 1.什么是jQuery 它是一个轻量级的javascript类库 2.jQuery优点 总是面向集合 多行操作集于一行 1 使用JQuery 先导入.js文件 2 然后在 导入js库（ < script type=“text/javascript” src="">） 3 $(fn)做为程序入口 $ (fn)、$(document).ready(fn)与wi...
WEB学习——JQury
弓长亖石
07-19 646
1.what 　　Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。 2.how 　　Jquery它是一个库(框架)，要想使用它，必须先引入！ &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;jqury库文件&amp;quot;&am
jQuery基本知识思维导图.xmind
03-25
jQuery的基本使用、选择器、效果、样式操作、属性操作、元素操作、尺寸操作、位置操作、以及事件注册、事件处理、事件对象、拷贝对象、多库共存、部分插件的使用
jQuery学习示例源码--jQuery基本知识
03-08
**jQuery学习示例源码——jQuery基本知识** jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的设计目标是使JavaScript编程变得更简单、更易用，它封装了...
jquery中的基本知识点大全
11-02
jquery中的知识点总结，零基础也可以看懂
jQuery基本选择器和层次选择器学习使用
10-20
本文将详细介绍jQuery中的基本选择器和层次选择器的使用方法，为那些希望使用jQuery来增强网页功能的开发者提供参考。 首先，基本选择器是最为常用的，它包括ID选择器、类选择器、标签选择器以及通配符选择器。ID...
jQuery动态基本操作
07-03
针对"jQuery动态基本操作"这个主题，我们可以深入探讨以下关键知识点： 1. **选择器**：jQuery的核心功能之一就是选择器，它们用于在HTML文档中选取特定的元素。例如，`$("#id")`选择ID为指定值的元素，`$(".class...
还记得你刚开始是如何学习jQuery吗？
希冀
04-06 206
文章目录jQuery介绍jQuery核心函数jQuery对象和dom对象区分Dom对象jQuery对象jQuery对象的本质是什么？jQuery对象和Dom对象使用区别Dom对象和jQuery对象互转jQuery选择器基本选择器层级选择器过滤选择器基本过滤器：内容过滤器：属性过滤器：表单过滤器:表单对象属性过滤器：jQuery元素筛选 jQuery介绍 什么是jQuery ? jQuery就...
Jquery
2201_75655178的博客
12-10 922
jQuery的本质就是JavaScript只是将JavaScript的某些方法封装成一个库，极大简化了原生JavaScript开发。（潜台词：JS怎么用，Jquery就怎么用，只是把JS的代码简化了）什么是库?lib“库”--->（library--文库，图书馆）--> 将一些相关函数方法进行封装以便使用。类似于jar包。
jqury（源自runoob.com）
zhangsan_321的博客
08-04 465
（1）dom事件属性（加粗为常用属性） 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll
jQury学习(1)
qq_41898129的博客
07-23 297
一.https://jquery.com/下载jQuery: 1.Production jQuery版——优化压缩后的版本（删除空格等，文件较小，但不利于阅读），建议程序发布时使用 Develepment jQuery版——未压缩版本（格式标准，易于阅读），一般在网站建设时使用，便于调试 jQuery map文件——map文件能够被用来在某些现在浏览器上调试压缩后的jQuery文件，map文...
jQuery 教程
freeking101的博客
04-26 3343
菜鸟教程 --- jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery简介 什么是 jQuery ？ jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： HTML...
Jquery学习
qq_52701502的博客
04-22 318
jquery 学习目标 1.jquery概念 2.jquery的常见选择器 3.熟练掌握jquery操作节点的属性、内容、样式 4.熟练掌握jquery的文档处理、筛选 5.熟练掌握jquery的常见事件和效果 6.熟练掌握jquery的ajax 一、jquery概念 1.1 Jquery介绍 jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Le
jqury 实现点击一个菜单，其他展开的子菜单隐藏
廖圣平
12-08 7947
jqury 实现点击一个菜单，另一个展开的子菜单隐藏
jQuery入门
weixin_43926272的博客
03-23 519
入门jQuery "作为一个在编程学习路上的赶路来说，我不喜欢在网上查阅的资料内容太过冗余，看着累，学者也难。所以写的这一篇关于jQuery的文档，我想用最直接的方法告诉大家，它的使用方法以及底层逻辑原理。如果有哪些知识点有错误还望各位大佬，多多包涵指教… 一、什么是jQuery 在我们认识什么jQuery以前，我们先了解一下JavaScript库的概念。生活中有仓库这个概念，仓库里面可以放很多的东西，我们用的时候去仓库里找这些东西就能够使用。同理JavaScript库也
JQuery基本语法及初学者实践指南
### 描述知识点：jquery基本语法资料 ,有ppt,基本代表的项目等，适合于初学者 1. **基础语法介绍**： - **选择器和 DOM 操作**：初学者首先应该熟悉 jQuery 的选择器，理解如何通过 jQuery 选择 DOM 元素，并进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值