打探了这么些本领初阶发挥jQuery的威力

by admin on 2019年9月3日

由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择器与attr方法,还有几个动画,如果只是如此,相比于其带来的开销,其实还不如不使用,下面介绍几个jQuery常用的方法,来让jQuery的威力发挥出来,否则只用有限的几个方法,相对于运行速度问题,真不如不用jQuery。

一、头脑风暴

概念:头脑风暴是有美国创造学家A.F奥斯卡发明的一种激发创造性思维的工具。

图片 1

jQuery如此之好用,和其在获取对象时使用与CSS选择器兼容的语法有很大关系,毕竟CSS选择器大家都很熟悉(关于CSS选择器可以看看十分钟搞定CSS选择器),但其强大在兼容了CSS3的选择器,甚至多出了很多。

运用“头脑风暴”的四点原则

第一,自由思考。

权力和威望,会影响自由思考。一旦有人的观点,被认为比另一些人的更有价值,有些大脑就会被关闭。圆桌会议,不要打印头衔,不要座位主次。不要自谦地说:“我提一个不成熟的看法”、“我有一个不一定行得通的想法”。

第二,延迟评判。

禁止批评,甚至禁止评论别人的想法。不要说:“这想法太离谱了!”、“这想法太陈旧了”、“这是不可能的”、“这不符合某定律”。

批评,和评论,是扼杀更多想法的刽子手。

第三,以量求质。

刚开始大家的想法,就像刚打开热水龙头后的第一段冷水。前30个想法常常很容易,真正的创造力很多都出现于在第50个想法之后。所以,整场头脑风暴要争取产生至少100个新想法。数量,在这里比质量更重要。

一家公司头脑风暴新产品的名称。经过2小时“不自谦、不批评”的激烈讨论,大家提出了300多个新名字。数量比质量重要,主持人没做任何评价。3天后,他请大家默写还记得住的名字。大家只写出来20多个。他们从这20多个中挑选了3个,再让用户从3个中挑了1个。

第四,结合改善。

讨论尽量要小范围(10-20人左右);任何时候只能有一个人发言;不可以交头接耳开小会;把前面的想法都贴在大白板上,激发更多新想法。

谷歌通过网民搜索行为预测流感暴发、华尔街基金公司通过分析全球社交网络账户留言成功指导股票操作、百度通过搜索数据分析预测全国5A级景区未
来两天客流及舒适度……提起大数据,上述堪称“神奇”的案例你也许不会陌生。坐拥全球最大规模的6.68亿互联网用户,高达6亿部智能终端,以年均
50%速度增长的数据总量,超过1000个经营性互联网数据中心……随着信息技术的日益普及和“互联网
”融合态势的加快,我国正加速拥抱大数据时代。

选择器

二、思维导图

概念:思维导图,最早由英国教育学家东尼博赞发明。他研究发现,人类的思维方式,不是线性的,不是表格的,而是发射性的:从一点出发,烟花式绽放。他提出了“放射性思维”的概念,和基于概念的思考工具:思维导图。

不过,对于不少传统企业而言,如何将大数据迅速转化为核心竞争力,至今依然是一头雾水。

有了CSS选择器基础后,看jQuery的选择器就很简单了,不再详细一一说明

使用思维导图的三个建议

第一,先从目标开始。

用思维导图来思考,来创造时,首先要想清楚:你的目标是什么?这个目标可能是:如何在3个月内提升业绩?这个目标可能是:如何在3个月内提升业绩?企业的愿景、使命、价值感是什么?怎样才能让她爱上我?下一年我的时间应该怎么分配?等等。

找个足够大的白板,把目标写在正中间。这块白板要大到,你不会因为地方不够就想:这一点不重要,留些地方写重要的事吧。

第二,不被导图限制。

不要被层级限制。有任何的想法,立刻写在纸上,不必把第一层MECE了,再想第二层。

不要被形式限制。图片、颜色、线条都重要。追求美观,让别人看到后“哇”地一声赞叹,反而会让你忘了真正的重点。

不要被逻辑限制。有个想法表达不准确,或者挂错层次了,不重要。擦掉重写,或者重新关联,不必“落笔一定不能错”。

第三,善用各种工具。

东尼博赞时代的思维导图,很多是在白纸上画的。但在今天,我不太建议你在白纸上画了,因为修改、保存都很困难。用巨大的白板、或者白板贴;平板电脑,比如Sur-face电脑上的OneNote画图;专业的绘制思维导图的软件,Mind
Manager等。

