jquery: javascript库(jquery-3.3.1.js)
(1) 引入js库: <script type="text/javascript" src="...." ></script>
(2) jquery初始化函数:$(function(){...});
1.Dom对象与jQuery对象
Dom节点有三种类型:
元素节点 <html> <ul>... <p>
属性节点 :title src alt ...
文本节点: 文本节点
Dom对象:
以上三种节点类型的具体对象 就是Dom对象。
使用:JavaSCript能够直接操作的对象,就是Dom对象。
jQuery对象:
jQuery能够直接操作的对象,就是jQuery对象。
例如:var $title = $("#myTitile") ; 通过jquery获取到的 $title 就是一个jquery对象。
同样一个元素,即可以成为一个dom对象(javascript对象),也可以成为一个jquery对象
注:dom对象 只适用于js的各种语法(函数、属性),jquery对象只用于jquery的各种语法(函数、属性)。
dom对象->jquery对象 : jquery工厂,$(dom对象)
jquery对象 ->dom对象:
原理:jquery对象默认是一个数组 或集合 ;dom对象默认是一个单独的对象
数组:jquery对象[0]
集合:jquery对象.get(0)
2.Jquery选择器
标签选择器:$("标签名")
类选择器:$(".class值")
id选择器:$("#id值")
并集(或)选择器(逗号,):$(".class值,#id值")
交集选择器(同时存在)直接写:$(".class值#id值")$("p.myStyle").html()(选中 即是p标签,并且class的值是myStyle)
全局选择器:$("*")
相邻选择器(+):$("选择器1+选择器2")
同辈选择器(~):$("选择器1~选择器2")
后代选择器(空格):$("选择器1 选择器2")
子代选择器(>):$("选择器>选择器2")
$("[属性名]")
$("[属性名=属性值]")
$("[class!=a]") 不等于, 包含两种: 有class但值不是a, 没有class
$("[class^=a]") class以a开头的元素
$("[class$=a]") class以a结尾的元素
$("[class*=a]") class有a的元素
:first :最开头那一个
:last :最后那一个
:even :偶数
:odd :奇数
:eq(index):第index个
:gt(index) : >index的全部元素
:lt(index) : <index的全部元素
:not(选择器) :除了...以外
:header :选中所有的标题元素 h1 h2 <h1>
:focus : 获取当前焦点的元素
:visible :选中所有可见的元素
:hidden:选中所有隐藏的元素
3.事件、事件函数(事件方法)
js: onXxx
onclick();
写在<script>内,ready()外;
jquery: Xxx
click();
ready(function(){
$(选择器).事件类型(function(){
...
});
});
click():单击事件
mouseover():鼠标悬浮
mouseout():鼠标离开
keydown():按键 从上往下的 过程
keypress() : 按键被压到 最底部
keyup():松开按键
focus():获取焦点
blur():失去焦点
绑定事件:$(...).bind("事件名",[数据],函数);
批量绑定:$(...).bind({ "事件名":函数 , "事件名":函数 ,...,"事件名":函数 }) ;
移除事件:$(...).unbind("事件名");
hover(f1,f2):切换使用mouseover()和mouseout()
hide():隐藏形式--> hide([速度],[回调函数]);
show():显示
toggle():切换隐藏与显示
fadeIn():淡入 显示
fadeOut():淡出 隐藏
slideDown():下拉,显示
slideUp():上拉 隐藏
4.操作DOM
jquery对象.css("属性名","属性值");
jquery对象.css({ "属性名":"属性值" ,"属性名":"属性值" ,...,"属性名":"属性值" });
addClass("x");
addClass("x x x");
removeClass(x);
removeClass(x x );
removeClass():移除全部样式
toggleClass("x x x"):切换追加与移除
html():获取值 ,获取的是元素 的内容 ,包含了 元素内部的 各种标签
html(xxxx):先渲染,后显示
text():获取值 ,值获取文本值
text(xxxx):將值原样显示,没有渲染
val():获取value值
val(xxx):设置value值
①查询节点:(jquery选择器)
②创建节点: $()
$(选择器):获取节点
$(DOM对象):转换
$(html字符串)
③插入节点 文档
④替换节点
$X.replaceWith($Y) :用$Y替换$X
replaceAll();
⑤删除节点
remove():彻底删除
detach():将结点删除,但关联的事件、数据不会删除(不推荐使用)
empty():只删除内容
⑥克隆节点
clone(true|false)
$(document).ready(function(){
$("li").click(function(){ ... });
});
<li>xxxx</li>
attr("属性名"):获取属性值
attr("属性名","属性值"):设置属性值
attr({ "属性名":"属性值", "属性名":"属性值" , "属性名":"属性值" } );
removeAttr("属性名"):删除属性值
子节点集合
$(...).children( "li")
后代集合
$(...).find( "li")
同辈集合
next():后一个 +
prev(): 前一个
siblings():同辈,左、右
前辈
parent():父代
parents("ul"):祖先
过滤集合:
(1)很多方法的()就是一个过滤选择器
(2)filter("选择器...");
遍历集合:
$(...).each(function(index,element){...});
height(500) ;
width(500)
offset():偏移量(左上角的点),left top
offset(function(n,oldOffset){ ... })
offsetParent():获取 (已定位)的最近的祖先元素
scrollLet()
scrollTop()
(1) 获取要校验的元素值(选择器) 用户名、密码
(2) 通过字符串处理方法或者正则表达式等手段进行校验
(3) 触发校验的方法或事件(校验)
blur():失去焦点时触发
submit():当点击表单的 “提交submit”按钮时触发
onblur="xxx()"
onsubmit="xx()"