文档章节

jQuery 使用技巧

zzbbxx
 zzbbxx
发布于 2017/04/26 14:47
字数 1507
阅读 15
收藏 0
(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;
    }
  1. 选择器。

        $('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()方法快,应该优先使用原生方法。





© 著作权归作者所有

共有 人打赏支持
zzbbxx
粉丝 5
博文 68
码字总数 19987
作品 0
青岛
前端工程师
私信 提问
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.1K
0
分享40个实用的jQuery用户界面UI设计技巧及教程:第一部分

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/11
348
0
jQuery教程:教你打造20个超级酷的视觉效果

我们都爱jQuery,因为基于它我们可以做出各种奇特的效果。下面这些特效教程都基于不同的主题,它们都包括一些很酷的视觉效果。按照下列步骤来进行重新设计,或按照这些使用的步骤用到你自己的...

ch2004
2012/04/03
0
0
10个帮助你创建超棒jQuery插件的小技巧

10个帮助你创建超棒jQuery插件的小技巧 日期:2012/02/29 来源:GBin1.com 这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件,很多开发人员都开发了很多...

gbin1
2012/02/29
0
0
分享50个使你成为高级javascript开发者的jQuery的代码开发技巧

翻译:Terry li - GBin1.com 英文: 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不......

gbin1
2011/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HTTP状态码对照表(HTTP response codes)

由于博主工作最近在做大数据日志分析的时候,用到了很多http状态码相关的知识。博主基本只记得其中200和404两个,所以,在此做个笔录。 当浏览者访问一个网页时,浏览者的浏览器会向网页所在...

em_aaron
26分钟前
2
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
36分钟前
1
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
今天
3
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
今天
3
0
协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部