浅谈jQurey的功能

leehome
689 阅读2分钟
jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。现如今jQuery依然是使用最广泛的javascript函数库。

jQuery获取元素

jQuery的设计思想和主要用法，就是“选择某个网页元素，然后对其进行某种操作”，这是这区别其他JavaScript库的根本特点。使用jQuery的第一步，是将一个选择表达式放进构造函数jQury()里面[为了方便jQuery可用$代替],选择表达式可以是CSS选择器和jQuery特有的表达式。

$('.red')//选择class：red的元素
$('#toc')//选择id:toc的元素
$('input[name=first]')//选择属性name属性为first的元素
$(document)//选择整个文档对象

jQuery特有的选择器：

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

2.jQuery的链式操作

jQuery风格也叫链式风格，正是因为它强大的链式操作这个功能，jQuery是一个特殊的函数，它用来获取对应的元素，但是他返回的是一个对象，这个对象称为jQuery构造出来的对象，这个对象包含了一个函数，所以又可以操作对应的元素。他在这个过程中也用到了闭包。

比如：我们在我们在$(#test)获取的元素里查找class=child的元素，再在这个元素里面添加clss=red,我们直接可以这样：

　　$('#test').find('child').addClass(red);

就实现了我们的需求，而不用写多句代码来进行操作，大大的提高了我们的效率。

而且jQuery还提供了.end()方法，使得结果集可以后退一步

$('#test').find('child').end().addClass(red);


这样的效果就是只在test里面添加red。    

是不是特别的方便。

3.jQuery创建元素

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了，以下为实现代码：

window.$ = window.jQuery = function(selectorOrArrayOrTemplate) {
  let elements;
  if (typeof selectorOrArrayOrTemplate === "string") {
    if (selectorOrArrayOrTemplate[0] === "<") {
      // 创建 div
      elements = [createElement(selectorOrArrayOrTemplate)];
    } else {
      // 查找 div
      elements = document.querySelectorAll(selectorOrArrayOrTemplate);
    }
  } else if (selectorOrArrayOrTemplate instanceof Array) {
    elements = selectorOrArrayOrTemplate;
  }

  function createElement(string) {//根据字符串内容创建
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.firstChild;
  }

比如创建一个div

4.jQuery移动元素

操作元素网页中的位置，有两种方法：第一种是移动该元素的位置来达到想要的效果；第二种是移动其他元素的位置，使得目标元素达到我们想要的位置。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

　$('div').insertAfter($('p'));

第二种方法是使用.after()，把p元素加到div元素前面：

$('p').after($('div'));

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

　　.insertAfter()和.after()：在现存元素的外部，从后面插入元素

　　.insertBefore()和.before()：在现存元素的外部，从前面插入元素

　　.appendTo()和.append()：在现存元素的内部，从后面插入元素

　　.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

5.jQuery修改元素的属性

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

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

常见的取值和赋值函数如下：

　.html() 取出或设置html内容

　.text() 取出或设置text内容

　.attr() 取出或设置某个属性的值

　.width() 取出或设置某个元素的宽度

　.height() 取出或设置某个元素的高度

　.val() 取出某个表单元素的值

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


参考文献：

阮一峰的《jQuery设计思想》

 jQuery 中文文档



前端小白，如有错误请留言指正！！！


avatar
文章
阅读
粉丝