jQuery

  • jQuery 是一个前端库，也是一个方法库

  • 他里面封装着一些列的方法供我们使用

  • 我们常用的一些方法它里面都有，我们可以直接拿来使用就行了

  • jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了

  1. 优质的选择器和筛选器

  2. 好用的隐式迭代

  3. 强大的链式编程

  • 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”

  • 接下来我们就来认识一下 jQuery

jQuery 的使用

  • jQuery官网

    • 官网是全英文的

    • 也没啥可看的，不过没事的时候可以看看了解一下

  • jQuery方法大全中文网

    • 这个网站可以多看看

    • 里面是 jQuery 的方法大全，而且是中文的

  • 我们要使用 jQuery 首先要下载一个

    • 可以去官网下载，也可以直接百度搜索下载，都可以

  • 然后就是在页面里面引入 jQuery.js 就行了

<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>Documenttitle>head>  <body>      <script src="./jquery/jquery.js">script>  body>html>

  • 然后就可以开始使用了

  • jQuery 向全局暴露的接口就是 jQuery 或者 $ 都行

选择器和筛选器

  • 选择器和筛选器就是用来帮我们获取 DOM 元素的

选择器

  • jQuery 有着相当强大的选择器

// 按照 id 获取页面中的元素const ele = jQuery('#box') const ele = $('#box')

  • 上面两个都可以按照 id 来获取元素

// 按照类名来选择const eles = jQuery('.a')const eles = $('.a')

  • 上面就是按照类名来选择元素，可以获取到一组元素

const lis = jQuery('li')const lis = $('li')

  • 上面就是按照标签名来获取元素，可以获取到一组元素

const eles = jQuery('ul > li')const eles = $('ul > li')

  • 上面就是按照选择器来获取元素，可以获取到一组元素

特殊选择器

  • 直接找到第一个

$('li:first') // 找到所有 li 中的第一个

  • 直接找到最后一个

$('li:last') // 找到所有 li 中的最后一个

  • 直接找到第几个

$('li:eq(3)') // 找到所有 li 中索引为 3 的那个

  • 找到所有奇数个

$('li:odd') // 找到所有 li 中索引为 奇数 的

  • 找到所有偶数

$('li:even') // 找到所有 li 中索引为 偶数 的

筛选器

  • jQuery 的筛选器就是在选择器选择到一组元素以后

  • 对元素进行筛选，也可以对准确的某一个元素进行判断和获取

  1. 找到所有元素中的第一个$('li').first()

  2. 找到所有元素中的最后一个$('li').last()

  3. 找到某一个元素的下一个兄弟元素$('li:eq(3)').next()

  4. 找到某一个元素的上一个兄弟元素$('li:eq(3)').prev()

  5. 找到某一个元素的后面的所有兄弟元素$('li:eq(3)').nextAll()

  6. 找到某一个元素的前面的所有兄弟元素$('li:eq(3)').prevAll()

  7. 找到某一个元素的父元素$('li:eq(3)').parent()

  8. 找到某一个元素的所有结构父级，一直到 html$('li:eq(3)').parents()

  9. 找到一组元素中的某一个

// 在 li 的所有父级里面找到所有 body 标签$('li').parents().find('body')// 找到 div 标签下所有后代元素中所有类名为 box 的元素$('div').find('.box')

属性操作

  • 给一个元素添加某个属性

// 给 div 元素添加一个 id 属性，值是 box$('div').prop('id', 'box')// 获取 div 的 id 属性console.log($('div').prop('id'))

    • prop 这个方法只能添加元素自己本身就有的属性

    • 如果是添加的自定义属性，不会显示在标签上，但是可以使用

  • 给一个元素添加某个自定义属性

// 给 div 添加一个 index 属性，值是 1$('div').attr('index', 1)// 获取 div 的 index 属性console.log($('div').attr('index'))

  • 移除元素的某一个属性

// 移除元素自己本身的属性$('div').removeProp('id')// 移除元素的自定义属性$('div').removeAttr('index')

  • 操作元素的类名

// 判断某一个元素有没有某一个 class$('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名// 给元素添加一个类名$('div').addClass('box2') // 给 div 元素添加一个 box2 类名// 移除元素的类名$('div').removeClass('box') // 移除 div 的 box 类名// 切换元素类名$('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加

  • 操作元素的内容

