jQuery如何获取元素
jQuery主要是使用选择器去获取对应元素,但是获取之后不会返回这些元素,会直接以这个元素为基础构造一个新的jQuery自己的对象,这个对象用来操作之前获取的元素,操作完成之后最终再返回这个构造出来的对象,用闭包去维持元素的存在。这样就可以进行一些操作,比方说jQuery最经典的链式操作。
链式操作
jQuery中的链式操作就是要用到上面的获取方法,正常代码中添加选择器并获取到对应的元素之后,一般是返回这个元素,但jQuery不一样,他需要定义一个对象,然后用这个对象对获取到的元素进行操作,操作完成之后只需要在上一个操作的函数后面再接上下一个操作函数就可以完成一连串的操作,这种操作就被定义为链式操作。如下面代码所示,addClass去return this,这个this就是最后addClass前面的函数。jQuery = function(selector){<br /> const elements = document.querySelectorAll(selector)<br /> return {<br /> addClass(className){<br /> for(let i=0;i<elements.length;i++){<br /> elements[i].classList.add(className)<br /> }<br /> return this<br /> }<br /> }<br />}·<br />
api.addClass(‘red’)
.addClass(‘blue’)
.addClass(‘green’)`
jQuery如何创建元素
创建元素的方法很简单,只需要把新元素直接传入到jQuery的构造函数里面就行了。$('<p>hello</p>');
jQuery如何移动元素
jQuery移动元素主要用两种方法,一种是直接移动该元素。另一种是移动其他元素的位置,以达到把元素调整位置的目的。
第一种可以使用.insertAfter()
方法,把div元素移动到p元素后面:$('div').insertAfter($('p'));
第二种方法使用.after()
方法,把p元素加到div元素前面:$('p').after($('div'));
对于这种模式的操作方法,有四种方式:.insertAfter()
和.after()
:在现存元素的外部,从后面插入元素.insertBefore()
和.before()
:在现存元素的外部,从前面插入元素.appendTo()
和.append()
:在现存元素的内部,从后面插入元素.prependTo()
和.prepend()
:在现存元素的内部,从前面插入元素
jQuery如何修改元素的属性
也就是取值和赋值,jQuery中可以使用同一个进行取值和赋值:$('h1').html();
//html()没有参数,所以表示取出h1的值$('h1').html('Hello');
//html()有参数Hello,表示对h1进行赋值
常见的取值和赋值函数如下:.html()
取出或设置html内容.text()
取出或设置text内容.attr()
取出或设置某个属性的值.width()
取出或设置某个元素的宽度.height()
取出或设置某个元素的高度.val()
取出某个表单元素的值