有的企业将大数据简单化,认为将企业积累的用户数据进行简单分析,就能指导未来的市场决策。

基本选择器  
$(‘*’) 匹配页面所有元素
$(‘#id’) id选择器
$(‘.class’) 类选择器
$(‘element’) 标签选择器
   
组合/层次选择器  
$(‘E,F’) 多元素选择器,用”,分隔,同时匹配元素E或元素F
$(‘E F’) 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
$(E>F) 子元素选择器,用”>”分隔,匹配E元素的所有直接子元素
$(‘E+F’) 直接相邻选择器,匹配E元素之后相邻同级元素F
$(‘E~F’) 普通相邻选择器(弟弟选择器),匹配E元素之后同级元素F(无论直接相邻与否)
$(‘.class1.class2′) 匹配类名中既包含class1又包含class2的元素
基本过滤选择器  
$("E:first") 所有E中的第一个
$("E:last") 所有E中的最后一个
$("E:not(selector)") 按照selector过滤E
$("E:even")             所有E中index是偶数
$("E:odd")              所有E中index是奇数
$("E:eq(n)")           所有E中index为n的元素
$("E:gt(n)")           所有E中index大于n的元素
$("E:ll(n)")            所有E中index小于n的元素
$(":header") 选择h1~h7 元素
$("div:animated") 选择正在执行动画效果的元素
内容过滤器  
$(‘E:contains(value)’) 内容中包含value值的元素
$(‘E:empty’) 内容为空的元素
$(‘E:has(F)’) 子元素中有F的元素,$(‘div:has(a)’):包含a标签的div
$(‘E: parent’) 父元素是E的元素,$(‘td: parent’):父元素是td的元素
可视化选择器  
$(‘E:hidden’) 所有被隐藏的E
$(‘E:visible’) 所有可见的E
属性过滤选择器  
$(‘E[attr]’) 含有属性attr的E
$(‘E[attr=value]’) 属性attr=value的E
$(‘E[attr !=value]’) 属性attr!=value的E
$(‘E[attr ^=value]’) 属性attr以value开头的E
$(‘E[attr $=value]’) 属性attr以value结尾的E
$(‘E[attr *=value]’) 属性attr包含value的E
$(‘E[attr][attr *=value]’) 可以连用
子元素过滤器  
$(‘E:nth-child(n)’) E的第n个子节点
$(‘E:nth-child(3n+1)’) E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)’) E的index为偶数的子节点
$(‘E:nth-child(odd)’) E的index为奇数的子节点
$(‘E:first-clild’) 所有E的第一个子节点
$(‘E:last-clild’) 所有E的最后一个子节点
$(‘E:only-clild’) 只有唯一子节点的E的子节点
表单元素选择器  
$(‘E:type’) 特定类型的input
$(‘:checked’) 被选中的checkbox或radio
$(‘option: selected’) 被选中的option

三、5W2H法

概念:5w2h,是英文最常见的七个问题:Why(为什么),What(是什么),Where(在何处),When(在何时),Who(由谁做),How(怎么做),和How
Much(要多少)的缩写。把这七个问题放在一起问,确实能帮你弥补思考问题的疏漏。

有的企业将大数据神秘化,认为只有像BAT(百度、阿里巴巴、腾讯的首字母缩写)那样拥有亿万用户的互联网大佬,才能从海量数据中挖掘出宝藏。

筛选方法

5w2h法的三种用法

第一,用5w2h法找到问题。

下属反应:前员工俱乐部最近不温不火。要搞明白这个问题,你可以试着拿起5w2h检查板:

What:前员工俱乐部的互动越来越少;

Where:减少的是微信群里的发言数量;

When:最近三周,尤其是最近一周;

Who:都不怎么发言了,尤其是以前最活跃的几个人;

How Much:500人的群,过去每天有1000条以上的发言,现在降到了几十条;

Why:这可能是因为群里水平高低不齐,话题价值不一,越来越多人疲累了。

这样,就把“前员工俱乐部最近不温不火”这个问题,具体化了。

第二,用5W2H变革创新。

你站在思维导图前,面对中央的“前员工俱乐部”留个大字,开始用5W2H法,围绕六个大字,开始用5W2h法,围绕七个问题层层展开。你甚至可以试着把这七个问题中的每一个,继续深入四个层次,寻找创新机会。

