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、相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下