jQuery笔记

ViktorVan范佩西
70 阅读2分钟

jQuery如何获取元素？

jQuery的基本设计思想和主要用法，就是 “选择某个网页元素，然后对其进行某种操作”。
使用jQuery的第一步，就是将一个选择表达式，放进构造函数jQuery()，然后得到被选中的元素

// 可以将构造函数简写为'$'，选择表达式也可以是CSS选择器
const api = jQuery(document) // 选择整个文档对象
const api = jQuery('.test') = $('.test') // 选择class为test的元素

选择表达式也可以是jQuery特有的表达式

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

jQuery如何实现链式操作

jQuery在选中网页元素以后，可以对它进行一系列操作，并且所有操作可以链接在一起，形成链式表达式：

$(".test").  // 选中所有class为test的元素
  find(".child").  // 查找并选择class为child的元素
  addClass("red").  // 添加red class
  addClass("blue").  // 添加blue class
  addClass("green")  // 添加green class

之所以能实现链式操作，原理在于每一步的jQuery操作，返回的都是一个jQuery对象。

// 实现一个简单jQuery封装
window.$ = window.jQuery = function(selector){
  let elements = document.querySelectorAll(selector);
  return { 
    addClass(className){
      for(let i = 0; i < elements.length; i++){
        elements[i].classList.add(className);
      }
      return this; // 返回jQuery对象本身，所以能支持链式操作
    }
  }

$('.test').addClass("red")

jQuery如何创建元素

创建元素非常简单，只需要把新元素直接传入jQuery的构造函数即可

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');

jQuery如何移动元素

移动元素有两种方法：

  1. 直接移动该元素
  2. 移动其他元素，使得目标元素达到我们想要的位置 假定我们选中了一个div元素，需要把它移动到p元素后面
// 第一种方法是使用insertAfter(),把div元素移动到p元素后面
$('div').insertAfter($('p'));
// 第二种方法是使用after(), 把p元素加到div元素前面
$('p').after($('div'));

两种方法结果虽然相同，但返回的元素不同，第一种方法返回div元素，第二种方法返回p元素。 一共有四对使用这种模式的操作方法：

jQuery如何修改元素的属性

jQuery的设计思想之一：使用同一个函数，来完成getter和setter, 通过重载的方法，实现取值或赋值操作。

$('h1').html();  // html没有参数，表示取出h1的值
$('h1').html('Hello');  // html()有参数Hello,表示对h1进行赋值

常见的getter/setter函数：

.html()  // 取出或者设置HTML内容
.text()  // 取出或设置text内容
.attr()  // 取出或设置某个属性的值
.width()  // 取出或设置某个元素的宽度
.height()  // 取出或设置某个元素的高度
.val()  // 取出或设置某个表单元素的值

需要注意的是：如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，只取出第一个元素的值（text()是例外，它取出所有元素的text内容）

avatar
文章
阅读
粉丝