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