【前端学习笔记】JQuery事件细节、JQ进阶常用方法

事件细节———————————————————————

ev直接使用，不需要兼容操作ev.pageX(Y) 鼠标的坐标(相对于文档) : ev.clientX(相对于窗口)ev.which(能监控鼠标键值) : ev.keyCodeev.preventDefault(); //阻止默认事件ev.stopPropagation(); //阻止冒泡事件函数结尾return false;既能阻止冒泡又能阻止默认事件one()

    $('div').one('click',function(){}); //事件只执行一次

JQ进阶方法—————————————————————–

get()

        $('#div').get(0).innerHTML//将JQ取的元素转化为原生JS识别的写法，

    get()取的是获取的一组元素get(i)取的是获取的一组元素第i个不过在JQ下也有length这个属性。JQ取的一组元素也能通过下标[i]变成原生JS识别的元素如：

        $('li')[i].style.background = 'red';

outerWidth()针对隐藏元素和参数trueouterWidth(false)相当于原生JS的offsetWidth但offsetWidth不能获取隐藏元素的值outerWidth()能获取隐藏元素值text()$('div').html();只能获取一组元素第一个元素的html内容而$('div').text();获取的是该组元素所有元素的文本内容(不含标签)remove()$('div').remove();返回的是被删除的这个元素对象，以方便下次再添加这个元素。另外这个方法执行后会移除调用这个方法的元素的所有绑定事件。detach()跟remove()方法一样，但是会保留这个元素删除前的所有操作行为。$(function(){});/$(document).ready(function(){});和原生JS的window.onload=function(){}相似区别是onload要等所有html结构(例如图片)加载完，才能执行代码$(function(){});是等dom加载完就执行里面的代码，性能要好高版本的浏览器用 DOMContentLoadedparents()获取元素的所有祖先节点parents('div')还可以筛选所有祖先节点中的指定节点closest()获取最近的指定祖先节点(包括当前元素自身)closest('div')筛选最近一个的指定祖先元素，和parents()的区别是只能找到一个元素siblings()获取所有的指定兄弟节点 nextAll()获取元素所有后面的指定兄弟节点  prevAll()获取元素所有前面的指定兄弟节点  parentsUntil()向上获取每层祖先节点直到指定祖先节点位置nextUntil()  获取元素所有后面的兄弟节点，直到指定节点结束prevUntil()获取元素所有前面的兄弟节点，直到指定节点结束clone()克隆节点。克隆出来的节点没有之前的绑定事件加一个参数true可以将原节点的绑定事件也克隆出来wrap() $('span').wrap('<div>')给元素包裹指定标签 wrapAll() $('span').wrapAll('<div>')给找到的元素整体包裹指定标签会把其他非span的元素排除在wrap外，使用时要注意wrapInner()$('span').wrap('<div>')给元素内容包裹指定标签 unwrap()删除包装(父级)注意，不包括bodyadd()$('div').add('span').css()元素合并操作(不是把span加到div里)  slice()$('li').slice(0,4);一组元素中取下标范围[a,b)的元素返回 a=b返回空serialize() $('form').serialize()对表单数据进行序列化(串联化),形成一个字符串serializeArray()$('form').serializeArray()对表单数据进行序列化,形成一个JSON数组animate()运动第一个参数:json{属性:值}第二个参数:时间(运动快慢) 默认400ms第三个参数:运动形式 默认swing(慢快慢)。  linear(匀速)第四个参数:回调函数，运动完以后要做的事(也可以用链式调用)stop()默认:只会阻止当前运动一参:true 阻止所有后续的运动二参:true 直接使元素到达当前运动目的地位置finish()立即停止到指定的所有目标点。delay(100)链在animate后，延时运动、delegate()事件委托

$('ul').delegate('li','click',function(){this.style.background = 'red';});

undelegate()阻止事件委托

        $('ul').undelegate();

trigger()主动触发事件

        $('#div').trigger('click');