比如Why:做前员工俱乐部的原因是什么?

第一层深入:因为要保护和前员工的联系;

第二层深入:为什么要保持和前员工的联系?因为希望前员工帮助推广产品,推荐员工,给新产品提意见;

第三层深入:有更合适的实现这些目标的方法吗?也有。比如邀请其中一些真正有影响力、能力的,成为“荣誉顾问”;

第四层深入:为什么这么做更合适?因为避免了很多无效沟通。

于是,你在“前员工俱乐部”的基础上,设计了更有效的“荣誉顾问”计划。

第三,用5w2h法分配任务。

“李雷,榜我调查前员工俱乐部的现状,明天向我汇报。”

这是3W。你如果想要更缜密一些呢?

“李雷,老板希望改善前员工俱乐部的运营,你先帮我调查一下现状,列出好的10点,不好的10点。明天下午4点,在我办公室汇报。你可以找韩梅梅帮你一下。”

这,就是5w2h。

有的企业则将数据安全绝对化,认为数据是企业的核心商业秘密,要确保不被竞争对手获取,必须自建数据中心,自己收集、自己存储、自己分析,拒绝共享……

.find(selector) 查找集合每个元素的子节点

四、5Why法

概念:从问题出发,不断追问为什么,告别直接原因,路过间接原因,最终找到根本原因。

其实,上述认识都不一定全面。海量的数据规模、快速的数据流转和动态的数据体系、多样的数据类型、巨大的数据价值,是大数据的四大特征。当前,
在确保数据安全的前提下,应尽快突破数据孤岛,建设数据公地,实现数据共享,推动企业从自建数据中心向公有云迁移。与为一个客户单独构建的私有云不同,公
有云由第三方提供,免费或者成本低廉,核心属性是共享资源服务。向公有云迁移,可构建起涵盖数据采集、加工、管理、分析和应用全链条的大数据产业生态体
系,以及合作共赢的商业模式,从而将大数据的威力发挥到极致。

Get the descendants(子节点) of each element in the current set of
matched elements, filtered by a selector, jQuery object, or element.

用好5Why法需注意两点

第一、提出正确的问题。

员工说:“因为超过了负荷,保险丝就断了。”这时,如果你追问的不是“为什么会超符合”而是“为什么不用更好的保险丝?”那这个方向,就偏离了根本原因,走向了次要的采购流程。

提问题,要一直面对根本原因。

第二、区分原因和借口。

你问:“为什么会超负荷?”如果员工答:“是因为安排的工作量太大,机器都受不了,人就更受不了了”。如果你接着问:“为什么工作量这么大?”员工说:“因为车间主任真不是个好东西”。完了,这次讨论就会被情绪带走。

要区分客观原因。和主观借口。

那么,企业应该如何利用大数据呢?

复制代码 代码如下:

五、二维四象限

概念:把自己从“非此即彼”的
二分法里解放出来,用两个“对立统一”的重要属性作为依据,画出四象限图,分别讨论情况,逐个解决问题。

“车企对大数据有需求,可是不懂如何获取、如何分析;百度拥有海量的搜索数据,也有现成的数据分析处理能力,可是不知道需求方在哪儿。”谈及上汽大众与百度联合创立汽车行业数字营销研究中心,上汽大众汽车有限公司执行副总经理贾鸣镝坦言两家企业可谓一拍即合。

$(‘li.item-ii’).find(‘li’).css(‘background-color’, ‘red’);

使用“二维四象限”法提升思考能力

比如,你想分析风险管理,可以从“可能性”和“损失”两个维度,生成“转嫁,规避,降低和自留”这四个象限。

比如,你想分析对自我的认知,可以从“自己知不知道”和“别人知不知道”这两个维度,生成“公开的自我,秘密的自我,盲目的自我,和未知的自我”这四个象限。

比如,你想分析企业的产品布局,可以从“相对市场份额”和“市场增长率”这两个维度,生成“现金牛,明星,问题,和廋狗”这四个象限。

