jQuery中的一些技巧

在使用JQ的过程中，一些小技巧：

1.is()方法

根据选择器、元素或jQuery对象，如果这些元素中至少有一个匹配给定的参数，它将返回true。一些小应用如下：

ul lilist strongitem项目1/strong/Li Li列出项目2/span/Li Li列出项目3/li/ul$('ul ')。click(function(event)){ var $ target=$(event . target)；if($ target . is(' Li '){ $ target . CSS('背景色'，'红色')；}});这样就可以限制只有在列表项li本身被点击后，才会触发写的点击事件。

它还可以做出以下判断：

//是divelem.is ('div ')控制台. log('是div ')；//有没有一个元素包含(或者可以有其他类名)bigbox的类名？elem.is('。bigbox') console.log('它有bigbox类！');//是否隐藏？elem . is(' : not(: visible)')console . log('它是隐藏的！');需要注意的是，操作者可以用来做出判断。当满足前一个条件时，将执行后一个条件，但后一个条件不能是表达式，只能是console.log()或I .

还有以下有用的用法：

elem.animate({'width':200}，1000)；//你在给elem . is(“:动画”)控制台. log(“它是动画的！”);2.2.jquery中的扩展方法

$.fn引用jquery的命名空间，fn上的方法和属性对jquery的每个实例都有效。

如果扩展$.fn.abc()，即$.fn.abc()将一个abc方法扩展到jquery，那么jquery的每个实例以后都可以引用这个方法。

然后你可以看起来像这样：$('#div ')。ABC()；

jQuery.extend(对象)；若要扩展jQuery类本身，请向该类添加新方法。

jQuery.fn.extend(对象)；向jQuery对象添加一个方法。

jQuery.extend(对象)；向jQuery类添加add类方法可以理解为添加静态方法。例如：

elem.animate({'width':200}，1000)；//你在给elem . is(“:动画”)控制台. log(“它是动画的！”);在jQuery中添加一个名为Add的“静态方法”，然后在引入jQuery的地方使用这个方法。

$.add(3，4)；//返回7

jQuery.fn.exists=function(){返回this . length 0；}console.log($('#elem ')。存在()？存在！”: '不存在！');3.3.jQuery方法$()实际上有两个参数

$('li '，' #firstList ')。每个(函数(){ console.log($(this))。html())；});这里，第二个参数用于限制第一个参数给出的搜索结果

