资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/jquery学习笔记一

jquery学习笔记一

Anshiii / 2480人阅读

摘要：学习笔记一学习慕课网基础课程笔记。本篇博客只作为学习记录用。后代选择器选择给定的祖先元素的所有后代原色，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。相邻兄弟选择器选择所有紧接在元素后的元素一般兄弟选择器匹配元素之后的所有兄弟元素。

jquery 学习笔记一 
</>复制代码 
  1. 学习慕课网jquery基础课程笔记。本篇博客只作为学习记录用。
jquery 对象与 DOM 对象

一定要区分 jquery 对象和 dom 对象，jquery 是一个类数组对象,
个人理解，jquery 是在 dom 对象上进行了封装，加了一些方法之类的。

</>复制代码 
  1. // dom对象
  2. let aaa = document.getElementById("aaa")
  3. console.log(aaa) // 
    hello world
  4. // jquery对象
  5. console.log($("#aaa")) // jQuery.fn.init [h3#aaa, context: document, selector: "#aaa"]
jquery 对象转 dom 对象

调用 get(index)方法可以将 jquery 对象转为 dom 对象
备注：暂时还没想到用的地方

</>复制代码 
  1. 111
  2. 222
  3. 333
</>复制代码 
  1. var h3 = $("h3")
  2. var aaa = h3.get(0)
  3. console.log(aaa) // 
    111
dom 对象转 jquery 对象

直接用$(dom)就可以完成转换

</>复制代码 
  1. 111
  2. 222
  3. 333
</>复制代码 
  1. let aa = document.querySelector(".aaa")
  2. console.log($(aa)) // jQuery.fn.init [h3.aaa, context: h3.aaa]
选择器 基础选择器 
</>复制代码 
  1. /**
  2.  *  以下选择器中的xxx对应相应的id名，类名，标签名等 
  3.  */
  4. // id 选择器
  5. $("#xxx");
  6. // 类选择器
  7. $(".xxx");
  8. // 元素选择器
  9. $("xxx");
  10. // 全选择器
  11. $("*")  // 注意全选择器会获取到所有的标签,包括html，header等标签
层级选择器

注意区分子元素和后代元素

</>复制代码 
  1. // 子选择器：选择所有指定"parent" 元素中指定的"child"的直接子元素。
  2. $("parent > child");
  3. // 后代选择器: 选择给定的祖先元素的所有后代原色，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。
  4. $("ancestor descendant");
  5. // 相邻兄弟选择器：选择所有紧接在"prev"元素后的"next"元素
  6. $("prev + next");
  7. // 一般兄弟选择器： 匹配"prev"元素之后的"所有兄弟元素"。具有相同的父元素
  8. $("prev ~ siblings");
</>复制代码 
  1. 仔细观察层级选择器有以下的相同点和不同点  
    1、层级选择器都有一个参考节点  
    2、后代选择器包含子选择器的选择的内容  
    3、一般兄弟选择器包含相邻兄弟选择的内容  
    4、相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
云服务器 GPU云服务器 jquery学习笔记 学习笔记一 学习笔记 基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103312.html

相关文章

  • JavaScript框架学习笔记（一）

    摘要：基本的学习思路是跟着框架设计这本书，甚至可以说是这本书的读书笔记。也参考很多网上解读的博客和学习资料。当然，最重要的资料还是框架的源代码。后来由于开发者反对，新兴的框架都在命名空间上构建。 JavaScript框架学习笔记（一） 我为什么要学习框架 更深入的理解工具，以后用起来更顺手而且也能做一定的工具取舍，学习理解新工具也就更快， 对提升js水平也很有帮助，框架有很多解决坑的经典思...

    Shonim 评论0 收藏0

  • jQuery学习笔记

    摘要：提高业务编程能力中提供了很多的方法基本都兼容，我们可以使用这些方法快速开发项目中有的方法提供的思想可以让我们把项目实现得更优化提高基础以及一些高级编程思想分析源码，学习里面类库封装的思想和一些方法实现的原理有时间把中提供的常用方法都去实现一 jQuery 提高业务编程能力 JQ中提供了很多的方法（基本都兼容），我们可以使用这些方法快速开发项目 JQ中有的方法提供的思想可以让我们把...

    GHOST_349178 评论0 收藏0

  • 26天学通前端开发（配资料）

    摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。 前言 好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。 网上有很多前端的学习路径文章，大多是知...

    blair 评论0 收藏0

  • jquery源码分析

    摘要：前言随着前端的不断发展，很多开发人员已经开始使用等框架，但是很少有人去深入分析以及的源码本人也是，至今还停留在使用的层面。最近还在写一些的笔记，有兴趣的小白也可以看下我的博客文章源码分析地址 前言 随着前端的不断发展，很多开发人员已经开始使用react、vue等web框架，但是很少有人去深入分析vue以及react的源码（本人也是，至今还停留在使用的层面）。框架的使用势必会有更新迭代的...

    SHERlocked93 评论0 收藏0

  • jQuery入门学习笔记1

    摘要：首先明确是一个库，它的类型是函数，这一点可以通过查看。判断传入的参数是还是返回具体的方法函数可将所有的添加一个可将所有的变为全局声明，它是一个函数，返回一个对象，对象内有不同的方法，本文例子有个方法增加类名，修改节点内容。 首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入...

    lakeside 评论0 收藏0

发表评论

登陆后可评论

0条评论

Anshiii

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<