JQuery学习笔记(一)

学习目标

  • 掌握使用jQuery操作样式
  • 掌握使用jQuery操作DOM
  • 能使用jQuery绑定事件
  • 能使用jQuery做出网页动画
  • 掌握jQuery的Ajax使用方法
  • 掌握常用调试技巧

1、jQuery操作样式

1.1、.attr()

jQuery中用attr()方法来获取和设置元素特性。

  • .attr(attributeName)—String
  • .attr(attributeName,value)—jQuery
  • .attr(attributes)—jQuery
  • .attr(attributeName,function(indx,attr))—jQuery

特性(attribute)就是DOM节点自带的属性,例如html中常用的id、class、title、align等。
属性(property)是这个DOM元素作为对象,其附加的内容,例如:tagName、nodeName、nodeType、defaultChecked好defaultSelected使用.prop()方法进行取值或赋值等。

1.2、remove()

为匹配元素集合中的每个元素移除一个特性(attribute)
.removeAttr(attributeName)—jQuery

1.3、.prop()与.removeProp()

  • .prop(propertyName)—String
  • .prop(propertyName,value)—jQuery
  • .prop(properties)—jQuery
  • .prop(propertyName,function(indx,attr))—jQuery

removeProp()方法为匹配的元素集合中的每个元素移除一个属性(property)

  • .removeProp(propertyName)—jQuery

1.4、.html

获取集合中第一个元素匹配的html内容或设置每一个匹配严肃的html内容。

  • .html()—String
  • .html(htmlString)—jQuery
  • .html(function(index,oldhtml))—jQuery

1.5、.text()

得到匹配元素接种每个元素的文本内容结合,包括他们的后代,或设置匹配元素结合中每个元素的文本内容未指定的文本内容。

  • .text()—String
  • .text(textString)—jQuery
  • .text(function(index,text))—jQuery

1.6、.val()

获取匹配元素的几何中的第一个元素的当前值或设置每个匹配元素的值

  • .b=val()—[object Object],[object,Object],[object Object]
  • .val()—jQuery
  • .va(function(index, value))—jQuery

1.7、.addClass()

用于动态增加class类名

  • .addClass(className)—jQuery
  • .addClass(function(index,currentClass))—jQuery

1.8、removeClass()

去除单个、多类、或者每个与元素相匹配类

  • .removeClass([className])—jQuery
  • .removeClass(funtion(index,class))—jQuery

1.9、toggleClass()

在匹配元素几何中的每个元素上添加或删除一个或多个央视类,取决于这个样式雷是否存在或值切换属性。即:如果存在(不存在)就删除(添加一个类)。

  • .toggleClass(className)—jQuery
  • .toggleClass(className,switch)—jQuery
  • .toggleClass([switch])—jQuery
  • .toggleClass(function(index,class,switch)[,switch])—jQuery

1.10、.css()

  • 获取元素样式属性的计算值或者设置元素的css属性。
  • .css(propertyName)—String
  • .css(propertyNames)—String
  • .css(proeprtyName,value)—jQuery
  • .css(propertyName,function(index,value))—jQuery
  • .css(properties)—jQuery

1.11、.css()与.addClass()

通过.addClass()我们可以批量的给相同的元素设置统一规则,变动起来比较方便,可以同意修改删除。如果通过.css()方法就需要制定每一个元素是一一的修改,日后维护也要一一的修改,比较麻烦。
通过.css方法设置样式属性优先级要熬与.addClass方法。

2、jQuery操作DOM

2.1、用jQuery()来创建节点

发挥一个匹配的元素集合,或者同股传入的HTML字符串创建jQuery节点

  • jQyery(selector [, context])—jQuery
  • jQuery(html [, ownerDocument])—jQuery

2.2、.append()与.appendTo()

append()这个操作与对指定的元素执行原生的appedChild方法雷死,将它们添加到匹配元素内部末尾处,作为其子节点

  • .append(content [, content])—jQuery
  • .append(function(index,html))—jQuery
  • .appendTo(target)—jQuery

2.3、.prepend()与.prependTo()

prepend()将内容添加到匹配元素内部开始出,作为其子节点

  • .prepend(content [, content])—jQuery
  • .prepend(function(index,html))—jQuery
  • .prependTo(target)—jQuery

2.4、.after()和.before()

