jQuery技巧与优化-优快云博客

(function ($)
{
  var index ={
  	init: function (){
	  var me = this;
	  me.render();
	  me.bind();
	},
	
	render: function (){
	  var me = this;
	  me.test = $("#table id");
	}
	
	bind: function(){
	  var me= this;
	  me.test.on('click', $.proxy(me['_do'], this));
	}
	
	_do: function(e){
	  var m = $(e.target).text();
	  var s = '<input type"text" value="+m+" />';
	  $(e.target).html(s);
	}
  }
  
  index.init();
})(jQuery);

1.页面加载完毕后，动态DOM添加事件。事件委托方式

    $(document).on('click', '.elementName', function ()
    {
        console.log('in');
        $(this).toggleClass("click");
    });

    //当有多个子元素绑定同一个事件的时候可以用事件委托方式绑定到父元素上
    $("td").on("click", function(){
　　　　$(this).toggleClass("click");
　　});
        //将事件绑定到td 的共同父元素table
    $("table").on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});
        //将事件绑定在document对象上
    $(document).on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});
        //取消事件绑定$(document).off("click", "td");


    但是在移动端 click事件不触发，解决办法：
    $(document).on('click touchstart', '.elementName', function ()
    {
        console.log('in');
    });
    或者给 元素添加css
    .elementName{
        curser:pointer;
    }

选择器。


        $('p').wrap('<div></div>');//给p元素，添加父元素div。

　    $('a:first') //选择网页中第一个a元素

　　$('tr:odd') //选择表格的奇数行

　　$('#myForm :input') // 选择表单中的input元素

　　$('div:visible') //选择可见的div元素

　　$('div:gt(2)') // 选择所有的div元素，除了前三个

　　$('div:animated') // 选择当前处于动画状态的div元素

       $('div').has('p'); // 选择包含p元素的div元素

　　$('div').not('.myClass'); //选择class不等于myClass的div元素

　　$('div').filter('.myClass'); //选择class等于myClass的div元素

　　$('div').first(); //选择第1个div元素

　　$('div').eq(5); //选择第6个div元素

　   $('div').next('p'); //选择div元素后面的第一个p元素

　　$('div').parent(); //选择div元素的父元素

　　$('div').closest('form'); //选择离div最近的那个form父元素

　　$('div').children(); //选择div的所有子元素

　　$('div').siblings(); //选择div的同级元素

        $('input[value="0"]') //value 选择器

3.工具方法

　    $.trim() //去除字符串两端的空格。
　　$.each() //遍历一个数组或对象。
　　$.inArray()// 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
　　$.grep() //返回数组中符合某种标准的元素。
　　$.extend()// 将多个对象，合并到第一个对象。
　　$.makeArray() //将对象转化为数组。
　　$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
　　$.isArray() //判断某个参数是否为数组。
　　$.isEmptyObject() //判断某个对象是否为空（不含有任何属性）。
　　$.isFunction() //判断某个参数是否为函数。
　　$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象。
　　$.support() //判断浏览器是否支持某个特性。

4.jQuery事件

       .blur() //表单元素失去焦点。
　　.change() //表单元素的值发生变化
　　.click() //鼠标单击
　　.dblclick() //鼠标双击
　　.focus() //表单元素获得焦点
　　.focusin() //子元素获得焦点
　　.focusout() //子元素失去焦点
　　.hover() //同时为mouseenter和mouseleave事件指定处理函数
　　.keydown() //按下键盘（长时间按键，只返回一个事件）
　　.keypress() //按下键盘（长时间按键，将返回多个事件）
　　.keyup() //松开键盘
　　.load() //元素加载完毕
　　.mousedown() //按下鼠标
　　.mouseenter() //鼠标进入（进入子元素不触发）
　　.mouseleave() //鼠标离开（离开子元素不触发）
　　.mousemove() //鼠标在元素内部移动
　　.mouseout() //鼠标离开（离开子元素也触发）
　　.mouseover() //鼠标进入（进入子元素也触发）
　　.mouseup() //松开鼠标
　　.ready() //DOM加载完成
　　.resize() //浏览器窗口的大小发生改变
　　.scroll() //滚动条的位置发生变化
　　.select() //用户选中文本框中的内容
　　.submit() //用户递交表单
　　.toggle() //根据鼠标点击的次数，依次运行多个函数
　　.unload() //用户离开页面


       event.pageX //事件发生时，鼠标距离网页左上角的水平距离
　　event.pageY //事件发生时，鼠标距离网页左上角的垂直距离
　　event.type //事件的类型（比如click）
　　event.which //按下了哪一个键
　　event.data //在事件对象上绑定数据，然后传入事件处理函数
　　event.target //事件针对的网页元素
　　event.preventDefault() //阻止事件的默认行为（比如点击链接，会自动打开新页面）
　　event.stopPropagation() //停止事件向上层元素冒泡

5.元素属性操作

attr();修改属性，添加属性。
removeAttr();删除属性。

//元素的移动
     $('div').insertAfter($('p'));//使用.insertAfter()，把div元素移动p元素后面：

     $('p').after($('div'));//使用.after()，把p元素加到div元素前面：

　.insertAfter()和.after()：//在现存元素的外部，从后面插入元素
    .insertBefore()和.before()：//在现存元素的外部，从前面插入元素
　.appendTo()和.append()：//在现存元素的内部，从后面插入元素
　.prependTo()和.prepend()：//在现存元素的内部，从前面插入元素

4.jQuery优化

//从父元素选择子元素最快的方法。
$parent.find('.child');

//不要过渡使用jQuery
document.getElementById("foo")比$("#foo")快10多倍

//做好缓存
var cached = jQuery('#top);
cached.find('p.classA');
cached.find('p.classB');
//缓存比不缓存快2-3倍

//使用链式写法:性能提升25%
$('div').find('h3').eq(2).html('Hello');

//修改dom结构：改动DOM结构开销很大，因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。
//如果要插入多个元素，先将它们合并，然后一次性插入，会增快近10倍的加载速度。
//如果对一个DOM进行大量操作，先用.detach()方法，把这个元素从DOM取出，处理完毕后，在重新插入文档。

//如果在DOM元素上存储数据，不要写成这样
var elem = $('#elem');
　　elem.data(key,value);

//要写成这样
var elem = $('#elem');
　　$.data(elem[0],key,value);
//后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的，
//而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多。

//插入html代码的时候，浏览器原生的innterHTML()方法比jQuery对象的html()

//javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。

转载于:https://my.oschina.net/zhubaoxin/blog/887520