1.jQuery环境搭建
下载jquery包地址:http://jquery.com/
下载版本:最新版本jquery3.2.1
jquery-3.2.1.js和jquery-3.2.1.min.js
jquery-3.2.1.js:jquery未压缩版,提供开发和学习使用
jquery-3.2.1.min.js:jquery压缩版,提供工程项目开发部署
引入jQuery包:<scripttype="text/javascript" src="jquery-3.2.1.min.js"></script>
2.jQuery选择器
(1)基本选择器:$("#id"),$(".class"),$("element"),$("*")
(2)层级选择器:
$("sele,sele"),$("selesele"),$("sele>sele"),$("sele+sele")
(3) 基本过滤选择器::first :last :not(selector) :even :odd
:eq(index) :gt(index) :lt(index)
:header :animated :focus
(4)属性过滤选择器:[attr],[attr=v],[attr~=v],
[attr|=v],[attr^=v],[attr$=v],[attr*=v]
(5)子元素过滤选择::nth-child:first-child :last-child :only-child
(6)元素内容过滤选择::contains(text):empty :has(selector) :parent
(7)表单元素过滤选择::input :button:text :password
:radio:checkbox :submit :reset :file
(8)表单属性过滤选择::enabled:disabled :checked :selected
(9) 过滤筛选:eq、first、last、hasClass、filter、is、map、has、not、slice
(10)查找:children、closest、find、next、nextall、nextUntil、offsetParent、parent、parents、parentsUntil、prev、prevall、prevUntil、siblings
(11)选择器串联:add、andSelf、contents、end
3.事件
on/off:绑定事件
格式:selector.on(events(事件名),[selector](子选择器名),[data](参数传递),fn(事件触发后执行的函数))
常用事件:
change():当元素的值改变时发生 change 事件
click():当单击元素时,发生 click 事件
dblclick():当双击元素时,会发生 dblclick 事件
focus()、focus()、focusout()、blur()
keydown、keyup、keypress,mousedown、mouseenter、mouseleave、mouseleave、mousemove、mouseout、mouseover、mouseup、resize、scroll、select、submit、unload。
4.入口函数
(1)定义方式:$(function(){});
$(document).ready(function(){});
jQuery(function(){});
(2)jquery入口函数和js入口函数区别:
js入口函数只能有一个,多个会互相覆盖;
js入口函数需要当前page所有资源全部加载完毕后执行,jquery入口函数只要加载完文档结构就执行。
5.jquery常用的核心元素
JQuery(HTML)/$(HTML):动态创建DOM元素的HTML标记字符串
each(callbackfn)
size()、length:获取返回数据的大小/内容个数
index()、get():搜索匹配的元素并返回索引、根据索引获取指定元素
6. 文档DOM节点操作函数分析
(1)DOM节点内部插入节点:append/appendTo、prepend/prependTo
(2)DOM节点外部(前后)插入节点:after/insertAfter、before/insertBefore
(3)DOM节点外层包裹节点操作:wrap、unwrap、wrapInner
(4)DOM节点删除:empty、remove(元素属性同时被移除)、detach(元素属性被保留)
(5)DOM节点克隆:clone
7.属性操作
属性取值:attr(“name”)
单数属性设置:attr(“name”,“value”|fn)
多个属性设置:attr({name:“value”|fn,name:“value”|fn,...});
移除属性:removeAttr(“name”)
添加class类:addClass(“name”);
移除class类:removeClass(“name”);
切换删除和添加class类:toggleClass(“name”);
插入文本:html(content|fn)、text(content|fn)
8. 样式操作分析
样式取值:css(“name”)
单数样式设置:css(“name”,“value”|fn)
多个样式设置:css({name:“value”|fn,name:“value”|fn,...});
位置设置:offset、position、scrollTop、scrollLeft
尺寸设置:height、width、innerHeight、innerWidth、outerHeight、outerWidth。