after()在匹配元素的后面插入所制定的内容,作为其兄弟节点
before()在匹配元素的前面插入参数所制定的内容,作为其兄弟节点

  • .after(content [, content])—jQuery
  • .after(function(index))—jQuery
  • .before(content [, content])—jQuery
  • .before(function)—jQuery

2.5、.inserAfter()与.insertBefore()

.after().insertAfter()实现同样的功能。主要的不同时语法——特别是(插入)内容和目标的位置。
.before().insertBefore()实现同样的功能。主要区别是语法——特别是(插入)内容和目标的位置。

  • .insertAfter(target)—jQuery
  • .insertBefore(target)—jQuery

2.6、.empty()与.remove()

empty溢出了匹配元素中的所有子节点
.empty()—jQuery
remove会将元素自身移除,同时也会溢出元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

  • .remove([selector)—jQuery

2.7、detach()

detach()方法与remove()类似,与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

  • .detach([selector])—jQuery

2.8、clone()

clone()深度复制所有匹配的元素集合,包括所有匹配的元素、匹配原素下级元素、文字节点。
如果节点有事件或者数据之类的其他处理,我们需要通过clone(true)传递一个布尔值true用来指定,这样不仅仅只是科隆单纯的节点结构,还要把附带的事件与数据给一并克隆了。

  • .clone([withDataAndEvents])—jQuery
  • .clone([withDataAndEvents][,deepWithDataAndEvents])—jQuery

2.9、replaceWith()

replaceWith()用提供的内容替换集合中所有匹配的元素并返回被删除元素的集合。
.replaceAll.replaceWith()功能类似,主要是目标和源的位置区别
.replaceWwith().replaceAll()方法会删除与节点相关联的所有数据和事件处理程序。

  • .replaceWith(newContent)—jQuery
  • .replaceWith(function)—jQuery

2.10、jQuery遍历

  • children()
  • find()
  • parent()
  • parents()
  • closest()
  • next()
  • siblings()
  • add()
  • each()

3、jQuery事件

3.1、.click()

绑定一个点击事件的处理函数。

  • .click(handler(eventObject))—jQuery
  • .click()[]eventData],handler(eventObject))—jQuery

3.2、.blur()与.focus()

.focus()绑定表达元素获得焦点的时候事件处理函数。
.blur()绑定表单元素失去焦点的时候事件处理函数。

  • .focus(handler(eventObject))—jQuery
  • .focus([eventData],handler(eventObject))—jQuery

3.3、.on()

jQuery on()方法诗官方推荐的绑定事件的一个方法。
事件绑定在最上层div元素上,当用户出发在a元素上,事件将网上冒泡,一直会冒泡在div元素上。如果提供了单个参数,那么事件在网上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数。

  • .on(events [, selector] [, data], handler(eventObject))—jQuery
  • .on(events [, selector] [, data])—jQuery

3.4、off()

通过off()方法移除事件处理函数。
根据on绑定事件的一些疼,off方法也可以通过相应的传递组合事件名,名字空间,选择器或处理函数来移除绑定在元素上制定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除。

  • .off(events [, selector] [, handler(eventObject)])—jQuery
  • .off(events [, selector])—jQuery
  • .off()—jQuery

4、jQuery操作动画

4.1、.animate()

.animate()方法允许我们在任意的数值的css属性上创建动画。两种语法的使用,几乎差不多,唯一必要二属性就是一组css属性键值对。这组属性和用于这只.css()方法的属性键值对类似,除了属性范围做了更多闲置。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。

  • .animate(properties [, duration] [, easing] [, complete])—jQuery
  • .animate(properties, options)—jQuery

5、jQuery的Ajax

5.1、.jQuery.ajax()

执行一个异步的HTTP请求。

  • jQuery.ajax(url [, settings])—jqXHR

  • jQuery.ajax([settings])—jqXHR

  • async:Boolean默认设置下,所有请求均为异步请求

  • url:String发送请求地址

  • data:Plain,Object发送到服务器的数据

  • dataType:String与其服务器返回的数据类型

  • type:String请求方式("POST"或者"GET")

  • error:Function请求失败时调用此函数。

  • success:Function请求成功后毁掉函数。

  • beforeSend:Function发送请求前调用此函数

  • dataFilter:Function给Ajax返回的原始数据进行预处理的函数。

6、调试技巧

6.1、使用Chrome开发工具调试

  • 控制台Console
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容