文档章节

jQuery 使用技巧

遗叶枫流
 遗叶枫流
发布于 2017/04/26 14:47
字数 1440
阅读 15
收藏 0
点赞 0
评论 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
博文 50
码字总数 13908
作品 0
青岛
前端工程师
javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

深入理解javascript系列(十八):掌握面向对象(1)

面向对象,一个老生常谈的话题,但你有没有想过面向对象要解决什么问题? 有一位大神说的很直接,”面向对象要解决的问题,并不是封装、继承和多态,而是写代码的套路“。 我觉得有理,所以简...

Panthon ⋅ 06/20 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

vue获取input输入框的数据

用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过...

王子城 ⋅ 06/21 ⋅ 0

Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi ⋅ 06/22 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 06/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

监控各项服务

比如有三个服务, 为了减少故障时间,增加监控任务,使用linux的 crontab 实现. 步骤: 1,每个服务写一个ping接口 监控如下内容: 1,HouseServer 是否正常运行,所以需要增加一个ping的接口 ; http...

黄威 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

nodejs __proto__跟prototype

前言 nodejs中完全没有class的这个概念,这点跟PHP,JAVA等面向对象的语言很不一样,没有class跟object的区分,那么nodejs是怎么样实现继承的呢? 对象 对象是由属性跟方法组成的一个东西,就...

Ai5tbb ⋅ 昨天 ⋅ 0

Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库

Q: Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库 A: 执行以下2条命令解决: apt-get install php-mysql service apache2 restart php -m 执行后会多以下4个模块: mysqli mysqlnd...

SamXIAO ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部