jQuery
基本使用
-
入口函数
等着 DOM 结构渲染完毕即可执行内部代码, 相当于原生中的 DOMContentLoaded- $(function () {
}) ; - $(document).ready(function() {
});
- $(function () {
-
jQuery 的顶级对象 $
在代码中可用jQuery 代替 $,相当于原生中的 window -
jQuery 对象和 DOM 对象
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象
注:只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法 - DOM 对象转换为 jQuery 对象: $(“div”)
- jQuery 对象转换为 DOM 对象
$(“div”) [index]
$(“div”) .get(index)
选择器:$(“选择器”)
里面选择器直接写 CSS 选择器即可
-
设置样式
$(‘div’).css(‘属性’, ‘值’) -
隐式迭代
给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作, 方便我们调用 -
jQuery 筛选选择器
:first 获取第一个元素
:last 获取最后一个元素
:eq(index) 获取索引号为 index 的元素,从0开始
:odd 获取索引号为奇数的元素
:even 获取索引号为偶数的元素
用法:$(“li:first”); -
jQuery 筛选方法
parent() 查找父级
children(selector) 相当于父子选择器
find(selector) 相当于后代选择器
sibling(selector) 查找兄弟节点,不包括自己本身
eq(index) 相当于 :eq(index),index从0开始
用法:$(“li”).parent();
操作css方法
-
操作css方法
- 返回属性值:$(this).css(“color”);
- 设置样式:$(this).css(“color”, “red”); 属性必须加引号,值如果是数字可以不用跟单位和引号
- 设置多组样式:$(this).css({“color”:“white”,“font-size”:“20px”}); 属性可以不用加引号
-
设置类样式方法
- 添加类:$(“div”).addClass(“类名”);
- 移除类:$(“div”).removeClass(“类名”);
- 切换类:$(“div”).toggleClass(“类名”); 只是对指定类进行操作,不影响原先的类名
效果
- 参数都可以省略
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
- easing:用来指定切换效果,默认是“swing”,可用参数“linear”。
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
-
显示隐藏效果
- 显示:show([speed],[easing],[fn])
- 隐藏:hide([speed],[easing],[fn])
- 切换:toggle([speed],[easing],[fn])
-
滑动效果
- 下滑:slideDown([speed],[easing],[fn])
- 上滑:slideUp([speed],[easing],[fn])
- 切换:slideToggle([speed],[easing],[fn])
-
事件切换:hover([over,]out)
- over : 鼠标移到元素上要触发的函数(相当于mouseenter)
- out : 鼠标移出元素要触发的函数(相当于mouseleave)
- 如果只写一个函数,则鼠标经过和离开都会触发它
-
动画队列及其停止排队方法
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
停止排队:stop() 写道动画或者效果的前面,相当于停止结束上一次的动画 -
淡入淡出效果
- 淡入: fadeIn([speed],[easing],[fn])
- 淡出:fadeOut([speed],[easing],[fn])
- 切换:fadeToggle([speed],[easing],[fn])
- 渐进方式调整到指定的不透明度
fadeTo(speed,opacity,[easing],[fn]) opacity 透明度必须写,speed必须写
-
自定义动画 animate
animate(params,[speed],[easing],[fn])
params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法
属性操作
-
设置或获取元素固有属性值 prop()
- 获取属性:prop(“属性”)
- 设置属性:prop(“属性”,“属性值”)
-
设置或获取元素自定义属性值 attr()
- 获取属性:attr(“属性”) 类似于原生getAttribute()
- 设置属性:attr(“属性”,“属性值”) 类似于原生 setAttribute()
-
数据缓存 data()
可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。- 获取数据:data(“属性”)
- 附加数据:data(“属性”,“属性值”)
内容文本值
-
普通元素内容html() (相当于原生innerHTML)
- 获取内容:html()
- 设置内容:html(“内容”)
-
普通元素文本内容 text() (相当与原生 innerText)
- 获取内容:text()
- 设置内容:text(“文本内容”)
-
表单的值 val()(相当于原生value)
- 获取内容:val()
- 设置内容:val(“内容”)
元素操作
-
遍历元素
隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历- $(“div”).each(function (index, domEle) { })
demEle 是每个DOM元素对象,不是jquery对象 - $.each(object,function (index, element) { })
$.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象 ;遍历对象时相当于for…in。element 为遍历内容
- $(“div”).each(function (index, domEle) { })
-
创建元素
$(''<li>内容</li>''); 动态创建了一个li
-
添加元素
- 内部添加
- 放在匹配元素内部最后面,类似原生 appendChild:element.append(“内容”)
- 放在匹配元素内部最前面:element.prepend(“内容”)
- 外部添加
- 把内容放入目标元素后面 : element.after(’‘内容’’)
- 把内容放入目标元素前面 :element.before(’‘内容’’)
- 内部添加
-
删除元素
- 删除匹配的元素本身:element.remove()
- 删除匹配的元素集合中所有的子节点 :element.empty()
- 清空匹配的元素内容 :element.html("")
尺寸、位置操作
-
尺寸
width() / height() 只算width / height
innerWidth() / innerHeight() 包括 width / height、padding
outerWidth() / outerHeight() 包括 width / height、padding、border
outerWidth(true) / outerHeight(true) 包括 width / height、padding、border、margin
注 :以上参数为空,则是获取相应值,返回的是数字型;如果参数为数字,则是修改相应值;参数可以不必写单位。 -
位置
- offset() 设置或返回被选元素相对于文档的偏移坐标
offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
设置元素的偏移:offset({ top: 10, left: 30 }); - position() 返回相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
position().top,position().left,这个方法只能获取 - scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
- offset() 设置或返回被选元素相对于文档的偏移坐标
事件
-
事件注册
- 单个事件注册
element.事件(function(){})
例: $(“div”).click(function(){ })
- 单个事件注册
-
事件处理
-
on() 绑定事件
-
$(“div”).on({ mouseover: function(){}, mouseout: function(){} }); //绑定多个事件 $(“div”).on(“mouseover mouseout”, function() { }); // 如果事件处理程序相同
- 可以事件委派操作(把原来加给子元素身上的事件绑定在父元素身上)
$(‘ul’).on(‘click’, ‘li’, function() { }); - on() 可以绑定未来动态创建的元素
$(“div").on(“click”,”p”, function(){ }); p 是创建的元素
-
-
one() 只想触发一次事件,与on用法相同
-
off() 解绑事件 :可以移除通过 on() 方法添加的事件处理程序。
$(“p”).off() 解绑p元素所有事件处理程序
$(“p”).off( “click”) 解绑p元素上面的点击事件
$(“ul”).off(“click”, “li”) 解绑事件委托 -
trigger() 自动触发事件
- element.click()
- element.trigger(“click”)
- element.triggerHandler(“click”) 不会触发元素的默认行为,这是和前面两种的区别
-
-
事件对象
事件被触发,就会有事件对象的产生
element.on(events,[selector],function(event) {})- 阻止默认行为:event.preventDefault() 或者 return false
- 阻止冒泡: event.stopPropagation()
AJAX
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
AJAX = 异步 JavaScript 和 XML。
XHR
-
创建 XMLHttpRequest 对象
- variable=new XMLHttpRequest();
- variable=new ActiveXObject(“Microsoft.XMLHTTP”); IE5 和 IE6
-
向服务器发送请求
- 使用 XMLHttpRequest 对象的 open() 和 send() 方法
- open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置,该文件可以是任何类型的文件
- async:true(异步)或 false(同步),当 async=false 时,不要编写 onreadystatechange 函数并且把代码放到 send() 语句后面即可
- send(string) 将请求发送到服务器。
- string:仅用于 POST 请求
- open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
- 使用 XMLHttpRequest 对象的 open() 和 send() 方法
- GET 和 POST:与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
在以下情况中使用POST- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
- setRequestHeader(header,value) 向请求添加 HTTP 头
- header: 规定头的名称
- value: 规定头的值
-
服务器响应
XMLHttpRequest 对象的 responseText 或 responseXML 属性可以获得来自服务器的响应- responseText 获得字符串形式的响应数据。
- responseXML 获得 XML 形式的响应数据。
-
onreadystatechange 事件
- XMLHttpRequest 对象的三个重要的属性
当 readyState 等于 4 且状态为 200 时,表示响应已就绪。
onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。- onreadystatechange :存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
- readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪 - status
200: “OK”
404: 未找到页面
- XMLHttpRequest 对象的三个重要的属性
jQuery - AJAX
- $.ajax() 执行异步 AJAX 请求
- $(selector).load(url,data,function(response,status,xhr))
从服务器加载数据,并把返回的数据放置到指定的元素中- URL 必需。规定您需要请求的 URL。
- data 可选。规定连同请求发送到服务器的数据。
- function(data,status,xhr) 可选。规定当请求成功时运行的函数。
- $.get(URL,data,function(data,status,xhr),dataType)
使用 AJAX 的 HTTP GET 请求从服务器加载数据- URL 必需。规定您需要请求的 URL。
- data 可选。规定连同请求发送到服务器的数据。
- function(data,status,xhr) 可选。规定当请求成功时运行的函数。
- dataType 可选。规定预期的服务器响应的数据类型。
- $(selector).post(URL,data,function(data,status,xhr),dataType)
使用 AJAX 的 HTTP POST 请求从服务器加载数据- URL 必需。规定您需要请求的 URL。
- data 可选。规定连同请求发送到服务器的数据。
- function(data,status,xhr) 可选。规定当请求成功时运行的函数。
- dataType 可选。规定预期的服务器响应的数据类型。
JSON
JSON 是存储和交换文本信息的语法(是一种格式),类似 XML;JSON 比 XML 更小、更快,更易解析。
XML 需要使用 XML 解析器来解析,JSON 可以使用标准的 JavaScript 函数来解析。
-
将JSON 字符串转换为 JavaScript 对象
JSON.parse(text[, reviver])- text : 必需, 一个有效的 JSON 字符串。
- reviver : 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
- 返回给定 JSON 字符串转换后的对象。
-
将 JavaScript 值转换为 JSON 字符串。
JSON.stringify(value[, replacer[, space]])- value : 必需, 要转换的 JavaScript 值(通常为对象或数组)。
- replacer : 可选。用于转换结果的函数或数组。
- space : 可选,文本添加缩进、空格和换行符。
- 返回包含 JSON 文本的字符串。
-
JSON对象
- JSON 对象在大括号中,以键值对(key/value)形式书写
例:{ “name”:“runoob”, “alexa”:10000, “site”:null } - 嵌套JSON对象
JSON 对象中可以包含另外一个 JSON 对象
例:myObj = { "alexa":10000, "sites": { "site1":"www.runoob.com", "site3":"c.runoob.com" } }
- JSON 对象在大括号中,以键值对(key/value)形式书写
-
数组(可写在对象中)
- JSON 数组在中括号中书写
例:[ “Google”, “Runoob”, “Taobao” ]
- JSON 数组在中括号中书写
-
把 JSON 文本转换为 JavaScript 对象
var obj = eval ("(" + txt + “)”); -
JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。