jquery学习笔记一

栏目: jQuery · 发布时间: 4年前

内容简介:学习慕课网jquery基础课程笔记。本篇博客只作为学习记录用。<span style="color: red">一定要区分 jquery 对象和 dom 对象,jquery 是一个类数组对象</span>,个人理解,jquery 是在 dom 对象上进行了封装,加了一些方法之类的。

jquery 学习笔记一

学习慕课网jquery基础课程笔记。本篇博客只作为学习记录用。

jquery 对象与 DOM 对象

<span style="color: red">一定要区分 jquery 对象和 dom 对象,jquery 是一个类数组对象</span>,

个人理解,jquery 是在 dom 对象上进行了封装,加了一些方法之类的。

// dom对象
let aaa = document.getElementById('aaa')
console.log(aaa) // <h3 id="aaa">hello world</h3>

// jquery对象
console.log($('#aaa')) // jQuery.fn.init [h3#aaa, context: document, selector: "#aaa"]

jquery 对象转 dom 对象

调用 get(index)方法可以将 jquery 对象转为 dom 对象

备注:暂时还没想到用的地方

<h3 class="aaa">111</h3>
<h3 class="bbb">222</h3>
<h3 class="ccc">333</h3>
var h3 = $('h3')
var aaa = h3.get(0)
console.log(aaa) // <h3 id="aaa">111</h3>

dom 对象转 jquery 对象

直接用&dollar;(dom)就可以完成转换

<h3 class="aaa">111</h3>
<h3 class="bbb">222</h3>
<h3 class="ccc">333</h3>
let aa = document.querySelector('.aaa')
console.log($(aa)) // jQuery.fn.init [h3.aaa, context: h3.aaa]

选择器

基础选择器

/**
 *  以下选择器中的xxx对应相应的id名,类名,标签名等 
 */
// id 选择器
$('#xxx');
// 类选择器
$('.xxx');
// 元素选择器
$('xxx');
// 全选择器
$('*')  // 注意全选择器会获取到所有的标签,包括html,header等标签

层级选择器

<span style="color: red">注意区分子元素和后代元素</span>

// 子选择器:选择所有指定'parent' 元素中指定的'child'的直接子元素。
$('parent > child');

// 后代选择器: 选择给定的祖先元素的所有后代原色,一个元素的后代可能是该元素的一个孩子,孙子,曾孙等。
$('ancestor descendant');

// 相邻兄弟选择器:选择所有紧接在'prev'元素后的'next'元素
$('prev + next');

// 一般兄弟选择器: 匹配'prev'元素之后的'所有兄弟元素'。具有相同的父元素
$('prev ~ siblings');

仔细观察层级选择器有以下的相同点和不同点

1、层级选择器都有一个参考节点

2、后代选择器包含子选择器的选择的内容

3、一般兄弟选择器包含相邻兄弟选择的内容

4、相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Scalability for Startup Engineers

Web Scalability for Startup Engineers

Artur Ejsmont / McGraw / 2015-6-23 / USD 34.81

Design and build scalable web applications quickly This is an invaluable roadmap for meeting the rapid demand to deliver scalable applications in a startup environment. With a focus on core concept......一起来看看 《Web Scalability for Startup Engineers》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

随机密码生成器
随机密码生成器

多种字符组合密码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具