双方的合作,很快结出了成果。通过抓取近两年互联网上与汽车相关的2亿个网页的公开讨论内容,数字营销研究中心发现,在所有80后、90后含有
情感表达的讨论内容中,“快乐”以9.2%遥遥领先。而通过对“近三个月中搜索过紧凑型小车相关内容”的634万网民所有搜索关注点的分析,目标受众喜欢
看的电影、玩的游戏、被哪种美食吸引,又喜欢哪些公众人物……也清晰地展现了出来。于是,今年4月上市的紧凑型小车斯柯达晶锐将“只为快乐”作为品牌主
张,而围绕游戏、摄影、美食展开的一系列市场推广活动,也得到了年轻消费者的积极响应。

.filter(selector) 过滤当前集合内元素

显然,对于大多数传统企业而言,具备持续使用内外部大数据,并基于数据展开产品和服务创新的能力,并非一日之功。鉴于我国目前有价值的公共信息
资源和商业数据的开放程度还比较低,与百度、腾讯、阿里巴巴等拥有大数据、云计算优势的互联网领军企业合作,不失为一种好的模式。据悉,BAT已相继对中
小企业开放了大数据服务平台和公有云服务,目前,百度平台上汇聚了100万开发者,腾讯云开放了数据分析等前沿的云技术应用,阿里云开放了包括咨询、架构
设计、数据分析等云服务,这无疑为推动大数据产业发展提供了便利。而即将发布的关于推进大数据发展的行动纲要,对推动公共数据互联共享、强化信息安全保障
以及完善产业标准体系也做出了明确部署。

Reduce(减少) the set of matched elements to those that match the
selector or pass the function’s test.

复制代码 代码如下:

$(‘li’).filter(‘:even’).css(‘background-color’, ‘red’);

基本方法

.ready(handler) 文档加载完成后执行的方法,区别于window.onload

Specify a function to execute when the DOM is fully loaded.

复制代码 代码如下:

$(document).ready(function() {
  // Handler for .ready() called.
});

.each(function(index,element)) 遍历集合内每个元素

Iterate over a jQuery object, executing a function for each matched
element.

复制代码 代码如下:

$(“li” ).each(function( index ) {
  console.log( index + “: ” + $(this).text() );
});

jQuery.extend( target [, object1 ] [, objectN ] ) 合并对象

Merge the contents of two or more objects together into the first
object.

复制代码 代码如下:

var object = $.extend({}, object1, object2);

获取元素

.eq(index) 按index获取jQuery对象集合中的某个特定jQuery对象

Reduce the set of matched elements to the one at the specified index.

.eq(-index) 按逆序index获取jQuery对象集合中的某个特定jQuery对象

An integer indicating the position of the element, counting backwards
from the last element in the set.

复制代码 代码如下:

$( “li” ).eq( 2 ).css( “background-color”, “red” );

 

.get(index)
获取jQuery集合对象中某个特定index的DOM对象(将jQuery对象自动转换为DOM对象)

Retrieve one of the DOM elements matched by the jQuery object.

复制代码 代码如下:

console.log( $( “li” ).get( -1 ) );

.get() 将jQuery集合对象转换为DOM集合对象并返回

Retrieve the DOM elements matched by the jQuery object.

复制代码 代码如下:

console.log( $( “li” ).get() );

.index() / .index(selector)/ .index(element)
从给定集合中查找特定元素index

Search for a given element from among the matched elements.

  1. 没参数返回第一个元素index

2.如果参数是DOM对象或者jQuery对象,则返回参数在集合中的index

3.如果参数是选择器,返回第一个匹配元素index,没有找到返回-1

复制代码 代码如下:

var listItem = $( “#bar” );
alert( “Index: ” + $( “li” ).index( listItem ) );

.clone([withDataAndEvents][,deepWithDataAndEvents])
创建jQuery集合的一份deep
copy(子元素也会被复制),默认不copy对象的shuju和绑定事件

Create a deep copy of the set of matched elements.

复制代码 代码如下:

$( “.hello” ).clone().appendTo( “.goodbye” );

.parent([selector]) 获取jQuery对象符合selector的父元素

Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

复制代码 代码如下:

$( “li.item-a” ).parent(‘ul’).css( “background-color”, “red” );

.parents([selector]) 获取jQuery对象符合选择器的祖先元素

Get the ancestors of each element in the current set of matched
elements, optionally filtered by a selector.

复制代码 代码如下:

$( “span.selected” ) .parents( “div” ) .css( “border”, “2px red solid” )

插入元素

.append(content[,content]) / .append(function(index,html))
向对象尾部追加内容

Insert content, specified by the parameter, to the end of each element
in the set of matched elements.

  1. 可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象

  2. 如果参数是function,function可以返回DOM对象、HTML string、
    jQuery对象,参数是集合中的元素位置与原来的html值

复制代码 代码如下:

$( “.inner” ).append( “<p>Test</p>” );
$( “body” ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( “p” ).append( “<strong>Hello</strong>” );
$( “p” ).append( $( “strong” ) );
$( “p” ).append( document.createTextNode( “Hello” ) );

.appendTo(target) 把对象插入到目标元素尾部,目标元素可以是selector,
DOM对象, HTML string, 元素集合,jQuery对象;

Insert every element in the set of matched elements to the end of the
target.

复制代码 代码如下:

$( “h2” ).appendTo( $( “.container” ) );
$( “<p>Test</p>” ).appendTo( “.inner” );

.prepend(content[,content]) / .prepend(function(index,html))
向对象头部追加内容,用法和append类似

Insert content, specified by the parameter, to the beginning of each
element in the set of matched elements.

复制代码 代码如下:

$( “.inner” ).prepend( “<p>Test</p>” );

.prependTo(target) 把对象插入到目标元素头部,用法和prepend类似

Insert every element in the set of matched elements to the beginning of
the target.

复制代码 代码如下:

$( “<p>Test</p>” ).prependTo( “.inner” );

.before([content][,content]) / .before(function)
在对象前面(不是头部,而是外面,和对象并列同级)插入内容,参数和append类似

Insert content, specified by the parameter, before each element in the
set of matched elements.

复制代码 代码如下:

$( “.inner” ).before( “<p>Test</p>” );
$( “.container” ).before( $( “h2” ) );
$( “p” ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( “p” ).before( “<b>Hello</b>” );
$( “p” ).before( document.createTextNode( “Hello” ) );

.insertBefore(target) 把对象插入到target之前(同样不是头部,是同级)

Insert every element in the set of matched elements before the target.

复制代码 代码如下:

$( “h2” ).insertBefore( $( “.container” ) );

.after([content][,content]) / .after(function(index))
和before相反,在对象后面(不是尾部,而是外面,和对象并列同级)插入内容,参数和append类似

Insert content, specified by the parameter, after each element in the
set of matched elements.

复制代码 代码如下:

$( “.inner” ).after( “<p>Test</p>” );
$( “p” ).after( document.createTextNode( “Hello” ) );

.insertAfter(target)
和insertBefore相反,把对象插入到target之后(同样不是尾部,是同级)

Insert every element in the set of matched elements after the target.

复制代码 代码如下:

$( “<p>Test</p>” ).insertAfter( “.inner” );
$( “p” ).insertAfter( “#foo” );

包裹元素

.wrap(wrappingElement) / .wrap(function(index))
为每个对象包裹一层HTML结构,可以是selector, element, HTML string, jQuery
object

Wrap an HTML structure around each element in the set of matched
elements.

复制代码 代码如下:

<div class=”container”>
  <div class=”inner”>Hello</div>
  <div class=”inner”>Goodbye</div>
</div>$( “.inner” ).wrap( “<div class=’new’></div>”
);
<div class=”container”>
  <div class=”new”>
    <div class=”inner”>Hello</div>
  </div>
  <div class=”new”>
    <div class=”inner”>Goodbye</div>
  </div>
</div>

.wrapAll(wrappingElement) 把所有匹配对象包裹在同一个HTML结构中

Wrap an HTML structure around all elements in the set of matched
elements.

复制代码 代码如下:

<div class=”container”>
  <div class=”inner”>Hello</div>
  <div class=”inner”>Goodbye</div>
</div>$( “.inner” ).wrapAll( “<div class=’new’ />”);<div
class=”container”>
  <div class=”new”>
    <div class=”inner”>Hello</div>
    <div class=”inner”>Goodbye</div>
  </div>
</div>

.wrapInner(wrappingElement) / .wrapInner(function(index))
包裹匹配元素内容,这个不好说,一看例子就懂

Wrap an HTML structure around the content of each element in the set of
matched elements.

复制代码 代码如下:

<div class=”container”>
  <div class=”inner”>Hello</div>
  <div class=”inner”>Goodbye</div>
</div>$( “.inner” ).wrapInner( “<div
class=’new’></div>”);
<div class=”container”>
  <div class=”inner”>
    <div class=”new”>Hello</div>
  </div>
  <div class=”inner”>
    <div class=”new”>Goodbye</div>
  </div>
</div>

.unwap() 把DOM元素的parent移除

Remove the parents of the set of matched elements from the DOM, leaving
the matched elements in their place.

复制代码 代码如下:

pTags = $( “p” ).unwrap();

属性方法

.val() 获取元素的value值

Get the current value of the first element in the set of matched
elements.

复制代码 代码如下:

$( “input:checkbox:checked” ).val();

.val(value) /.val(function(index,value))
为元素设置值,index和value同样是指在为集合中每个元素设置的时候该元素的index和原value值

Set the value of each element in the set of matched elements.

复制代码 代码如下:

$( “input” ).val( ‘hello’ );
$( “input” ).on( “blur”, function() {
  $( this ).val(function( i, val ) {
    return val.toUpperCase();
  });
});

.attr(attributeName) 获取元素特定属性的值

Get the value of an attribute for the first element in the set of
matched elements.

复制代码 代码如下:

var title = $( “em” ).attr( “title” );

.attr(attributeName,value) / .attr(attributesJson) / .attr(
attributeName, function(index, attr) ) 为元素属性赋值

Set one or more attributes for the set of matched elements.

复制代码 代码如下:

$( “#greatphoto” ).attr( “alt”, “Beijing Brush Seller” );

$( “#greatphoto” ).attr({
  alt: “Beijing Brush Seller”,
  title: “photo by Kelly Clark”
});

$( “#greatphoto” ).attr( “title”, function( i, val ) {
  return val + ” – photo by Kelly Clark”;
});

.prop( propertyName ) 获取元素某特性值

Get the value of a property for the first element in the set of matched
elements.

复制代码 代码如下:

$( elem ).prop( “checked” )

.prop(propertyName,value) / .prop(propertiesJson) /
.prop(propertyName,function(index,oldPropertyValue)) 为元素特性赋值

Set one or more properties for the set of matched elements.

复制代码 代码如下:

$( “input” ).prop( “checked”, true );

$( “input[type=’checkbox’]” ).prop( “checked”, function( i, val ) {
  return !val;
});

$( “input[type=’checkbox’]” ).prop({
  disabled: true
});

关于attribute 和 property区别可以看看 jQuery的attr与prop

.data(key,value) / .value(json) 为HTML DOM元素添加数据,HTML5元素
已有data-*属性

Store arbitrary data associated with the matched elements.The .data()
method allows us to attach data of any type to DOM elements in a way
that is safe from circular references and therefore from memory leaks.

复制代码 代码如下:

$( “body” ).data( “foo”, 52 );
$( “body” ).data( “bar”, { myType: “test”, count: 40 } );
$( “body” ).data( { baz: [ 1, 2, 3 ] } );

.data(key) / .data() 获取获取data设置的数据或者HTML5 data-*属性中的数据

Return the value at the named data store for the first element in the
jQuery collection, as set by data(name, value) or by an HTML5 data-*
attribute.

复制代码 代码如下:

alert( $( “body” ).data( “foo” ) );
alert( $( “body” ).data() );

alert( $( “body” ).data( “foo” ) ); // undefined
$( “body” ).data( “bar”, “foobar” );
alert( $( “body” ).data( “bar” ) ); // foobar

CSS方法 .hasClass(calssName) 检查元素是否包含某个class,返回true/false

Determine whether any of the matched elements are assigned the given
class.

复制代码 代码如下:

$( “#mydiv” ).hasClass( “foo” )

.addClass(className) / .addClass(function(index,currentClass))
为元素添加class,不是覆盖原class,是追加,也不会检查重复

Adds the specified class(es) to each of the set of matched elements.

复制代码 代码如下:

$( “p” ).addClass( “myClass yourClass” );

$( “ul li” ).addClass(function( index ) {
  return “item-” + index;
});

removeClass([className]) / ,removeClass(function(index,class))
移除元素单个/多个/所有class

Remove a single class, multiple classes, or all classes from each
element in the set of matched elements.

复制代码 代码如下:

$( “p” ).removeClass( “myClass yourClass” );
$( “li:last” ).removeClass(function() {
  return $( this ).prev().attr( “class” );
});

.toggleClass(className) /.toggleClass(className,switch) / 
.toggleClass([switch]) / .toggleClass( function(index, class, switch)
[, switch ] )
toggle是切换的意思,方法用于切换,switch是个bool类型值,这个看例子就明白

Add or remove one or more classes from each element in the set of
matched elements, depending on either the class’s presence or the value
of the switch argument.

<div class=”tumble”>Some text.</div>

第一次执行

复制代码 代码如下:

$( “div.tumble” ).toggleClass( “bounce” )
<div class=”tumble bounce”>Some text.</div>

第二次执行

复制代码 代码如下:

$( “div.tumble” ).toggleClass( “bounce” )
<div class=”tumble”>Some text.</div>

复制代码 代码如下:

$( “#foo” ).toggleClass( className, addOrRemove );

// 两种写法意思一样

if ( addOrRemove ) {
  $( “#foo” ).addClass( className );
} else {
  $( “#foo” ).removeClass( className );
}

复制代码 代码如下:

$( “div.foo” ).toggleClass(function() {
  if ( $( this ).parent().is( “.bar” ) ) {
    return “happy”;
  } else {
    return “sad”;
  }
});

.css(propertyName) / .css(propertyNames) 获取元素style特定property的值

Get the value of style properties for the first element in the set of
matched elements.

复制代码 代码如下:

var color = $( this ).css( “background-color” );

 var styleProps = $( this ).css([
    “width”, “height”, “color”, “background-color”
  ]);

.css(propertyName,value) / .css( propertyName, function(index, value) )
/ .css( propertiesJson ) 设置元素style特定property的值

Set one or more CSS properties for the set of matched elements.

复制代码 代码如下:

$( “div.example” ).css( “width”, function( index ) {
  return index * 50;
});

$( this ).css( “width”, “+=200” );

$( this ).css( “background-color”, “yellow” );

   $( this ).css({
      “background-color”: “yellow”,
      “font-weight”: “bolder”
    });

事件方法

.bind( eventType [, eventData ], handler(eventObject) )
绑定事件处理程序,这个经常用,不多解释

Attach a handler to an event for the elements.

复制代码 代码如下:

$( “#foo” ).bind( “click”, function() {
  alert( “User clicked on ‘foo.'” );
});

.delegate( selector, eventType, handler(eventObject) ) 这个看官方解释吧

Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.

复制代码 代码如下:

$( “table” ).on( “click”, “td”, function()
{//这样把td的click事件处理程序绑在table上
  $( this ).toggleClass( “chosen” );
});

.on( events [, selector ] [, data ], handler(eventObject) )
1.7后推荐使用,取代bind、live、delegate

Attach an event handler function for one or more events to the selected
elements.

复制代码 代码如下:

$( “#dataTable tbody” ).on( “click”, “tr”, function() {
  alert( $( this ).text() );
});

关于bind、live、delegate、on的区别可以看看
jQuery三种事件绑定方式.bind(),.live(),.delegate()

.trigger( eventType [, extraParameters ] ) JavaScript出发元素绑定事件

Execute all handlers and behaviors attached to the matched elements for
the given event type.

复制代码 代码如下:

$( “#foo” ).trigger( “click” );

.toggle( [duration ] [, complete ] ) / .toggle( options )
隐藏或显示元素

Display or hide the matched elements.

复制代码 代码如下:

$( “.target” ).toggle();$( “#clickme” ).click(function() {
  $( “#book” ).toggle( “slow”, function() {
    // Animation complete.
  });
});

动画/Ajax 这两部分内容比较多,不是简单的一个function就可以的,这里只是列举一下常用方法名,关于其使用可以看看
jQuery API animation ajax ,或者 jQuery的动画处理总结,ASP.NET
使用Ajax动画

queue/dequeue/clearQueue

delay/stop

fadeIn/fadeOut/fadeTo/fadeToggle

slideUp/slideDown/slideToggle

show/hide

Ajax

$.ajax

$.load

$.get

最后

了解了上面这些内容,使用jQuery进行web开发的时候就可以体验到jQuery的威力了。本文不是jQuery学习指南,仅仅是个常用方法介绍,如果大家想学习jQuery,最好的教材还是jQuery
API,本文中示例与英文解释全部来源于jQuery API。
另外文中介绍内容远远不是jQuery全部,但是首先掌握了这些可以对jQuery有一个比较全面的认识,然后再学习其他内容的时候就可以游刃有余了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图