jquery基本操作

最新推荐文章于 2023-07-10 20:46:27 发布
最新推荐文章于 2023-07-10 20:46:27 发布
阅读量123 收藏
点赞数 1
文章标签： jquery js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hasakizzz66/article/details/108500208
版权

jquery基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-3.5.1.min.js"></script>
    <style>
        .box {
            width: 33%;
            height: 200px;
            background-color: red;
            padding: 20px;
            border: 5px solid #333333;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
    <script>
        console.log($('.box').css('height'))
        console.log($('.box').height())
        console.log($('.box').width())
        $('.box').width(300)
        $('.box').height(300)
        console.log($('.box').innerHeight())
        console.log($('.box').outerHeight())
        console.log($('.box').outerHeight(true))
    </script>
</body>

</html>

DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery-3.5.1.min.js"></script>
</head>
<body>
  <div class="box">box</div>
  <ul id="list">
    <li>鼠标</li>
    <li>键盘</li>
  </ul>
  <p class="code">代码是我的最爱</p>
  <a href="##">link</a>
  <script>
    // $里传入html字符串就可以创建元素
    $('<li>cpu</li>').appendTo('#list')
    $('#list').append('<li>显示器</li>')
    $('<li>').html('显卡').prependTo('#list')
    $('#list').prepend('<li>内存条</li>')
    $('.box').after('<h3>title</h3>')
    $('.code').replaceWith('<h3>title</h3>')
    $('li:nth-child(2)').empty()
    $('a').remove()
    $('li:first').on('click', function () {
      console.log('first')
    })
    // jquery的浅克隆已经达到原生深克隆的效果了
    // $('li:first').clone().appendTo('#list')
    // jquery深克隆除了克隆DOM结构还能克隆事件
    $('li:first').clone(true).appendTo('#list')

  </script>
</body>
</html>

filter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery-3.5.1.min.js"></script>
</head>
<body>
  <div class="box">box</div>
  <ul id="list" class="ul ac list">
    <li>
      <a href="" class="mouse">鼠标</a>
    </li>
    <li>显示器</li>
    <li class="ac" id="key">键盘</li>
  </ul>
  <p class="code">代码是我的最爱</p>
  <a href="##">link</a>
  <script>
    console.log($('li:eq(1)'))
    console.log($('li').eq(1))
    console.log($('#list').hasClass('ac')) // true
    console.log($('li:last').is('#key')) // true
    console.log($('li').filter('.ac'))
    console.log($('li').has('a'))
    console.log($('li').not('.ac'))
    console.log($('ul').children()) // li li 一级子元素
    console.log($('ul').children('.ac')) // 
    console.log($('ul').children().children()) // a 
    console.log($('ul').find('a')) // 所有后代
    console.log($('li:first').next())
    console.log($('li:first').nextAll())
    console.log($('li:first').nextUntil('.ac')) // 不包含ac
    console.log($('.mouse').parents()) // 所有祖先及元素，直到html结束
    console.log($('.mouse').parents('ul'))
    console.log($('li.ac').siblings()) // 除自己以外的其他兄弟元素
    console.log($('li.ac').siblings(':first'))
  </script>
</body>
</html>
thanksKlan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新手学习JQuery基本操作和使用案例解析
10-15
在本文中，我们将深入探讨新手如何学习JQuery的基本操作和使用案例，通过实例代码来帮助理解和掌握这些核心概念。 首先，我们来看JQuery中的DOM（Document Object Model）操作。DOM是HTML和XML文档的编程接口，...
JQuery基本操作
学习python
10-16 217
关于jquery的选择器，我们知道进行jquery基本操作的基础就是jquery选择器的精准定位 那我们该怎么满足各种限制条件来选择我们需要的元素对象呢，这里给大家着重介绍一下几种方法，希望对你有所帮助。 jquery选择器 jquery用法思想一 选择某个网页元素，然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用lengt...
jQuery基本操作
qq_51810428的博客
09-26 854
DOM操作分类 样式操作 设置和获取样式值 追加和移除样式 追加样式 移除样式 切换样式 判断是否含指定的样式 内容及Value值操作 HTML代码操作 标签内容操作 属性值操作 节点操作 创建节点元素 插入节点 删除节点 替换节点 复制节点 属性操作 获取与设置元素属性 删除元素属性 节点遍历 遍历子元素 遍历同辈元素 遍历前辈元素 CSS-DOM操作
JQuery基础操作超详解✨
小皮皮LL的博客
08-19 606
文章目录JQuery基础1.JQuery概述2.选择器操作3.DOM操作 JQuery基础 本章主要总结JQuery的一些基本操作。 1.JQuery概述 概念：一个JavaScript框架，简化JS开发。 JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码
jQuery基础操作
MrYushiwen的博客
08-02 799
一.什么是jQuery jQuery是一个快速、简洁的JavaScript框架；jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 二.使用jQuery的好处 jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操
jQuery基础——操作DOM
weixin_57575133的博客
11-10 637
DOM操作可分为3个方面：DOM Core(核心）、HTML DOM和CSS DOM。jQuery作为一种JavaScript库，继承优化了JavaScript访问DOM对象的特性，使开发人员更加方便地操作DOM对象。
jQuery基础入门操作
XChang_E_的博客
07-10 3215
jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画效果等操作。通过使用 jQuery，开发者可以更快速、简便地操作和控制网页上的元素。jQuery 提供了一系列的 API 和方法，可以帮助开发者在网页上选择元素、修改内容、添加样式、处理事件等。通过使用 jQuery，开发者可以实现更加动态和交互性的网页效果，而不需要手动编写冗长的 JavaScript 代码。
jQuery基础（各种操作）
weixin_64037609的博客
09-20 439
jQuery基础（各种操作）
IDEA快捷键简化JQuery基本操作
weixin_44408623的博客
07-02 543
每次用idea进行JQuery代码的输写，少不了要引入jquery标准的使用方式，但是每次去打的话比较麻烦，所以本文通过设置idea的快捷键去简化JQuery操作。 创建一个html页面（输入JQuery语法复制，js版本自行替换） <script src="js/jquery-1.4.2.js"></script> <script> $(function () { //编写JQuery相关代码 }); </script> 2.
jquery常见操作总结
林中有神君
12-09 1147
这里写自定义目录标题1、jquery介绍2、jquery简单应用3、jQuery核心函数4、jquery对象与DOM对象5、jquery对象与DOM对象的区别6、dom对象与jquery对象的互转7、jquery选择器7.1、基本选择器7.2、层级选择器7.4、过滤选择器7.4.1、基本过滤器7.4.2、内容过滤器7.4.3、属性过滤器：7.4.4、表单过滤器7.4.5、表单对象属性过滤器7.4.6、jQuery 元素筛选8、jquery属性操作9、jquery操作css样式10、jquery动画11、jq
jQuery的一些基本操作（一）
txl2498459886的博客
05-22 382
一、了解jQuery是什么 简单的说，jQuery就是对JavaScript的DOM操做进行了一个封装。 二、jQuery常用的操作有哪些 jQuery常用的操作有： 1、获取DOM节点； 2、操作节点文本； 3、操作节点样式； 4、操作节点类名； 5、操作节点属性； ...
jQuery选择器及jQuery基本操作
01-08
属性操作3. Class操作4. 样式操作5. 内容操作6. 尺寸操作 1. jq选择器 jq的选择器，就是在执行jq函数时传参 是用来获取DOM元素的方法，通过下标可以获取其中某一个DOM元素 $ 函数不管使用选择器选中了几个元素，$...
详解JQuery基础动画操作
10-17
在本文中，我们将深入探讨jQuery中的基础动画操作，这些操作为网页动态效果的实现提供了强大的支持。jQuery使得在网页上创建各种复杂的动画效果变得简单易行，无需掌握复杂的JavaScript动画技术。 1. 隐藏与显示 ...
jQuery基础：jQuery事件操作
01-20
jQuery常用事件 参数function表示触发事件时执行的处理程序（函数）。 参数data用于为事件处理函数传递数据。（可在事件处理函数中使用“事件对象.data”获取） 页面加载事件 jQuery中的页面加载事件方法有3种...
QT自定义标题栏窗口，实现拖动及可拉伸效果
06-20
QT自定义标题栏窗口，实现拖动及可拉伸效果
小程序版通过CNN卷积神经网络的有无佩戴安全帽识别-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
小程序版深度学习CNN训练识别青苹果和红苹果-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
pyzmq-25.0.2-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
jquery操作DOM
07-28
jQuery是一个流行的JavaScript库，它简化了对DOM元素的操作。...这些只是jQuery操作DOM的一些基本示例，jQuery还提供了许多其他强大的功能，如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值