jQuery-大鹏
2019-11-27 17:20:00 0 举报AI智能生成
Jquery
作者其他创作
大纲/内容
背景知识
目的：简化JavaScript开发
特点
写的少，做得多（Write less Do More）
兼容各大浏览器（Chrome、Firefox、Safari、IE8.0>）
能完成较高难度的富客户端页面
作用：预封装很多对象和函数
历史
曾经是一个优秀的轻量级javascript类库
是由John Resig在2006年1月创建的开源项目
jQuery 2.x版本不再支持IE 8及之前版本
使用步骤
在head中放置单独的JS脚本
在HTML页面中引入jQuery文件
使用jQuery的选择器定位HTML页面元素
使用jQuery提供的API方法完成需求
JQuery对象
DOM对象
通过DOM获取到的HTML元素就是DOM对象
JQuery对象
通过jQuery包装DOM对象后产生的对象
jQuery底层还是DOM对象
jQuery对象转换为DOM对象
使用get(index)方法
jQuery对象是类数组对象
DOM对象转换为jQuery对象
$(DOM对象)
约定
通过jQuery所得到的对象，使用“$”符号标识
在jQuery中，“$”符号等同于“jQuery”
若冲突可以用语义释放
var jQ = jQuery.noConflict();
选择器
基本内容
用法
类似于CSS选择器
作用
定位HTML页面元素
特点
将HTML页面中的内容与行为分离
注意
JQuery选择器是JQuery内容的根本
优势
简介的写法
兼容CSS样式
完善的处理机制
AJAX操作
链式操作
工厂函数
写法
$()
作用
使用选择器
包装DOM
基本选择器
id
用法
$("#test").hide()
说明
返回HTML页面中id属性值的元素
class
用法
$(".test").hide()
说明
返回HTML页面中class属性值为className的元素
元素
用法
$("p").hide()
说明
返回HTML页面中元素名为elementName的元素
通配符
用法
$("*")
说明
返回HTML页面中所有元素
合并
用法
$("selector1, selector2, ...")
说明
返回每个选择器匹配的元素合集
注意
每一个选择器之间使用“,”隔开
该选择器返回的结果为并集
层次选择器
祖先与后代选择器
用法
$("selector1 selector2")
说明
返回selector1元素中后代为selector2的元素
父与子选择器
用法
$("selector1 > selector2")
说明
返回selector1元素中子元素为selector2的元素
下一个兄弟选择器
用法
$("selector1 + selector2")
说明
返回selector1元素的下一个兄弟元素为selector2的元素
注意
该选择器返回的是指定一个元素，但格式为类数组
后面所有兄弟选择器
用法
$("selector1 ~ selector2")
说明
返回selector1元素后面为selector2的兄弟元素
注意
该选择器返回的是指定元素的后面指定元素
过滤选择器
基本内容
作用
通过指定过滤规则过滤指定范围内的元素
特点
过滤选择器的前缀为“:”
基本过滤
:first
返回第一个元素
:last
返回最后一个元素
:even
返回索引值为偶数的元素
:odd
返回索引值为奇数的元素
:eq(index)
返回索引值为index的元素
:gt(index)
返回索引值大于index的元素
:lt(index)
返回索引值小于index的元素
:not(selector)
返回不包含指定选择器匹配的元素
内容过滤
:contains(text)
返回文本内容包含text的元素
:empty
返回不包含子元素或文本元素的元素
:parent
返回包含子元素或文本元素的元素
:has(selector)
返回包含指定选择器匹配的元素的元素
可见性过滤
:hidden
返回不可见的元素
:visible
返回可见的元素
属性过滤
[attribute]
返回具有attribute属性的元素<br>
[attribute=value]
返回具有attribute等于value的元素
[attribute!=value]
说明
返回具有attribute不等于value的元素
注意
该选择器包含没有该属性的元素
[attribute^=value]
返回具有attribute是以value开始的元素
[attirbute$=valule]
返回具有attribute是以value结束的元素
[attribute*=value]
返回具有attribute包含value的元素
[selector1][selector2]...
说明
返回同时匹配所有属性过滤选择器的元素
注意
该选择器的结果为交集
表单对象属性过滤
:enabled
返回可用的元素
:disabled
返回不可用的元素
:checked
返回单选框或复选框被选中的元素
:selected
返回下拉列表中被选中的元素
表单选择器
:input
返回input、select、textarea和button元素
:text
返回单行文本框
:password
返回密码框
:radio
返回单选框
:checkbox
返回复选框
:submit
返回提交按钮
:image
返回图像按钮
:reset
返回重置按钮
:button
返回所有按钮
:file
返回上传域
DOM
基本操作
内容操作
html()
用法
<p class="p1">$("#test").html();</p>
<p class="p1">$("#test2").html("<b>Hello world!</b>");</p>
说明
读取或修改指定元素的HTML内容
类似于innerHTML属性的作用
val()
用法
<p class="p1">$("#test").val();</p>
<p class="p1">$("#test3").val("Dolly Duck");</p>
说明
读取或修改指定元素的value属性值
text()
用法
<p class="p1">$("#test").text();</p>
<p class="p1">$("#test1").text("Hello world!");</p>
说明
读取或修改指定元素的文本内容
类似于textContent属性的作用
属性操作
attr()
用法
<p class="p1">$(“#test”).attr("href");</p>
<p class="p1">$("#w3s").attr("href","http://www.deepe.ren/jquery");</p>
说明
读取或修改指定元素的属性值
removeAttr()
用法
$(“#test”).removeAttr("href");
说明
删除指定元素的属性值
样式操作
<p class="p1">$("p").css({"background-color":"yellow","font-size":"200%"});</p>
attr
语法
attr("class", className)
attr("class", className)
说明
读取或修改指定元素的class属性值
addClass
语法
addClass(className)
说明
为指定元素追加样式
removeClass
语法
removeClass(className)
说明
删除指定元素的指定样式
注意
removeClass()<br>删除指定元素的所有样式<br>
toggleClass
语法
toggleClass(className)
说明
在没有样式和指定样式之间切换
hasClass
语法
hasClass(className)
说明
判断是否包含ClassName样式（返回Boolean值）
css
语法1
css(attrName)<br>
说明：只能设置一个CSS属性
语法2
css(attrName, attrValue)<br>
说明：只能设置一个CSS属性
语法3
css( {key : value} )
说明：可以设置多个CSS属性
节点操作
创建节点
通用方式
$(HTML代码)
节点方式
元素节点
$("")
文本节点
text(textContent)
属性节点
attr(attrName, attrValue)
插入节点
<p class="p1">$("img").after("Some text after");</p>
<p class="p1">$("img").before("Some text before");</p>
append()
用法
<p class="p1">$("p").append("Some appended text.");</p>
说明
append后面的元素插入在append前面的元素的后面
prepend()
用法
<p class="p1">$("p").prepend("Some prepended text.");</p>
说明
prepend后面的元素插入在prepend前面的元素的前面
appendTo()
用法
说明
appendTo前面的元素插入在appendTo后面的元素的后面
prependTo()
用法
说明
prependTo前面的元素插入在prependTo后面的元素的前面
删除元素
<p class="p1">$("p").remove(".italic");</p>
<p class="p1">$("#div1").empty();</p>
遍历
祖先
<p class="p1">$("span").parent();</p>
返回指定元素的父级元素（一个）
<p class="p1">$("span").parents("ul");</p>
返回指定元素的所有父级元素（多个）
<p class="p1">$("span").parentsUntil("div");</p>
返回span的父级元素（包括本身），截止到div标签（中间的）
后代
<p class="p1">$("div").children();</p>
返回指定元素的直接子元素（一级）
$("div").children("p.1");
返回指定元素的指定selector的所有子元素
<p class="p1">$("div").find("span");</p>
返回指定元素的指定selector的后代元素
同胞
上一个同胞
<p class="p1">prev()</p>
返回上一个兄弟元素
<p class="p1">prevAll()</p>
返回上面所有的兄弟元素
下一个同胞
<p class="p1">$("h2").next();</p>
返回下一个兄弟元素
<p class="p1">$("h2").nextAll();</p>
返回下面全部兄弟元素
<p class="p1">$("h2").nextUntil("h6");</p>
返回下一个兄弟元素直到h6
上下同胞
<p class="p1">$("h2").siblings();</p>
返回指定元素的所有的兄弟元素
<p class="p1">$("h2").siblings("p");</p>
返回指定元素的所有指定selector的兄弟元素
过滤
<p class="p1">$("div p").first();</p>
<p class="p1">$("div p").last();</p>
<p class="p1">$("p").eq(1);</p>
<p class="p1">$("p").filter(".intro");</p>
<p class="p1">$("p").not(".intro");</p>
动画
隐藏/显示
<p class="p1">$(selector).hide(speed,callback);</p>
<p class="p1">$(selector).show(speed,callback);</p>
淡入淡出
<p class="p1">$(selector).fadeIn(speed,callback);</p>
<p class="p1">$(selector).fadeOut(speed,callback);</p>
<p class="p1">$(selector).fadeToggle(speed,callback);</p>
<p class="p1">$(selector).fadeTo(speed,opacity,callback);</p>
滑动
<p class="p1">$(selector).slideDown(speed,callback);</p>
<p class="p1">$(selector).slideUp(speed,callback);</p>
<p class="p1">$(selector).slideToggle(speed,callback);</p>
动画
<p class="p1">$(selector).animate({params},speed,callback);</p>
队列功能
<p class="p1"><span class="s1">编写多个</span> animate() <span class="s1">调用</span></p>
停止
<p class="p1">$(selector).stop(stopAll,goToEnd);</p>
回调函数Callback
<p class="p1"><b>Callback </b><span class="s1">函数在当前动画</span><b> 100% </b><span class="s1">完成之后执行</span></p>
chaining
<p class="p1">$("#p1").css("color","red").slideUp(2000).slideDown(2000);</p>
事件
鼠标事件
click
dbclick
mouseenter
mouseleave
mousemove
hover
键盘事件
keydown
keyup
keypress
其他事件
focus
blur
change
submit
0 条评论
下一页
