jquery on方法原理_jQuery 学习小结

jQuery 学习小结

相较于原生 JS，jQuery 通过 API 接口写更少的代码，做更多的事情。虽然这个元老级别的技术库的使用率已经渐渐在减少了，不过了解其原理和用法还是很有用的。

jQuery 之选择元素

let div = document.querySelector('#div')
let $div = $('#div');
console.log('div:')
console.log(div)
console.log('$div:')
console.log($div)

假设页面有一个id='div'的元素，div是一个 DOM 对象，而$div是一个 jQuery 封装对象。

jQuery 返回的不是被选择 DOM 元素，而是返回一个 jQuery 对象，这个对象的原型中有许多封装好的函数（如on、has等），用户可以通过所提供的 API 接口调用。

jQuery 之过滤器

jQuery 提供的过滤器接口可以筛选出符合条件的 DOM 元素并对其进行封装。

<ul>
  <li id="item1">list item 1</li>
  <li id="item2">list item 2</li>
  <ul>
    <li>list item 2-a</li>
    <li>list item 2-b</li>
  </ul>
  <li id="item3">list item 3</li>
  <li id="item4">list item 4</li>
  <li id="item5">list item 5</li>
  <li id="item6">list item 6</li>
</ul>

假设有如上 html 片段

$("li").filter(":even"); // 选择索引为奇数的li元素
$("li").has("ul"); // 选择包含ul元素的li元素
$("li").first(); // 选择第一个li元素

jQuery 之元素增删改查

仍以上面 html 片段为例

$("#item1").after($("<span>span</span>")); // 插入
$("#item2").after($("#item3")); // 移动
$("#item4").remove(); // 删除
$("#item5").replaceWith("<div>div</div>"); // 修改
$("#item6").addClass("haha"); // 添加类
$("#item2").$("li").first().css("color", "red"); // 设置样式

得到的结果

<ul>
  <li id="item1">list item 1</li>
  <span>span</span>
  <li id="item3">list item 3</li>
  <li id="item2">list item 2</li>
  <ul>
    <li>list item 2-a</li>
    <li>list item 2-b</li>
  </ul>
  <div>div</div>
  <li id="item6" class="haha">list item 6</li>
</ul>

更多 API 查看文档

jQuery 之链式操作

调用 jQuery 对象方法后返回的又是一个 jQuery 对象从而可以继续对这个返回后的对象进行操作。 如上例子$('#item2').$('li').first().css('color', 'red');

jQuery 之取值与赋值

jQuery 函数的参数可以决定操作或读或写。

$("#item1").html(); // 取值。list item 1
$("#item3".html("ayaya")); // 赋值。<li id="item3">ayaya</li>