事件细节：事件传参

        $('#div').on('click',{name:'hello'},function(ev){alert(ev.data.name);//获取外部传进来的参数alert(ev.target);  //获取操作源(全兼容)alert(ev.type);    //获取事件类型});

$下常用方法(工具方法)——————————————————-

$().fn() 只能给JQ对象用$.xxx() $.yyy() $.zzz() : 不仅能给JQ用还能给原生JS用，叫做工具方法$.type()判断类型，返回字符串和原生JS typeof方法不同的是，该方法可以返回更细的类型对object细分了 regexp date array json等类型$.trim()$.trim(str) 去str的前后空格$.inArray()$.inArray('b',arr);类似于字符串方法indexOf();$.proxy()改变this指向

        function show(n1,n2){alert($(this));alert(n1);alert(n2);}$.proxy(show,documnet,3,4)();$.proxy(show,documnet)(3,4);/*一参是方法，二参是指向的对象而该函数的形参可以写在三参及以后或者后面的执行括号内方便在非立即执行的时候传入参数。例如:*/function show(n1,n2){}$(document).click( $.proxy(show, $(#div1),3,4) );

$.noConflict()防止命名冲突var _$ = $.noConflict();可以用_$代替$了$.parseJSON()将字符串解析成JSON$.makeArray()把类数组转化为数组,使其可以使用数组方法例如类数组 var aLis = $('li');

        $.makeArray(aLis).push($('#li1'));

ajax for JQ—————————————————————–

    //参数为json形式$.ajax({url : 'xxx.php',data : 'name=loe&age=20',type : 'POST',comtentType : '',success : function(data){//请求成功以后的回调函数$.parseJSON(data)},error : function(){//...}});//抽象出来的方法$.get('xxx.php',{数据},function(){//成功的回调函数}); $.post('xxx.php',{数据},function(){//成功的回调函数});$.getJSON('xxx.php?callback=show|?',function(){});//?代表随机返回函数名字functuin show(data){//处理JSONP返回数据}

JQ插件操作———————————————————-

$.extend扩展工具方法下的插件形式 $.xxx() $.yyy()写法如下

        $.extend({leftTrim : function(){},rightTrim : function(){}})

$.fn$.fn.extend扩展到jq对象上的插件形式$().xxx() $().yyy()写法:

    $.fn.extend({name : function(){$(this)//代表调用这个方法的JQ对象。}})

【前端学习笔记】JQuery事件细节、JQ进阶常用方法相关推荐

[前端学习笔记] jQuery基础知识整理
一.jQuery基本概念 1. 什么是jQuery jQuery是一个快速简洁的JS库,封装了JS常用的功能代码,优化了DOM操作.事件处理.动画设计.Ajax交互等.我们可以快速查询使用里面的功能函 ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
JAVA学习笔记—前端学习笔记（二）—JQ、ES6、Bootstrap
文章目录四.jQuery基础 1.jQuery介绍 1.1 jQuery能做什么? 1.2 jQuery的优势 2. jQuery的使用 2.1 基本的语法介绍 2.2 jQuery对象与DOM对象 ...
web前端学习笔记——JQuery
web前端开发基础第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
前端学习：jQuery学习--Day03
前端学习:jQuery学习–Day03 ps:这几天偷了点懒呜呜外加考试耽误了几天学习最后自己做了一个给女朋友的惊喜点滴记录note 大纲自定义事件自动触发事件委托鼠标移入移出事件电影排行 ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
JavaScript 学习笔记 - 挂载事件 Demo
JavaScript 学习笔记 - 挂载事件 Demo 例子 addEventListener 监听事件挂载事件的同时带上参数 dispatchEvent 触发事件 removeEventListe ...

【前端学习笔记】JQuery事件细节、JQ进阶常用方法

【前端学习笔记】JQuery事件细节、JQ进阶常用方法相关推荐

最新文章

热门文章