// 给元素的 innerHTML 赋值$('div').html('hello world')// 获取元素的 innerHTML$('div').html()// 给元素的 innerText 赋值$('div').text('hello world')// 获取元素的 innerText$('div').text()// 给元素的 value 赋值$('input').val('admin')// 获取元素的 value 值$('input').val()

操作样式

  • jQuery 操作元素的样式就是一个方法 css

// 给元素设置一个 css 样式$('div').css('width', '100px')// 获取元素的某一个样式$('div').css('width')// 给元素设置一组样式$('div').css({width: '100px',height: '200px'})

 苦逼的日子，有你真好看见这个分享了吗，点它

jquery 所有contenteditable=true的元素_JavaScript学习笔记（三十一） jQuery（上）相关推荐

  1. jquery源码学习笔记三：jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  2. Mr.J-- jQuery学习笔记(三十一)--事件操作方法(onoff)

    on(type, callback) 定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 ...

  3. 学习笔记三十一：IO流（三）

    活鱼会逆流而上,死鱼才会随波逐流. 本讲内容:文件流 例一:写一个记事本 package b;import java.io.*; import java.awt.*; import javax.swi ...

  4. JAVA学习笔记(三十一)-电影系统案例

    伪代码 系统的角色类准备 用户购票 用户评分 商家功能 首页设计 先封装 public class Business extends User{// 店铺名称private String shopNa ...

  5. 【信安学习笔记三】文件上传

    个人学习参考用笔记 目录 前言 一.文件上传 **定义** **危害** **查找及判断** **分类** 二.验证与绕过 前端防护 后端防护 (一)黑名单 (二)白名单 (三)内容及其他 三.漏洞 ...

  6. ssm上传文件进度条_ssm学习笔记-三种文件上传方式

    首先需要引入commons-fileupload commons-fileupload commons-fileupload 1.3.3 MultipartFile方式 示例代码: @RequestM ...

  7. Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装

    扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...

  8. jquery设置宽_JavaScript学习笔记（三十二） jQuery（中）

    jQuery 昨天讲了 jQuery 的基本选择器筛选器和属性操作 今天来说一些 jQuery 别的东西 元素操作 创建一个元素 var div = $(') 内部插入元素 // 向 div 元素中插 ...

  9. jQuery学习（三）—jQuery使用步骤以及注意事项

    jQuery学习(三)-jQuery使用步骤以及注意事项 jQuery的使用步骤: 第一步:利用script标签将jQuery文件引入到当前的HTML中 第二步:在文档中插入一个新的script标签在 ...

最新文章

  1. 使用Python操作excel文件
  2. 今日arXiv精选 | 18篇近期值得关注的Transformer工作
  3. 反射获取成员方法并使用【应用】
  4. mongodb及其索引的使用例子
  5. 你必须知道的Docker数据卷
  6. java oop入门_java入门(十六) | OOP(三)之构造方法
  7. 麦克风阵列树莓派python_使用Python代码进行树莓派上的麦阵列声源定位
  8. Mark—零散知识汇总
  9. HTML段落前面怎么加黑点,word文档前面的黑点是怎么加的？(组图)
  10. 【Cesium】智慧城市建筑白模泛光特效
  11. 冒泡排序--咕噜咕噜
  12. windows防火墙开启后，设置准入端口
  13. 如何在win10系统上改装高仿MAC主题桌面
  14. Java第三章 面向对象（上）
  15. LCA 最近公共祖先 详解
  16. JS字符串截取 “指定字符” 前面和后面的内容！
  17. 【愚公系列】2022年02月 U3D全栈班 002-Unity游戏结构和游戏开发流程
  18. Android实习报告
  19. ebay注册流程_2017年eBay注册开店流程图文详解
  20. 万能SQL查询面试题

热门文章

  1. c++之二维数组参数传递
  2. java语句电脑定时关机_月光软件站 - 编程文档 - Java - windows定时关机程序
  3. 提交数据网页设计_数据化时代，爬虫工程师才是真正“扛把子”
  4. 【转】模块（configparser+shutil+logging)
  5. 基本数据类型参数传递 与 引用数据类型参数传递区别
  6. 新开博了，欢迎大家来做客！
  7. data Mining with Weka: Trailer More Data Mining with Weka 用weka 进行数据挖掘 Weka 用weka 进行更多数据挖掘...
  8. minhash算法 java_minhash算法
  9. SQL Server 合并复制遇到identity range check报错的解决
  10. Cocos2d-x编程中的runOnUiThread方法和runOnGLThread方法剖析