$('div '，{ ' class ' : ' bigBlue '，' css': { '背景色' : '紫色' }，' width' : 20，' height': 20，Animate' : {//可以设置div' width' : 200，' height' :50})的动画效果)。追加到(' # result ')；这里，第二个参数用于设置创建的元素。

4.4.jquery中的end()方法可以让链式语法写得更高效更快速。

ul id='膳食' li ul class='早餐' li class='鸡蛋' No/li li class='吐司' No/li li class='果汁' no/Li/ul/Li/ul早餐. find('。鸡蛋)。文本(“是”)。end() //返回到早餐. find('。吐司')。文本(“是”)。end()。查找('。果汁’)。toggleClass('果汁咖啡')。文本(“是”)；这里，end()返回搜索元素的上层。

5.右键单击5.contextmenu事件

也许您希望web应用程序感觉更原生，所以您可以阻止contextmenu默认事件。

$(function(){ $(document))。on('contextmenu '，函数(e){ e . preventdefault()；});});当然，当应用此事件时，您也可以自定义右键操作菜单，类似于

6.有时候我们不希望网页的某个部分被选中，比如复制粘贴。我们可以做到这一点：

$(' p . desc ')。attr('不可选择'，' on ')。css('用户选择'，'无')。on('selectstart '，false)；

这样，就不能再选择内容了。

7.最小DOM操作

用js操作DOM是资源的浪费。以下方法通常是我们的惯例：

var elem=$(' # elem ')；for(var I=0；i 100I){ elem . append(' lie element ' I '/Li ')；}这样做，重复添加元素无疑是对资源的极大浪费，而通过以下方法，可以减少大量的DOM操作

var elem=$('#elem ')，arr=[]；for(var I=0；我100I){ arr。推(' lie元素' I '/Li ')；} elem。追加(arr。join(')；8.更方便的分解统一资源定位器

我们一般可以使用正则表达式来分解网址，但是这并不是一个好方法，我们可以借助a标签来完成统一资源定位器的分解

'http://tutorialzine.com/books/jquery-trickshots？trick=12ab c=123 # comments '；var a=$('a '，{ href : URL })；控制台。日志(网址)；console.log('主机名： ' a.prop('主机名'));//主机名： tutorialzine.com控制台。日志('路径：'a .道具('路径名'));//路径：/books/jquery-trick shots控制台。日志(' query : ' a . prop(' search '))；//Query:trick=12ab c=123控制台。日志('协议： ' a . prop('协议'))；//协议： http :控制台。日志(' Hash 3360 ' a . prop(' Hash '))；//hash : #注释这样我们就可以很快速的完成统一资源定位器的分解

9.有时候，缓存选择器，反而可以优化你的射流研究…

下面有三种情况，第一种情况是一部分人的通常做法，这种写法费力而且不讨好，后面两种方案则是对第一种的优化，可以二选一。

第一种：

$(' #煎饼李')。等式(0).移除();$(' #煎饼李')。等式(1)。移除();$(' #煎饼李')。等式(2)。移除();第二种和第三种，可以二选一：

//第二种定义变量煎饼=$(' #煎饼李’)；煎饼。等式(0).移除();煎饼。方程式(1 ).移除();煎饼。方程式(2 ).移除();//第三种煎饼。等式(0).移除()。end().等式(1)。移除()。end().等式(2)。移除()。end()；10.on()方法

打开()方法在被选元素及子元素上添加一个或多个事件处理程序。

自jQuery版本1.7 起，on()方法是绑定()、活动()和代表()方法的新的替代品。该方法给应用程序接口带来很多便利，推荐使用该方法，它简化了jQuery代码库。

注意：使用打开()方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素)。

提示：如需移除事件处理程序，请使用关闭()方法。

提示：如需添加只运行一次的事件然后移除，请使用一个方法。

$(选择器)。打开（事件、子选择器、数据、函数、映射)

11.模拟触发事件

我们可以通过引发模拟触发一个点击事件

var press=$(' # press ')；press.on('click '，function(e，how){ how=how | | ' '；警报('按钮被点击'怎么'!');});媒体。触发器(' click ')；press.trigger('click '，[' fast '])；同时，我们亦可以，使用打开()方法创建自己喜欢的事件名称，然后通过引发来触发。举例如下：

按钮id='button1 '跳转/按钮按钮id='button2 '打孔/按钮按钮id='button3 '点击/按钮按钮id='clear '样式=' float : right ' clear/button div id=' event div '/div var button 1=$(“# button 1”)、button 2=$(“# button 2”)、button 3=$(“# button 3”)、clear=$(“# clear”)、div=$(“# event div”)；div。on({ jump : function(){ alert(' jump！');}，打孔：函数(e，数据){警报('打孔'数据)！');},点击：函数(){ alert('模拟点击！');}});按钮1。单击(function(){ div。触发器(“跳转”)；});button2.click(function(){ //将数据与事件div .触发器一起传递('打孔'，['硬'])；});按钮3。单击(function(){ div。触发器(' click ')；});安全了。单击(function(){//一些清晰的代码});12.触摸事件

//定义一些变量ball=$('div id='ball'/div ').appendo(' body ')，startPosition={}，element position={ }；//监听鼠标并触摸eventsball。打开('鼠标向下触摸开始'，函数(e){ e . prevent default()；//规范化触摸事件对象e=(e.originalEvent.touches)？e .原创。触摸[0]: e；//记录当前位置startPosition={x: e.pageX，y : e . Pagey }；元素位置={ x :球。偏移量().左侧，y: ball.offset().top }；//这些事件侦听器将在以后被移除球。on('鼠标移动。雷姆触摸移动。rem '，函数(e){ e=(e . originalevent。触摸)？e .原创。触摸[0]: e；球。CSS({ top :元素位置。y(例如pagey-开始位置。y)，左：元素位置。x(例如pagex-起始位置。x)、})；});});ball.on('mouseup touchend '，function(){ //移除重*将听众移至ball.off(').rem’)；});13.更快的阻止默认事件

通常，我们用event.preventDefalut()来阻止默认事件，但是jquery为此提供了更简便的方法：

高格。com/' id=' Gotoggle '转到Google/a $(' # Gotoggle ').点击（假);14.使用事件。结果链接多个事件处理程序。

对一个元素绑定多个事件处理程序并不常见，而使用事件。结果更可以将多个事件处理程序联系起来。看下面的例子。

var press=$(' # press ')；press.on('click '，function(){ return ' Hip '；});按。打开('点击')，函数{ console.log(e.result ' Hop！');})//控制台输出： HipHop！15.平行的运行多个埃阿斯请求

当我们需要发送多个埃阿斯请求是，相反于等待一个发送结束再发送下一个，我们可以平行地发送来加速埃阿斯请求发送。

$.什么时候(美元.get('assets/misc/1.json ')，美元.get('assets/misc/2.json ').然后（函数(r1，r2){ console.log(r1[0]).消息r2[0].消息);})16.通过jQuery获得互联网协议(互联网协议的缩写)

我们不仅可以在电脑上砰到一个网站的ip，也可以通过jQuery得到

$.get('https://jsonip.com/'，function(RES){ console。日志；});

17.使用最简单的创建交互式、快速动态网页应用的网页开发技术请求

jQuery(使用ajax)提供了一个速记的方法来快速下载内容并添加在一个元素中。

p class=' content '/p p class=' content '/p

var contentDivs=$(' .内容');contentDivs.eq(0).加载(' 1。txt’)；contentDivs.eq(1).加载(' 1 .html # header’)；18.通过互联网协议(互联网协议)地址获得地理位置

有很多在线服务可以告诉我们互联网协议(互联网协议)地址所在的城市和国家，下面我们先砰到百度的互联网协议(互联网协议)地址，然后获取其地理位置：

var ip='119.75.218.70 '，API=' http://freegeoip。net/JSON/' IP '？回调=?";$.getJSON(api，函数(r){ console。日志(' r . city '，' r.country_name '的天气怎么样？);});19.使用匿名函数来产生一个独立的代码块

定义全局变量和函数是一种代码很粗糙的行为，更好的方式是通过使用匿名函数使你的代码独立于块之中。看下面的例子：

（函数($){ var c=1；$ .fn。count=function(){ log(c)；归还这个；};})(jQuery)；$(文档)。count()；$(“正文”).计数()。count()；以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！