文档章节

jQuery 使用技巧

朱宝鑫
 朱宝鑫
发布于 2017/04/26 14:47
字数 1440
阅读 15
收藏 0

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





© 著作权归作者所有

共有 人打赏支持
朱宝鑫
粉丝 5
博文 53
码字总数 14483
作品 0
青岛
前端工程师
Visual Studio下使用jQuery的10个技巧

【51CTO经典译文】广泛流行的jQuery是一个开源的,跨浏览器和兼容CSS 3的JavaScript库,你可以用它简化你的JavaScript编码任务和操作(添加,编辑和删除)HTML内容中的DOM元素,本文介绍10个...

晨曦之光
2012/03/09
0
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
【JQuery】源码研究院(序):I know jQuery. Now what?

->JavaScript vs Jquery+CoffeeScript ->I know jQuery. Now what? ->5 Things You Should Stop Doing With jQuery ->Power of Vanilla JS ->jquery常用教程和进阶技巧 ->如何做到 jQuery-f......

呢喃的猫咪
2014/03/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C++ std::function 和 std::bind

C++11提供了std::function和std::bind两个工具,用于引用可调用对象。这些可调用对象包括 普通函数,Lambda表达式,类的静态成员函数,非静态成员函数以及仿函数等。引用可调用对象,可以用于...

yepanl
今天
1
0
python:可迭代对象的索引

关于 python的range的用法: 注意是[ 开始,结束)的半开区间,不包括结束 http://www.runoob.com/python/python-func-range.html import collectionsfrom collections import Iterable字符串......

Oh_really
今天
2
0
docker-compose ,docker-stack

1.例子 version: "3"services: php: image: registry.cn-hangzhou.aliyuncs.com/lxepoo/apache-php5 ports: - "38080:80" networks: - my_php_mysql volum......

chenbaojun
今天
3
0
SQL_Server2000示例数据库NorthWind的分析(转)

SQL_Server2000示例数据库NorthWind的分析 表名:Categories(食品类别表) 表结构: 字段名称 数据类型 长度 允许为空 CategoryID(主键) int 4 否 CategoryName nvarchar 15 否 Description ...

QQZZFT
今天
1
0
laravel 5.5 Session store not set on request.

laravel 5.5 数据存入session,会出现Session store not set on request.错误。查了下laravel 5.5将session放到global middleware中,需要laravel的文件 ./app/Http/Kernel.php中的加上一句:...

MichaelShu
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部