jQuery设计思想完整篇

2020-05-23 06:17:23易采站长站整理


删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。


清空元素内容(但是不删除该元素)使用.empty()。


创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:



  $(‘<p>Hello</p>’);


  $(‘<li class=”new”>new list item</li>’);


  $(‘ul’).append(‘<li>list item</li>’);


七、工具方法


除了对选中的元素进行操作以外,jQuery还提供一些工具方法(utility),不必选中元素,就可以直接使用。


如果你懂得Javascript语言的继承原理,那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用。如果不理解这种区别,问题也不大,只要把工具方法理解成,是像javascript原生函数那样,可以直接使用的方法就行了。


常用的工具方法有以下几种:



  $.trim() 去除字符串两端的空格。


  $.each() 遍历一个数组或对象。


  $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。


  $.grep() 返回数组中符合某种标准的元素。


  $.extend() 将多个对象,合并到第一个对象。


  $.makeArray() 将对象转化为数组。


  $.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。


  $.isArray() 判断某个参数是否为数组。


  $.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。


  $.isFunction() 判断某个参数是否为函数。


  $.isPlainObject() 判断某个参数是否为用”{}”或”new Object”建立的对象。


  $.support() 判断浏览器是否支持某个特性。


八、事件操作


jQuery可以对网页元素绑定事件。根据不同的事件,运行相应的函数。



  $(‘p’).click(function(){


    alert(‘Hello’);


  });


目前,jQuery主要支持以下事件:



  .blur() 表单元素失去焦点。


  .change() 表单元素的值发生变化


  .click() 鼠标单击


  .dblclick() 鼠标双击


  .focus() 表单元素获得焦点